{

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


It is a short tutorial about an issue when ngFor and NgIf directives are together used in the 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 are used in a single element it throws an error Can't have multiple template bindings on one element

You can see my previous about Angular button click event example

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 of ngIf and ngFor Directive in the 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 directives and these directives do host and descendent binding. When you apply the same host element, the Angular compiler is 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 a child element

ngIf inside ngfor in Angular with extra DOM element.

In this example, created a separate Div element which is the 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 breaks 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, the ng-container help us to group the local HTML elements which won’t add extra DOM elements and did not break the CSS change.

Solution is

  • to use <ng-container> element as a parent container with ngIf directive.
  • Move ngFor directive element inside the 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 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

In Conclusion, ngSwitch, ngFor is not combined with the ngIf directive in Angular elements. The first solution is to add parent DOM container HTML element with ngIf directive with causes an extra DOM element node The second solution is to use ng-container and don’t add extra DOM elements 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.