ng-content
<ng-‐content></ng-‐content>
Multiple content placeholders
<ng-content select=".heading"></ng‐content>
<ng-content select=".body"></ng‐content>
Demo
Create bootstrap panel
import { Component } from 'angular2/core';
@Component({
selector: 'bs-panel',
template: `
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">
<ng-content select='.heading'></ng-content>
</h3>
</div>
<div class="panel-body">
<ng-content select='.body'></ng-content>
</div>
</div>
`
})
export class BootstrapPanelComponent { }
Use bootstrap panel
import {Component} from "angular2/core";
import {BootstrapPanelComponent} from './shared/bootstrap.panel.component';
@Component({
selector: "app",
template: `
<bs-panel>
<div class='heading'>I am heading</div>
<p class='body'>I am body</p>
</bs-panel>
`,
directives: [BootstrapPanelComponent]
})
export class MyApp{
}
Last updated
Was this helpful?