ng-container | ng Template | ng Content | ng-autoComplete

In Angular, ng-container, ng-template, and ng-content serve different purposes in structuring and rendering templates dynamically.

1. ng-container

ng-container is a logical container that does not get rendered in the DOM but helps to group elements without introducing an extra element like <div>.

Wrapping structural directives (*ngIf, *ngFor) without adding extra HTML.

Grouping elements logically without affecting styling.

Same Ts file all are useing

export class NgDirectivesComponent {

  cityList: string[] = [];

  isActive: boolean = false;

  stateList: string[] = [];

  constructor(){

    setTimeout(()=>{

      this.cityList = ["Mathura","Lucknow","Agra"];

    },9000)

    this.stateList = ["up","Karnatak","Odisha"];

  }

}

<div class="row">

    <div class="col-3">

        <ul>

            @if(cityList.length == 0){

                <ng-container>

                    <p>No Data found Loading the data</p>

                </ng-container>

            }

            @for (item of cityList; track $index) {

                <li>{{item}}</li>

            }

        </ul>

    </div>

</div>

<div class="col-3">

    <select name="" id="" class="form-select">

        <ng-container *ngIf="cityList.length != 0">

            <option *ngFor="let city of cityList">{{city}}</option>

        </ng-container>

     

    </select>

</div>

• The ng-container groups the elements but does not render an extra <div>

2. ng-template

ng-template is a way to define a template that is not rendered by default. It can be used with *ngIf, ngTemplateOutlet, or dynamically created in a component.

• Creating reusable templates.
• Rendering templates conditionally.
• Using it with ngTemplateOutlet

case-1

<div class="col-3">

    <span *ngIf="isActive == true;else deactiveTeam" class="text-success">Student is De-Active</span>

</div>

<ng-template #deactiveTeam>

<span class="text-danger">Student is De-Actives</span> </ng-template>

case-2 => ng-container with ng-template

    <div class="col-4">

        <div *ngFor="let city of cityList">

            <ng-container *ngTemplateOutlet="displayTeam;context:{$implicit:city}"></ng-container>

        </div>

    </div>

</div>

<div *ngFor="let city of stateList">

    <ng-container *ngTemplateOutlet="displayTeam;context:{$implicit:city}"></ng-container>

</div>

<ng-template #displayTeam let-value>

    <p>{{value}}</p>

</ng-template>

3. ng-content

ng-content is used in content projection, allowing you to pass child content into a component.

• Creating flexible and reusable components.
• Allowing parent components to pass content dynamically.
• Projects content from the parent into the child component.
• 
  

Parent component

export class CardComponent {

  @Input() headerText: string = "";

}

<div class="card" style="width: 18rem;">

<div class="card-header">{{headerText}}</div>

<div class="card-body">

    <ng-content></ng-content>

</div>

<div class="card-footer">Footer</div>

  </div>

Child component

<div class="row">

    <div class="col-8">

        <app-card [headerText]="'useList'">

            <div *ngFor="let city of cityList">

                <p>{{city}}</p>

            </div>

        </app-card>

    </div>

</div>c

4. ng-autoComplete

data-end="19" data-start="0"><ng-autocomplete> is a third-party Angular component that provides an advanced autocomplete input box.

• Supports custom data (arrays of objects or strings).
• Allows remote data (fetch from an API).
• Supports multiple selections.
• Highlight matching search text.
• Configurable placeholder, debounce time, and minimum character

<MAT-AUTOCOMPLETE> also doing same type thing  like table pgination when data required as per demand load the data.

Major Diffirence

ng-container Groups elements logically without adding extra DOM elements. ng-template Defines a template that is not rendered until used. ng-content Projects content from the parent to the child component.