4.3 Ng content - quan1997ap/angular-app-note GitHub Wiki

1. Use

Dùng để truyền nội dung vào bên trong 1 component.

call container-component in other component

<app-container>
   <app-header></app-header>
   <div class="footer"></div>
</app-container>

container.component.html

<div>
   <p>container-component</p>
   <ng-content select="app-header"></ng-content>
<div>

Note: Selector

  • tag: <ng-content select="app-header"></ng-content>
  • class: <ng-content select=".footer"></ng-content>

Khi truyền content tương ứng vào.
Thì container component sẽ render component tương ứng với selector. Nếu không khớp với selector nào thì không render. Nếu không có selecter => render mọi content truyền vào.

⚠️ **GitHub.com Fallback** ⚠️