Angular Academy · Lektion

ng-template och ng-container

Definiera och bädda in mallfragment.

Lektion 3 av 413 steg

ng-template och ng-container är en gratis lektion i Angular Academy på CoddyKit. Detta är lektion 3 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Angular Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Angular Academy innehåller totalt 4 lektioner.

Mallar som inte renderas

<ng-template> definierar ett markupstycke som inte renderas förrän något uttryckligen instansierar det. Det är grunden för strukturdirektiv som *ngIf.

Definiera en mall

Innehållet i <ng-template> förblir inaktivt. Ni ger det en referensvariabel för att kunna använda det någon annanstans.

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

Rendera med ngTemplateOutlet

Använd ngTemplateOutlet för att rendera en mall via en referens.

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

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

Varför ng-container?

<ng-container> är ett logiskt element som inte finns i DOM. Det gör att ni kan tillämpa direktiv eller gruppera noder utan att lägga till ett extra omslagselement i DOM.

Undvika wrapper-divar

Utan ng-container kanske ni lägger till en onödig <div> bara för att vara värd för ett direktiv. ng-container försvinner från det renderade resultatet.

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

Gruppera kontrollflöde

ng-container passar utmärkt för att omsluta nya kontrollflödesblock utan att lägga till något i DOM.

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

Mallkontext

Mallar kan ta emot ett kontext-objekt som exponerar värden via let--variabler.

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

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

Standardvärde i kontexten

Det särskilda kontextvärdet $implicit binds till en let--variabel utan tilldelad nyckel.

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

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

Mallar är förstaklassobjekt

En #ref på en <ng-template> är en TemplateRef. Ni kan skicka den som en @Input så att en komponent låter konsumenter anpassa delar av dess användargränssnitt.

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

ng-container som värd

ng-container är också praktiskt som uttagsvärd för dynamiska komponenter eller mallar och håller DOM ren.

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

När ska man använda vad?

ng-template: uppskjuten eller återanvändbar markup. ng-container: gruppering och värd för direktiv utan extra DOM. De används ofta tillsammans.

Snabbtest

Testa er förståelse av ng-template och ng-container.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Ni har lärt er att <ng-template> innehåller inaktiv, instansierbar markup som renderas via ngTemplateOutlet (med valfri kontext), och att <ng-container> grupperar noder eller är värd för direktiv utan att lägga till något i DOM.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 38
Lektioner: 144

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”ng-template och ng-container” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Angular Academy, inklusive ”ng-template och ng-container”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Angular Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”ng-template och ng-container”?

Definiera och bädda in mallfragment. Ni övar på Angular Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Angular Academy?

Du behöver inga förkunskaper. Utbildningen i Angular Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”ng-template och ng-container”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Angular Academy-lektionen?

Ja. Varje Angular Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Angular Academy