Работа с компонентами

ng-content

Элемент ng-content позволяет внедрять родительским компонентам код html в дочерние компоненты. Так, изменим компонент ChildComponent следующим образом:

import { Component } from '@angular/core';

@Component({
    selector: 'child-comp',
    template: `<ng-content></ng-content>
                <p>Привет {{name}}</p>`,
    styles: [`h2, p {color:navy;}`]
})
export class ChildComponent { 
    name= "Евгений";
}

Вместо элемента<ng-content>извне можно будет передать любое содержимое.

И изменим код главного компонента AppComponent:

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `<child-comp><h2>Добро пожаловать {{name}}!</h2></child-comp>`,
    styles: [`h2, p {color:#333;}`]
})
export class AppComponent { 
    name = 'Tom';
}

В элемент<child-comp> здесь передается заголовок <h2>Добро пожаловать {{name}}!</h2>. Затем этот заголовок будет вставляться в дочерний компонент ChildComponent на место <ng-content>.

Причем управлять разметкой, которая вставляется в <ng-content>, будет управлять AppComponent. Поэтому именно этот компонент задает стили и выражения привязки для вставляемого куска html.