ngTemplateOutlet (ngTemplateOutlet)

با ngTemplateOutlet می توانی یک قالب آماده را دوباره رندر کنی. قالب در <ng-template> مثل یک «دستور پخت» ذخیره می شود. سپس با [ngTemplateOutlet] همان دستور را اجرا می کنی.

ngTemplateOutlet چیست؟

قالب (Template) یعنی بخش HTML قابل استفاده مجدد. کانتکست (Context) یعنی داده هایی که به قالب می دهی. با [ngTemplateOutlet] قالب را نمایش می دهی و با [ngTemplateOutletContext] مقدار می دهی. سپس با let- آن مقدار را می خوانی.

کی از ngTemplateOutlet استفاده کنیم؟

• وقتی یک الگوی UI را برای دیتاهای متفاوت می خواهی.
• برای منطق پیچیده، کامپوننت بساز؛ برای نمایش سبک، قالب بس است.
• برای بسته بندی منطقی، از <ng-container> استفاده کن.

نکته: <ng-container> عنصر اضافی در DOM نمی سازد.

نمونه کامل

نوع پیام و متن را عوض کن؛ همان قالب با داده تازه رندر می شود.

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  template: `
    <h3>Templates with ngTemplateOutlet</h3>

    <label>
      Type:
      <select (change)=\"type = $any($event.target).value\">
        <option value=\"info\">info</option>
        <option value=\"warning\">warning</option>
        <option value=\"success\">success</option>
      </select>
    </label>

    <label>
      Message: <input (input)=\"msg = $any($event.target).value\" [value]=\"msg\" />
    </label>

    <ng-container
      [ngTemplateOutlet]=\"type === 'info' ? infoTpl : (type === 'warning' ? warnTpl : successTpl)\"
      [ngTemplateOutletContext]=\"{ $implicit: msg }\">
    </ng-container>

    <ng-template #infoTpl let-text>
      <p style=\"color:royalblue\">Info: {{ text }}</p>
    </ng-template>

    <ng-template #warnTpl let-text>
      <p style=\"color:darkorange\">Warning: {{ text }}</p>
    </ng-template>

    <ng-template #successTpl let-text>
      <p style=\"color:seagreen\">Success: {{ text }}</p>
    </ng-template>
  `
})
export class App {
  type: 'info' | 'warning' | 'success' = 'info';
  msg: string = 'Hello';
}

bootstrapApplication(App);

مشاهده در ادیتور

گام های عملی

1. قالب را با <ng-template> تعریف کن.
2. داده را با [ngTemplateOutletContext] بده.
3. داده را با let- داخل قالب بخوان.

پیوندهای مرتبط

نحوه دستورهای ساختاری را در دستورهای ساختاری ببین. همچنین ادامه مسیر در عبارت های رویدادی است.

منبع W3Schools · اجرای زنده نمونه

جمع بندی سریع

• ng-template قالب قابل استفاده مجدد است.
• [ngTemplateOutlet] همان قالب را رندر می کند.
• [ngTemplateOutletContext] داده ورودی قالب است.
• با let- مقدارها را دریافت کن.