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

The value of additionalUserInfo.isNewUser in Firebase is consistently false

Show a particular set of data in the template

PHP code to display "ed elements that do not adjust height"

Dealing with CORS policy challenge

Adding specific props, such as fullWidth, at a certain width, like 'sm', in Material UI React

Using Plotly.js to generate a visually stunning stacked and grouped bar chart

Is it possible to derive a TypeScript interface from a Mongoose schema without including the 'Document' type?

Managing image downloads from a Node.js server: Tips and Best Practices

Top method for changing Enum to Set in TypeScript

"Exploring Angular 9: A guide to retrieving form data with an array of objects [Revised as of July 29th, 2020

Issue with displaying tab icons in Ionic 4

"jQuery Hide-and-Seek: A Fun Way to Manip

Show dynamic outcomes on the site

Oops! Make sure to call google.charts.load before calling google.charts.setOnLoadCallback to avoid this error

The Angular2 Observable fails to be activated by the async pipe

How to Use Framer Motion in Next.js for window.innerWidth Less Than 768

Looking to adjust the background-image size of a table cell (td) upon clicking a specific

What could be causing the error message "Error: Cannot modify headers after they are sent" to appear?

Troubleshooting Database Saving Problem with Vue.js and Ruby on Rails

Experiencing the issue with the $.getJSON function bug