Implementing Dynamic Templates with ngTemplateOutlet

Introduction:

In Angular, the ngTemplateOutlet directive provides a powerful way to implement dynamic templates. It allows you to define templates inline and dynamically render them based on different conditions or data. This flexibility enables you to create reusable components with varying UIs and behaviors. In this blog, we’ll explore how to implement dynamic templates using ngTemplateOutlet and provide detailed examples to demonstrate its usage.

If you want to learn about the NGRX, state management angular, you can refer here.

Understanding ngTemplateOutlet:

The ngTemplateOutlet directive is a structural directive in Angular that allows you to render a template dynamically by referencing it from a TemplateRef. It provides a way to conditionally switch between different templates or render templates based on data. By utilizing ngTemplateOutlet, you can create versatile components that adapt their appearance and behavior based on specific requirements.

Syntax of ngTemplateOutlet:

The ngTemplateOutlet directive can be used in the following format:

<ng-container *ngTemplateOutlet="templateRefExpression; context: contextObject"></ng-container>

The templateRefExpression refers to the TemplateRef that contains the template to render dynamically. The contextObject is an optional parameter that allows you to pass data to the template.

Example 1: Dynamic Component Styling:

Let’s create a dynamic component that changes its styling based on a boolean input. We’ll define two templates, one for each style, and use ngTemplateOutlet to toggle between them.

Typescript file:

@Component({
  selector: 'app-styled-component',
  template: `
    <ng-container *ngTemplateOutlet="currentStyleTemplate; context: { $implicit: isStyled }"></ng-container>
  `
})
export class StyledComponent {
  @Input() isStyled: boolean;
  
  @ViewChild('plainStyleTemplate') plainStyleTemplate!: TemplateRef<any>;
  @ViewChild('styledTemplate') styledTemplate!: TemplateRef<any>;
  
  get currentStyleTemplate(): TemplateRef<any> {
    return this.isStyled ? this.styledTemplate : this.plainStyleTemplate;
  }
}

HTML file:

<!-- Usage -->
<app-styled-component [isStyled]="true"></app-styled-component>

<!-- Template Definitions -->
<ng-template #plainStyleTemplate>
  <div class="plain-style">Plain Style</div>
</ng-template>

<ng-template #styledTemplate>
  <div class="styled">Styled</div>
</ng-template>

In this example, we have a component called StyledComponent that accepts a boolean input called isStyled. Depending on the value of isStyled, we render either the plainStyleTemplate or the styledTemplate using ngTemplateOutlet. This allows us to dynamically switch between two different styles for the component.

Example 2: Dynamic List Rendering:

Let’s create a dynamic list component that renders a list of items using different templates based on their types. We’ll define multiple templates and use ngTemplateOutlet to select the appropriate template for each item.

Typescript file:

@Component({
  selector: 'app-dynamic-list',
  template: `
    <ul>
      <li *ngFor="let item of items">
        <ng-container [ngTemplateOutlet]="getTemplate(item)" [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
      </li>
    </ul>
  `
})
export class DynamicListComponent {
  @Input() items: any[];
  
  @ViewChild('textTemplate') textTemplate!: TemplateRef<any>;
  @ViewChild('imageTemplate') imageTemplate!: TemplateRef<any>;
  
  getTemplate(item: any): TemplateRef<any> {
    if (typeof item === 'string') {
      return this.textTemplate;
    } else if (typeof item === 'object' && item.type === 'image') {
      return this.imageTemplate;
    }
    // Add more conditions for different item types
  }
}

HTML file:

<!-- Usage -->
<app-dynamic-list [items]="listItems"></app-dynamic-list>

<!-- Template Definitions -->
<ng-template #textTemplate let-item>
  <span>{{ item }}</span>
</ng-template>

<ng-template #imageTemplate let-item>
  <img [src]="item.url" [alt]="item.alt" />
</ng-template>

In this example, we have a component called DynamicListComponent that receives an array of items as an input. We define two templates: textTemplate and imageTemplate. By using ngTemplateOutlet and the getTemplate() method, we dynamically select the appropriate template for each item in the list based on its type.

Conclusion:

The ngTemplateOutlet directive in Angular provides a powerful way to implement dynamic templates. By leveraging ngTemplateOutlet, you can create components that adapt their appearance and behavior based on conditions or data. In this blog, we explored the syntax of ngTemplateOutlet and provided detailed examples of its usage in dynamic component styling and dynamic list rendering. Incorporate this technique into your Angular applications to enhance their flexibility and reusability. Happy coding!

Finally, for more such posts, please follow our LinkedIn page- FrontEnd Competency.