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?