Angular directives

Software IndustrySultan Ahmed Sagor
Angular 7
A framework for Presentation Layer

Angular Data Binding7

Angular Tutorial: Road Covered So Far

What is Directives ?
Now we will discuss angular directives

What is directives?
Angular templates are dynamic. When Angular renders them, it transforms the DOM
according to the instructions given by Directives.
Directives
manipulates

Type of Angular Directives
Now we will see types of Angular directives

Type of Angular Directives

Component Directives
Now we will discuss about component directives

Component Directives

Built-in Structural Directives
Now we will discuss about structural directives

Structural Directives

ng-template structural Directive
❖ content of ng-template tag will not be displayed in browser.
❖ Check the following code in visual code:
❖ Now run the project using the following command:
<h2>Welcome</h2>
<ng-template> to </ng-template>
<h2>Corporate knowledge sharing session</h2>

*ngIf structural Directive
❖ acts according to some given direction. :
❖ When condition is true, the element is added to the DOM.
❖ We can use ng-template tag for else decision.
❖ By using *ngIf directive we can develop complex front-end easily.

*ngIf structural Directive
<button (click)="show = !show">
{{show ? 'hide' : 'show’}}
</button>
show = {{show}}
<br>
<div *ngIf="show; else elseBlock">
Text to show
</div>
<ng-template #elseBlock>
Alternate text while primary text is hidden
</ng-template>
show: boolean = true;

*ngFor structural Directive
❖ The *ngFor directive is used to repeat a portion of HTML template once per each item from an
iterable list (Collection).
❖ To Use ngFor directive, you have to create a block of HTML elements, which can display a single item
of the items collection.
❖ After that you can use the ngFor directive to tell angular to repeat that block of HTML elements for
each item in the list.
<li *ngFor="let item of items;"> .... </li>

class Movie {
title : string;
director : string;
cast : string;
releaseDate : string;
}
title: string ="Top 10 Movies" ;
movies: Movie[] =[
{title:'Zootopia',director:'Byron Howard, Rich Moor
e',cast:'Idris Elba, Ginnifer Goodwin, Jason Bateman',r
eleaseDate:'March 4, 2016'},
{title:'Batman v Superman: Dawn of Justice',direct
or:'Zack Snyder',cast:'Ben Affleck, Henry Cavill, Amy A
dams',releaseDate:'March 25, 2016'},
{title:'Captain America: Civil War',director:'Anthony
Russo, Joe Russo',cast:'Scarlett Johansson, Elizabeth
Olsen, Chris Evans',releaseDate:'May 6, 2016'},
{title:'X-
Men: Apocalypse',director:'Bryan Singer',cast:'Jennifer
Lawrence, Olivia Munn, Oscar Isaac',releaseDate:'May
27, 2016'},
]

<table class='table'>
<thead>
<tr>
<th>Title</th>
<th>Director</th>
<th>Cast</th>
<th>Release Date</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let movie of movies;">
<td>{{movie.title}}</td>
<td>{{movie.director}}</td>
<td>{{movie.cast}}</td>
<td>{{movie.releaseDate}}</td>
</tr>
</tbody>
</table>
<div class='panel panel-primary'>
<div class='panel-heading'>
{{title}}
</div>
<div class='panel-body'>
<div class='table-responsive’>
</div>
</div>
</div>

*ngSwitch structural Directive
❖ In Angular 8, ngSwitch is a structural directive which is used to Add/Remove DOM Element.
❖ It is similar to switch statement of C#. The ngSwitch directive is applied to the container element with
a switch expression.
<container_element [ngSwitch]="switch_expression">
<inner_element *ngSwitchCase="match_expresson_1">...</inner_element>
<inner_element *ngSwitchDefault>...</element>
</container_element>

*ngSwitch structural Directive
class item {
name: string;
val: number;
}
export class AppComponent
{
items: item[] = [{name: 'One', val: 1}, {name: 'T
wo', val: 2}, {name: 'Three', val: 3}];
selectedValue: string= 'One';
}
<select [(ngModel)]="selectedValue">
<option *ngFor="let item of items;" [value]="item.na
me">{{item.name}}</option>
</select>
<div class='row' [ngSwitch]="selectedValue">
<div *ngSwitchCase="'One'">One is Pressed</div>
<div *ngSwitchCase="'Two'">Two is Selected</div>
<div *ngSwitchDefault>Default Option</div>
</div>

Any
question?

Thank You

Angular directives

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Angular directives

Similar to Angular directives (20)

Recently uploaded

Recently uploaded (20)

Angular directives