*ngFor is adding parent div to each iterated element

Question

I am facing an issue with *ngFor. it'll adding parent div element for each iterated element

body.component.html

<ul class="nav nav-pills">
    <li class="nav-item">
        <a class="nav-link" href="#" [class.active]="tab=='Home'" (click)="changeTab('Home')">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#" [class.active]="tab=='Products'" (click)="changeTab('Products')">Products</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#" [class.active]="tab=='Login'" (click)="changeTab('Login')">Login</a>
    </li>
</ul>

<div [ngSwitch]="tab">
    <div *ngSwitchCase="'Home'">Home</div>
    <div *ngSwitchCase="'Products'" class="row">
            <div *ngFor="let product of getProducts()">
                <div class="card">
                    <div class="card-body">
                        <div class="card-title">{{ product.Name }}</div>
                        <div class="card-text">
                            <p>
                                {{ product.Description }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
    </div>
    <div *ngSwitchCase="'Login'">Login</div>
</div>

body.component.ts

import { Component, OnInit, SimpleChanges, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-body',
  templateUrl: './body.component.html',
  styleUrls: ['./body.component.css'],
})
export class BodyComponent implements OnInit {
  tab='Home';
  Products=[]; //Products Array
  constructor() { 

  }
  ngOnInit() {
  }
  changeTab(tab){
    this.tab=tab;
  }
  getProducts(){
    return this.Products;
  }

}

browser render screenshot

How can I prevent it?

score 4 · Answer 1 · edited Jun 20 '20 at 09:12

You can use <ng-container> instead of <div>

<ng-container> to the rescue.

The Angular is a grouping element that doesn't interfere with styles or layout because Angular doesn't put it in the DOM."

https://angular.io/guide/structural-directives#ng-container-to-the-rescue

<ng-container *ngFor="let product of getProducts()">
  <div class="card">
    <div class="card-body">
      <div class="card-title">{{ product.Name }}</div>
      <div class="card-text">
        <p>{{ product.Description }}</p>
      </div>
    </div>
  </div>
</ng-container>

https://alligator.io/angular/ng-container-element/

score 1 · Answer 2 · answered Nov 02 '19 at 15:34

For this problem, you can use <ng-container>.

<ng-container *ngFor="let product of getProducts()">
    <div class="card">
        <div class="card-body">
            <div class="card-title">{{ product.Name }}</div>
            <div class="card-text">
                <p>
                    {{ product.Description }}
                </p>
            </div>
        </div>
    </div>
</ng-container>

Other great articles about ng-container and its friends:

https://www.freecodecamp.org/news/everything-you-need-to-know-about-ng-template-ng-content-ng-container-and-ngtemplateoutlet-4b7b51223691/

https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet/

<ng-container> vs <template>

*ngFor is adding parent div to each iterated element

2 Answers2