Scribd
Upload
15 views5 pages

Structural Directives and Event Binding

There are three main structural directives in Angular: NgFor, NgIf, and NgSwitch. NgFor is used to iterate over collections of data. NgIf conditionally includes or removes template code from the DOM based on an expression. NgSwitch displays elements matching switch cases and provides a default.

Uploaded by

yashutank46
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
15 views5 pages

Structural Directives and Event Binding

There are three main structural directives in Angular: NgFor, NgIf, and NgSwitch. NgFor is used to iterate over collections of data. NgIf conditionally includes or removes template code from the DOM based on an expression. NgSwitch displays elements matching switch cases and provides a default.

Uploaded by

yashutank46
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Structural Directives

• used for manipulating DOM


• can either add , remove or modify existing elements.
• Exampe are : ngIf, ngSwitch, ngFor etc.
• We can apply only one Structural Directive to an element at aa time.
• Can mprove performance of the application.

There are three types of structural directives:

*NgFor

• NgFor is a directive that iterates over collection of data.


• It is used to customize data display.
• NgFor provides local variables that will help to get index of current iteration, detect if
element in iteration is first or last and odd or even.
• NgFor is used with HTML element as well as component element.

Example : 1
Typescript

people: any[] = [
{
"name": "Douglas Pace"
},
{
"name": "Mcleod Mueller"
},
{
"name": "Day Meyers"
},
{
"name": "Aguirre Ellis"
},
{
"name": "Cook Tyson"
}
];

HTML

<li *ngFor = “let person of people”>{{person.name}}</li>

Example 2 :

Typescript
people: any[] = [
{
"name": "Anil Singh",
"age": 29,
"country": 'IN'
},
{
"name": "Alok Singh",
"age": 33,
"country": 'USA'
},
{
"name": "Raju",
"age": 28,
"country": 'UK'
},
{
"name": "Dilip Singh",
"age": 34,
"country": 'NP'
},
{
"name": "Param Trip",
"age": 32,
"country": 'USA'
}
]

HTML

<ul>
<li *ngFor="let element of people">{{element.name}},
{{element.age}}</li>
</ul>

*NgIf

• A structural directive that conditionally includes a template based on the value of an


expression coerced to Boolean.
• When the expression evaluates to true, Angular renders the template provided in a
then clause, and when false or null, Angular renders the template provided in an
optional else clause. The default template for the else clause is blank.
• The Angular *NgIf directive is used when we wants to remove/display an elements
from the DOM based on our condition.

• If your condition is false [*ngIf='false'] the element the directive is attached to will
be removed from DOM.

Syntax:

<div *ngIf="condition; then thenBlock else elseBlock"></div>


<ng-template #thenBlock>Content to render when condition is true.</ng-template>
<ng-template #elseBlock>Content to render when condition is false.</ng-template>

Example1

HTML
<div *ngIf="myArr; then tmpl1 else tmpl2"></div>
<ng-template #tmpl1>I'm here</ng-template>
<ng-template #tmpl2>I'm not here</ng-template

ts
myArr = ['him','hers','yours','theirs'];

*ngSwitch

• NgSwitch uses ngSwitchCase keyword to define a set of possible element trees and
• ngSwitchDefault is used to define default value when expression condition does not match
to any element tree defined by ngSwitchCase .

TYPE SCRIPT
inpvalue: number = 2;

HTML

<h4>NgSwitch</h4>
<ul *ngFor="let person of people" [ngSwitch]="person.country">
<li *ngSwitchCase="'UK'" class="a"> {{ person.name }} ({{ person.country }})
</li>
<li *ngSwitchCase="'USA'" class="b"> {{ person.name }} ({{ person.country }})
</li>
<li *ngSwitchCase="'HK'" class="c"> {{ person.name }} ({{ person.country }})
</li>
<li *ngSwitchDefault class="d"> {{ person.name }} ({{ person.country }})
</li>
</ul>
Event Binding

• Event binding allows you to define events that occur in the template (user-
initiated), and communicate to the component class.

• Event Binding will help to build interactive web applications with the flow of data
from component to the element and from element to component - both ends.

• Event binding syntax will have a target event name within parentheses on the left of
an equal sign, and a quoted template statement on the right.
Syntax: (event)

• The $event is a DOM element object with different properties like target and
target.value.

Example 1 :
// THIS DEMO DEMO SHOW THE FILL OF COMBO BOX USING NGFOR AND BUTTON
CLICK EVEN

HTML

<div> Months :
<select>
<option *ngFor = "let i of months">{{i}}</option>
</select>
</div>
<br/>

<button (click)="myClickFunction($event)">
Click Me
</button>

TYPE SCRIPT

months = ["January", "Feburary", "March", "April",


"May", "June", "July", "August", "September",
"October", "November", "December"];

isavailable = true;

myClickFunction(event) {
//just added console.log which will display the event details in browser on click of the button.
alert("Button is clicked");
console.log(event);
}

Example 2 :
// THE ABOVE EVENT CALL ON THE DROP DWON CLICK ALSO

HTML

<div> Months :
<select (change) = "changemonths($event)">
<option *ngFor = "let i of months">{{i}}</option>
</select>
</div>

changemonths(event) {
console.log("Changed month from the Dropdown");
console.log(event);
}

Example 3:

HTML

<div> Months :
<select (change) = "changemonths($event.target.value)">
<option *ngFor = "let i of months" value={{i}}>{{i}}</option>
</select>
</div>
<br/>
<button (click)="myClickFunction($event)">
Click Me
</button>

TYPE SCRIPT

changemonths(eve:any) {
alert(eve);

You might also like