Angular Academy · Lezione

ng-template e ng-container

Definire e ospitare frammenti di template

ng-template e ng-container è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.

Template che non eseguono il rendering

<ng-template> definisce un blocco di markup che non viene visualizzato finché qualcosa non lo istanzia esplicitamente. Costituisce la base delle direttive strutturali come *ngIf.

Definizione di un template

Il contenuto all'interno di <ng-template> rimane inattivo. Per utilizzarlo altrove, gli assegni una variabile di riferimento.

<ng-template #empty>
  <p>No items found.</p>
</ng-template>

Rendering con ngTemplateOutlet

Utilizzi ngTemplateOutlet per eseguire il rendering di un template tramite riferimento.

<ng-container *ngTemplateOutlet="empty"></ng-container>

<ng-template #empty>
  <p>No items found.</p>
</ng-template>

Perché usare ng-container

<ng-container> è un elemento di raggruppamento logico, non DOM. Consente di applicare direttive o raggruppare nodi senza aggiungere un elemento wrapper al DOM.

Evitare i div wrapper

Senza ng-container potrebbe aggiungere un inutile <div> solo per ospitare una direttiva. ng-container scompare dall'output visualizzato.

<ng-container *ngIf="user">
  <h2>{{ user.name }}</h2>
  <p>{{ user.email }}</p>
</ng-container>

Raggruppamento del flusso di controllo

ng-container è ideale per racchiudere i nuovi blocchi di flusso di controllo senza aggiungere elementi al DOM.

<ng-container *ngIf="ready">
  @for (item of items; track item.id) {
    <li>{{ item.name }}</li>
  }
</ng-container>

Contesto del template

I template possono ricevere un oggetto context, che espone i valori tramite variabili let-.

<ng-template #row let-name="name">
  <p>{{ name }}</p>
</ng-template>

<ng-container
  *ngTemplateOutlet="row; context: { name: 'Ada' }">
</ng-container>

Valore di contesto predefinito

Il valore di contesto speciale $implicit viene associato a una variabile let- senza una chiave assegnata.

<ng-template #item let-value>
  <span>{{ value }}</span>
</ng-template>

<ng-container
  *ngTemplateOutlet="item; context: { $implicit: 42 }">
</ng-container>

I template sono entità di prima classe

Un #ref su un <ng-template> è un TemplateRef. Può passarlo come @Input, consentendo a un componente di lasciare che i componenti utilizzatori personalizzino parti della propria UI.

emptyTemplate = input<TemplateRef<unknown>>();

ng-container come host

ng-container è utile anche come host di un punto di inserimento per componenti o template dinamici, mantenendo pulito il DOM.

<ng-container *ngComponentOutlet="widgetComponent">
</ng-container>

Quando utilizzare l'uno o l'altro

ng-template: markup differito o riutilizzabile. ng-container: raggruppamento e hosting di direttive senza aggiungere elementi al DOM. Spesso vengono utilizzati insieme.

Verifica rapida

Verifichi la Sua comprensione di ng-template e ng-container.

Riepilogo

Ha imparato che <ng-template> contiene markup inattivo e istanziabile, visualizzato tramite ngTemplateOutlet (con un contesto opzionale), mentre <ng-container> raggruppa nodi o ospita direttive senza aggiungere elementi al DOM.

Domande Frequenti

La lezione «ng-template e ng-container» è gratuita?

Sì — il testo completo di «ng-template e ng-container» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.

Cosa imparerò in «ng-template e ng-container»?

Definire e ospitare frammenti di template Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Angular Academy?

Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «ng-template e ng-container»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Angular Academy?

Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Angular Academy