Tips for transferring information to various templates with ngFor and ngIf in Angular 4

Question

Tips for transferring information to various templates with ngFor and ngIf in Angular 4

I'm working with an object that looks like this

let obj = [{
    templateId: 1,
    name: "Template 1"
}, {
    templateId: 2,
    name: "Template 1"
}, {
    templateId: 3,
    name: "Template 1"
}];

Within my HTML Template, I'm attempting to pass data to different templates based on the templateId as shown below

<div *ngFor="let tmpl of obj">
    <div *ngIf="tmpl.templateId == 1; else templateTwo; context: tmpl">
        {{ tmpl.name }}
    </div>
</div>
<ng-template #templateTwo let-data="data">
    <div *ngIf="data.templateId == 2; else templateThree; context: data">
        {{ data.name }}
    </div>
</ng-template>
<ng-template #templateThree let-data="data">
    <div *ngIf="data.templateId == 3">
        {{ data.name }}
    </div>
</ng-template>

Even though I have structured my HTML template to pass data based on the templateId, I am facing errors in the code. Can you please guide me on what mistake I might be making here?

I would appreciate it if you could provide me with the correct approach.

javascript angular typescript

Answer 1

Answer №1

If you want to pass your context to a specific template without changing your HTML structure, you can use the *ngTemplateOutlet directive on an ng-container element:

<div *ngFor="let tmpl of obj">

   <div *ngIf="tmpl.templateId == 1">
      {{ tmpl.name }}
   </div>

   <ng-container *ngTemplateOutlet="templateTwo; context: tmpl"></ng-container>
   <ng-container *ngTemplateOutlet="templateThree; context: tmpl"></ng-container>

</div>

<ng-template #templateTwo  let-id="templateId" let-name="name">
   <div *ngIf="id == 2">
        {{ name }}
   </div> 
</ng-template>

<ng-template #templateThree  let-id="templateId" let-name="name">
   <div *ngIf="id == 3">
        {{ name }}
   </div> 
</ng-template>

Check out an example code on stackblitz.com for reference.

Another approach is to include your ng-templates directly inside the div with ngFor and utilize the input variable declared in your ngFor statement:

<div *ngFor="let tmpl of obj">

    <div *ngIf="tmpl.templateId == 1; else templateTwo">
        {{ tmpl.name }}
    </div>

    <ng-template #templateTwo >
      <div *ngIf="tmpl.templateId == 2; else templateThree; ">
          {{ tmpl.name }}
      </div>
    </ng-template>

    <ng-template #templateThree >
        <div *ngIf="tmpl.templateId == 3">
            {{ tmpl.name }}
        </div>
    </ng-template>

  </div>

Answer 2

If you want to pass your context to a specific template without changing your HTML structure, you can use the *ngTemplateOutlet directive on an ng-container element:

<div *ngFor="let tmpl of obj">

   <div *ngIf="tmpl.templateId == 1">
      {{ tmpl.name }}
   </div>

   <ng-container *ngTemplateOutlet="templateTwo; context: tmpl"></ng-container>
   <ng-container *ngTemplateOutlet="templateThree; context: tmpl"></ng-container>

</div>

<ng-template #templateTwo  let-id="templateId" let-name="name">
   <div *ngIf="id == 2">
        {{ name }}
   </div> 
</ng-template>

<ng-template #templateThree  let-id="templateId" let-name="name">
   <div *ngIf="id == 3">
        {{ name }}
   </div> 
</ng-template>

Check out an example code on stackblitz.com for reference.

Another approach is to include your ng-templates directly inside the div with ngFor and utilize the input variable declared in your ngFor statement:

<div *ngFor="let tmpl of obj">

    <div *ngIf="tmpl.templateId == 1; else templateTwo">
        {{ tmpl.name }}
    </div>

    <ng-template #templateTwo >
      <div *ngIf="tmpl.templateId == 2; else templateThree; ">
          {{ tmpl.name }}
      </div>
    </ng-template>

    <ng-template #templateThree >
        <div *ngIf="tmpl.templateId == 3">
            {{ tmpl.name }}
        </div>
    </ng-template>

  </div>

Answer 3

Answer №2

Assuming I have correctly understood your query and you prefer not to utilize ng-template, you can implement the following code instead:

<div *ngFor="let template of objects">

    <div *ngIf="template.id === 1">
        ...
    </div>

    <div *ngIf="template.id === 2">
        ...
    </div>

    <div *ngIf="template.id === 3">
        ...
    </div>

  </div>

Answer 4

Assuming I have correctly understood your query and you prefer not to utilize ng-template, you can implement the following code instead:

