How to use ngIf and ngFor together for same html element in Angular


This is an short tutorial about an issue when ngFor and NgIf directives together used in html element

  • Can’t have multiple template bindings on one element. Use only one attribute prefixed with
  • *ngFor and *ngIf on same element producing error
  • ngswitch and ngif together in a single html element

As per Angular documentation, ngif and ngfor directives are not used in a single element For example, If both these directives used in a single element it throws an error Can't have multiple template bindings on one element

Can’t have multiple template bindings on one element error in Angular

In this example, We are going to use same directives in a single element div

<div *ngIf="hide" *ngFor="let employee of employees;">
</div>

Let’s create an angular component

Angular html template component

<h3>Multiple Directives in Same Elements</h3>
<button (click)="showTable()">Display Table!</button>

<div *ngIf="hide" *ngFor="let employee of employees;">
  <span>{{employee.name}}</span>
</div>
import { Component, OnInit } from '@angular/core';
import { Employee } from '../app/employee';

@Component({
  selector: 'app-multiple-directive',
  templateUrl: './multiple-directive.component.html',
  styleUrls: ['./multiple-directive.component.css']
})
export class MultipleDirectiveComponent implements OnInit {
  public hide: boolean = false;
  showTable() {
    this.hide = !this.hide;
  }

  employees: Employee[] = [
    { id: 1, name: 'Ram', salary: 5000 },
    { id: 2, name: 'John', salary: 1000 },
    { id: 3, name: 'Franc', salary: 3000 },
    { id: 4, name: 'Andrew ', salary: 8000 }
  ];
  constructor() {}

  ngOnInit() {}
}

The above component throws an error

Can’t have multiple template bindings on one element. Use only one attribute prefixed with

The reason is Angular does not support structure directives in a single element

Angular does not allow to use ngIf and ngFor Directive in a same element like div or li or td or html or custom element What is the solution

how to use ngif and ngfor together in angular

ngIf, ngFor and ngSwitch are Structural directive and these directive do host and descendent binding. When you apply the same host element, Angular compiler not able to decide which one to consider and precedence.

There are multiple solutions to handle this

  • use parent element with ngIf, parent element can be any DOM element(div etc..) or non DOM elements like ng-container, and then use ngFor with child element

ngIf inside ngfor in Angular with extra DOM element.

In this example, created a separate Div element which is parent element with ngIf directive.

Added ngFor element inside div.

<h3>Multiple Directives in Same Elements</h3>
<button (click)="showTable()">Display Table!</button>

<div *ngIf="hide">
  <div *ngFor="let employee of employees;">
    <span>{{employee.name}}</span>
  </div>
</div>

Output

ngFor inside ngIf in Angular

As you see an extra DOM element is added which adds an extra element and break CSS style changes if you used parent child selector. It adds an extra DOM element for page rendering.

ng-container with ngIf and ngFor together

In this example, ng-container help us to group the local html elements which It won’t add extra DOM element and did not break CSS change.

Solution is

  • to use <ng-container> element as an parent container with ngIf directive.
  • Move ngFor directive element inside ng-container element

Here is an example

<h3>Multiple Directives in Same Elements</h3>
<button (click)="showTable()">Display Table!</button>

<ng-container *ngIf="hide" >
<div *ngFor="let employee of employees;">
  <span>{{employee.name}}</span>
</div>
</ng-container>
ngFor inside ngIf in Angular using ng-container

What is ng-container in Angular

ng-container is a logical container to group an html elements

  • Logical group of DOM elements
  • Does not add an extra element to DOM
  • Multiple ng-container elements can be used
  • Output html will not produce any element

Conclusion

ngSwitch,ngFor are not combined with ngIf directive in Angular elements. First solution is to add parent DOM container html element with ngIf directive which causes an extra DOM element node Second solution is to use ng-container which don’t add extra DOM element and this approach is best to use

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.