Guide on how to showcase the template by leveraging the roomList information with ngTemplateOutlet in Angular

Question

Guide on how to showcase the template by leveraging the roomList information with ngTemplateOutlet in Angular

TS

roomList = [{
 name: 'Room2'
}]

HTML

<div class="Layout-body">
      <ng-container *ngFor="let dt of roomList; index as i" [ngTemplateOutlet]="Room1" [ngTemplateOutletContext]="{ data: dt, i: i }" >
        </ng-container>
    </div>
    
    <ng-template #Room1 let-data="data" let-i="index">
        {{data}}
      </ng-template>
    <ng-template #Room2 let-data="data" let-i="index">
      {{data}}
    </ng-template>

Is there a way to dynamically display the template based on the value of the roomList object? For example, if the name is 'Room2', then Room2 template will be displayed in the ngTemplateOutlet.

javascript angular typescript

Answer 1

Answer №1

To implement this functionality, make sure to define a TemplateRef and reference it in the HTML using this.

import {
  Component,
  VERSION,
  ViewChild,
  TemplateRef
} from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  roomList = [{
      name: "Room2"
    },
    {
      name: "Room1"
    }
  ];

  @ViewChild("Room1") Room1: TemplateRef <any> ;
  @ViewChild("Room2") Room2: TemplateRef <any> ;
}

<div class="Layout-body">
  <ng-container *ngFor="let dt of roomList; index as i" [ngTemplateOutlet]="this[dt.name]" [ngTemplateOutletContext]="{ data: dt, i: i }">
  </ng-container>
</div>

<ng-template #Room1 let-data="data" let-i="index">
  {{data.name}}
</ng-template>
<ng-template #Room2 let-data="data" let-i="index">
  {{data.name}}
</ng-template>

Check out the DEMO here

Answer 2

To implement this functionality, make sure to define a TemplateRef and reference it in the HTML using this.

import {
  Component,
  VERSION,
  ViewChild,
  TemplateRef
} from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  roomList = [{
      name: "Room2"
    },
    {
      name: "Room1"
    }
  ];

  @ViewChild("Room1") Room1: TemplateRef <any> ;
  @ViewChild("Room2") Room2: TemplateRef <any> ;
}

<div class="Layout-body">
  <ng-container *ngFor="let dt of roomList; index as i" [ngTemplateOutlet]="this[dt.name]" [ngTemplateOutletContext]="{ data: dt, i: i }">
  </ng-container>
</div>

<ng-template #Room1 let-data="data" let-i="index">
  {{data.name}}
</ng-template>
<ng-template #Room2 let-data="data" let-i="index">
  {{data.name}}
</ng-template>

Check out the DEMO here

Answer 3

Answer №2

give this a shot

<div class="Layout-body">
  <ng-container *ngFor="let dt of roomList; index as i" [ngTemplateOutlet]="([RoomA, RoomB])[i]" [ngTemplateOutletContext]="{ data: dt, i: i }" >
    </ng-container>
</div>

<ng-template #RoomA let-data="data" let-i="index">
    {{data | json}}
  </ng-template>
<ng-template #RoomB let-data="data" let-i="index">
  {{data | json}}
</ng-template>

Answer 4

give this a shot

<div class="Layout-body">
  <ng-container *ngFor="let dt of roomList; index as i" [ngTemplateOutlet]="([RoomA, RoomB])[i]" [ngTemplateOutletContext]="{ data: dt, i: i }" >
    </ng-container>
</div>

<ng-template #RoomA let-data="data" let-i="index">
    {{data | json}}
  </ng-template>
<ng-template #RoomB let-data="data" let-i="index">
  {{data | json}}
</ng-template>

Guide on how to showcase the template by leveraging the roomList information with ngTemplateOutlet in Angular

Answer №1

Answer №2

Similar questions

"Alert: Jest has detected that an update to MyComponent in a test was not properly enclosed in an act() function, even though there was no actual update being made. Please

What is the best way to automatically populate additional autocomplete options after selecting certain data, and include new data if it is not already present?

In Typescript, type errors in Object Spread Syntax are not causing any issues

The JavaScript function on the specified /url page is not functioning properly following the execution of history.push(/url) on click

Accessing Next and Previous Elements Dynamically in TypeScript from a Dictionary or Array

Tips on effectively rendering child components conditionally in React

A guide on refreshing the dependencies list within Angular's node modules and package.json files

Having difficulty showing the successful JSON output in either the view or an alert

Tips for sorting through JSON Data to isolate a particular day

What are the reasons to steer clear of setting y.innerHTML equal to x.innerHTML?

Replacing jQuery.ajax from a different directory/domain - problem with using relative URLs

What is the name of the scrolling header effect achieved in the following?

Creating a personalized context menu in Javascript: The ultimate guide to incorporating copy and paste features

React-native horizontal sliding plugin

How to implement a for loop within a Vue.js method

What should be transmitted to the front-end following the successful validation of a token on the server?

Discover the power of AngularJS's ng-route feature for creating a dynamic and seamless one-page HTML template experience

Mastering the art of grouping by a key and generating sub-objects from a plain array of key-value pairs in JavaScript ES5 without relying on third-party libraries

NodeJS Express Application Error: Unable to access /url

What's the best way to insert values into data binding within a Typescript/ Angular mat Table?