<div *ngFor="let template of objects">

    <div *ngIf="template.id === 1">
        ...
    </div>

    <div *ngIf="template.id === 2">
        ...
    </div>

    <div *ngIf="template.id === 3">
        ...
    </div>

  </div>

Answer 5

Answer №3

If you happen to come across this in the future, I recommend solving it by utilizing ng-container along with an expression (assigned to *ngTemplateOutlet=) that determines the name of the ng-template to use for the current item in the array being looped through.

<ng-template #templateOne let-tmpl="tmp">
  <div>
    {{ tmpl.name }}
  </div>
</ng-template>

<ng-template #templateTwo let-data="tmp">head>
  <div>
    {{ data.name }}
  </div>
</ng-template>

<ng-template #templateThree let-data="tmp">
  <div>
    {{ data.name }}
  </div>
</ng-template>

<div *ngFor="let tmpl of obj">
  <ng-container *ngTemplateOutlet="tmpl.templateId == 1 ? templateOne :
    tmpl.templateId == 2 ? templateTwo : templateThree; context: {tmp: tmpl}"></ng-container>
</div>

Answer 6

If you happen to come across this in the future, I recommend solving it by utilizing ng-container along with an expression (assigned to *ngTemplateOutlet=) that determines the name of the ng-template to use for the current item in the array being looped through.

<ng-template #templateOne let-tmpl="tmp">
  <div>
    {{ tmpl.name }}
  </div>
</ng-template>

<ng-template #templateTwo let-data="tmp">head>
  <div>
    {{ data.name }}
  </div>
</ng-template>

<ng-template #templateThree let-data="tmp">
  <div>
    {{ data.name }}
  </div>
</ng-template>

<div *ngFor="let tmpl of obj">
  <ng-container *ngTemplateOutlet="tmpl.templateId == 1 ? templateOne :
    tmpl.templateId == 2 ? templateTwo : templateThree; context: {tmp: tmpl}"></ng-container>
</div>

Tips for transferring information to various templates with ngFor and ngIf in Angular 4

Answer №1

Answer №2

Answer №3

Similar questions

What steps can I take to adapt my component in order to incorporate RxJs?

I'm confused as to why I keep receiving alert messages every time I click on a button. Can someone please provide

Issue with Angular 2 Http and RxJS: Undefined property 'unsubscribe' causing errors

Utilizing a single code base for both Web development with Angular 4 and Mobile app development with Ionic 3

Display HTML code within a data attribute

Is the presence of a potential leak suggested by this arrangement in the heap snapshot retainer hierarchy

Exploring the implementation of AES encryption and decryption functionality between Java and JavaScript

Failing to locate module: Issue encountered after updating Angular to version 13 - Error: The package path ./locales is not being exported from

Is it possible to incorporate async await with SetState in React?

IE encountered an invalid character

How can I extract an array of objects from an array of arrays containing objects?

Deactivate particular months within the JqueryUI date picker

Webstorm seems to be having trouble identifying Next.js

Convert Binary Data to PDF Using Javascript Through Streaming

Using the ngFor directive, parent and child components can establish communication even with empty arrays

Dynamically adding a CSS gradient to an element with JQuery

Tips for displaying a combobox popover from @reach/combobox within a MUI dialog element

Screen out words from one string that appear in the other

offsetWidth varies across different browsers

Querying MongoDB using JavaScript function

Tips for transferring information to various templates with *ngFor and *ngIf in Angular 4

Answer №1

Answer №2

Answer №3

Similar questions

What steps can I take to adapt my component in order to incorporate RxJs?

I'm confused as to why I keep receiving alert messages every time I click on a button. Can someone please provide

Issue with Angular 2 Http and RxJS: Undefined property 'unsubscribe' causing errors

Utilizing a single code base for both Web development with Angular 4 and Mobile app development with Ionic 3

Display HTML code within a data attribute

Is the presence of a potential leak suggested by this arrangement in the heap snapshot retainer hierarchy

Exploring the implementation of AES encryption and decryption functionality between Java and JavaScript

Failing to locate module: Issue encountered after updating Angular to version 13 - Error: The package path ./locales is not being exported from

Is it possible to incorporate async await with SetState in React?

IE encountered an invalid character

How can I extract an array of objects from an array of arrays containing objects?

Deactivate particular months within the JqueryUI date picker

Webstorm seems to be having trouble identifying Next.js

Convert Binary Data to PDF Using Javascript Through Streaming

Using the ngFor directive, parent and child components can establish communication even with empty arrays

Dynamically adding a CSS gradient to an element with JQuery

Tips for displaying a combobox popover from @reach/combobox within a MUI dialog element

Screen out words from one string that appear in the other

offsetWidth varies across different browsers

Querying MongoDB using JavaScript function

Tips for transferring information to various templates with ngFor and ngIf in Angular 4