ng-container in angular | ng-container in angular
Introduction:
In this article we mostly learn about ng-container in angular 18 new updates, Actually, ng-container is directive of provide an imaginary view.
ng-container in angular 18 allows us to create an imaginary division in a template without introducing a new HTML view.
In ng-container does not render in the html DOM, but actual data inside is rendered.
what is ng-container?
We can implement only one structural directive on a single element but if you want to use more than one structural directive then we have to use <ng-container> as in the next line. ng-container in angular is essential for applying structural directives to multiple elements.
For example, you can use it with *ngIf to conditionally render multiple elements based on a condition.
# ng-container.component.html
In this example, we see that <ng-container> tag is used for imaginary view,
for example, wee see that first check condition its true then text message will show in the output.
<ng-container>
<div class="col-4 m-5">
<div class="bg-primary p-3" *ngIf="isContainer">
<p>ngcomponent works!</p>
</div>
</div>
</ng-container>
Content Projection: When we used ng-container itself doesn't support content projection, it can be used in conjunction with other components that do, providing more flexibility.
# ng-container.component.ts
isContainer:boolean=true;
output: ngcomponent works!
Example:2
ng-container in angular19 example
# ng-container.component.html
In this example, we see that in button click API throw we can fetch value and display output in the table.
In this example ng-container tag first checks condition it's true or false, true then the spinner can execute and
its false then second ng-container tag can execute by using api fetch value and display in output.
div class="container">
<div class="row">
<table class="table table-border">
<thead>
<tr>
<th>SrNo</th>
<th>Name</th>
<th>UserName</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<ng-container *ngIf="restAPI">
<div class="spinner-grow text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</ng-container>
<ng-container *ngIf="!restAPI">
<tr *ngFor="let student of studList"> //ng-container ngfor example
<td>{{student.id}}</td>
<td>{{student.name}}</td>
<td>{{student.username}}</td>
<td>{{student.email}}</td>
</tr>
</ng-container>
</tbody>
</table>
<div class="col-4">
<button class="btn btn-success" (click)="getUsers()">GetUsers</button>
</div>
</div>
</div>
restApi --> https://jsonplaceholder.typicode.com/users
# ng-container.component.ts
restAPI:boolean=false;
studList:any []=[];
http=inject(HttpClient);
getUsers(){
this.restAPI=true;
this.http.get("https://jsonplaceholder.typicode.com/users").subscribe((res:any)=>{
this.studList=res;
this.restAPI=false;
})
}
what is ng-template and ng-container in angular
OR
Differences : ng-container vs ng-template | ng-template vs ng-container
Feature <ng-container> <ng-template>
DOM Element No Yes (placeholder)
Content Projection No Yes
Reusability Not directly reusable Can be reused with
*ngTemplateOutlet
Structural Directives Can be used with Can be used with
Conclusion:
In this article we learn about new features in ng-container in angular 18 tag with brief examples, we see how ng-container directive are used and the actual working flow process.
The ng-container in angular is a valuable directive in Angular for creating more efficient templates you can use its benefit your Angular applications.
FAQ :
1.What is the difference between ng container and ng template outlet?
Ans- the ng-template outlet is a directive that renders a template defined in an ng-template element. It's used for dynamically inserting templates into the DOM based on conditions or data.
2.What is the difference between ng container and div?
Ans-
>ng-container: A logical container that groups elements without adding an extra element to the DOM. It's primarily used for conditional rendering, iteration, or applying structural directives.
>div: A standard HTML element that represents a division or section of a document. It's used for structural purposes and can be styled using CSS.
3.What is the ng component in Angular?
Ans- ng component in Angular is a reusable piece of code that encapsulates a view (HTML template) and the logic (TypeScript class) to manage that view. It's a fundamental building block of Angular applications, allowing you to create modular and maintainable components that can be reused across different parts of your app.
Read More.