Templates
- At the core of Angular lies its templating system, a robust mechanism for crafting dynamic views.
- Angular templates are the backbone of this system, providing a seamless bridge between the application logic and what users perceive.
Example:
Step 1: Create an Angular project using Angular CLI.
ng new Angular
Step 2: Create a new component named ‘list’
ng g c list
Step 3: Now use the ng-template in the ‘list.component.html’.
<h2>List Component</h2>
<ul>
<ng-container *ngFor="let item of items">
<!-- Use ng-template for the list item -->
<ng-template [ngIf]="item.isVisible" [ngIfElse]="hiddenTemplate">
<li>{{ item.name }}</li>
</ng-template>
</ng-container>
</ul>
<!-- Define the ng-template for hidden items -->
<ng-template #hiddenTemplate>
<li style="color: gray;">This item is hidden</li>
</ng-template>
Step 4: Edit the 'list.component.ts' to define the item list.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-list',
templateUrl: './list.component.html',
styleUrls: ['./list.component.css']
})
export class ListComponent {
items = [
{ name: 'Sugar', isVisible: true },
{ name: 'Flour', isVisible: false },
{ name: 'Oil', isVisible: false },
{ name: 'Spices', isVisible: true }
]
}
}
Step 5: Add the ‘<app-list></app-list>’ to the ‘app.component.html’ to include the ‘List-Component’ in the main application.
<h1>Angular Template Example</h1>
<app-list></app-list>
Step 6: Now run or compile the application.
ng serve
You will see the result on http://localhost:4200