ng-content в Angular

Apr 1, 2018

Если тег (управляющий элемент / app-toggle-view) компонента содержит контент (в нашем примере это компонент app-block), то контент можно включить в шаблон при помощи ng-content. Таким образом мы можем объединить контент шаблона компонента с контентом непосредственно тега (управляющего элемента) компонента.

Свойство showContent определяет будет ли контент управляющего элемента отображаться на странице пользователя.

Пример:

<app-toggle-view>
    <app-block></app-block>
</app-toggle-view>
// ToggleViewComponent
import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-toggle-view',
    templateUrl: './toggle-view.component.html',
    styleUrls: ['./toggle-view.component.scss']
})
export class ToggleViewComponent implements OnInit {

    public showContent = false;

    constructor() { }

    ngOnInit() {
    }

}
<!-- toggle-view.component.html -->
<div class="row">
    <div class="col-sm-20">
        <div class="form-group">
            <label>Показать/скрыть содержимое ng-content</label>
            <input class="form-control"
                   type="checkbox"
                   [(ngModel)]="showContent"
            >
        </div>
    </div>
</div>

<pre>
{{ showContent | json }}
</pre>

<ng-content *ngIf="showContent"></ng-content>
Добавить комментарий
Комментарии:
asdasd
May 6, 2018
asdasdasd