1.13.5.1.1. fejezet, Tartalom kivetítés

Beküldte pzoli - 2024, október 26 - 4:35du

Ng-content

app.component.html

<main>
 <card>
    <p>Some NG-Content</p>
  </card>
</main>

card.component.html

<p>card works!</p>
<ng-content/> <!-- // injected content: <p>Some NG-Content</p> -->

Szelektív kivetítés

post-list.component.html

@for(item of postList; track item.id) {
  <card>
    <span header>{{item.title}}</span>
    <p body>{{item.content}}</p>
    <p>Text after body</p>
  </card>
  <button (click)="deleteCard(item.id)">Delete</button>
} @empty {
  <p>List is empty</p>
}

card.component.html

<div class="card">
  <header><ng-content select="[header]"/></header>
  <div class="body">
    <ng-content select="[body]"/>
  </div>
  <ng-content/> <!-- // Text after body -->
</div>