students.

Example
Step
Following
Demo
"ngFor="let
<h Or
list.
Directive
Ihis
4.18.1.2
ngfor
Now
step Stacky
Open 1: 4:
The
ent.ts Go ngFor type a
Is + A A
click Exccute nWob
theWelcome
user!! Click
Hideto
the
to
Cxample item Good-bye!! show
Click to Develtheopment
is of Click
folder of
prefixed evoba
iterms;">...</li>
structural
to
illustrates code
location by
Hide'
localhost:4200 )
file
dircctive
*. localhost:4200 button using
and The
in how DirectiveDemo A ng
cdit which syntax that serve 55-4
DirectiveDemo
is lo
as the use shows -0
IS
follows
application *ngl'or the
- template
lor directive
ngFor lor
lor cach
Expross
Angular
and
is
displaying
to item
be in
ereated. the X

the collection
list
of
 FullStack Web Development 4 - 56 Express and Angular
app.component.ts
import { Component) from'@angular/coro;
@Component({
selector: 'app-root,
templateUrl: /app.component.html,
styleUrls: [Vapp.component.css]
export class AppComponent (
students =|
{roll no:2,name:'Archana'},
{roll no:4,name:'Chinmaya },
{roll no:6,name:'Soumya'},
{roll no:8,name:Swati)

Step 2 : Now open the html file and edit the code as follows -
app.component.html
<h1> List of Students </h1>
<table border=5>
<th>Roll No</th>
<th> Name </th>
<tr *ngFor="let student of students;">
<td>{{student.roll no}}</td>
<td>{{student.name}}</td>
</tr>
</table>
Step 3 : Run the above application at the command prompt by issuing the command
ng serve -o. The web browser will get opened up and the output will be displayed as
follows -

DirectiveDemo X

) localhost:4200

A
List of Students
+ Roll No Name
Archana
Chinmaya
Soumya
8 Swati

TECHNICAL PUBLICA TIONS-an up-thrust for knowledge

 Express and Angular
4.18.1.3 ngSwitch Directive
The ngSwitch| directive on acontainer
specifies an expression to match against.
The expressions for matching are provided by
ngSwitchCase directives on views within
the container. The ngSwitchCase is preceded by
asterisk or *.
Every view that matches is displayed.
If there are no matches, a view with the ngSwitch Default directive is rendered.
Demo example
Let us see the example that explains the use of ngSwitch directive.
Step 1: Go to the folder location in which the application for ngSwitch is to be created.
Step 2: Open app.component.ts file and edit is as follows -
app.component.ts
import{Component } from @angular/core':

@Component({
selector: 'app-root,
templateUrl: ./app.component.html,
styleUrls: [/app.component.css']
})
export class AppComponent{
counter=3;
}
html file and edit the code as follows -
Step 3 : Now open the
app.component.html
</h3>
<h3> ngSwitch Demo
<div [ngSwitch]='counter">
selected</div>
*ngSwitchCase="1"> 1 is selected</div>
<div
*ngSwitchCase="2"> 2 is
<div </div>
*ngSwitchCase="3"> 3 is selected
<div *ngSwitchCase="4"> 4is selected</div>
<div *ngSwitchDefault>Default value</div>
<div
</div>
 Stey 4 alyne ayhton at the voand pnpt by tssing the
ng we lhenrh bou will et opened up and the nitpnt will he COmmant
displayet
DrectiveDemo

wlocalhost 1200

ngswitch Demo
3 is selected

Now if we set counter =99 in the app.component.ts file then the output will be

A DirectiveDemo X

localhost:4200

ngSwitch Demo
A
Default value
+

4.18.2 Attribute Directives

Attribute directives listen to andmodity the behavior of other HTML elements, attributes
properties and components.
 IVeS ITC as c heir Own
Directive loloVs: atribute directives. The most
ngModel The ngModel directive binds the Deseription
value
changes the data model, Thus we cthanges in the attached form
in
element with
bindings for readiny and writing inputCan use ngMode to create two-way data
ngForm The ngorm directive ereates atop levelcontrol values.
uypreyated fornFormiroup
orm clement to track instance and hinds it to a
valuc and validation status,
importlormsModule, this
There is no need to add a dircctive hecomes activc by default on all
AS SOOn aS w
form tags.
special selector.
ngStyle This directive updates thc style of an
WTML clement.
Demo example

step 1: Create a new application by creating a folder using following

ng new form-demo command

Step 2 : When we want to use the template form, the first thing which we need
import FormModule. Open app.module.ts file and import FormModule as follows -
app.module.ts
import NgModule } from '@angular/core';
import {BrowserModule } from @angular/platform-browser;

'./app-routing.module';
import {AppRoutingModule } from
./app.component!;
import {AppComponent } from
'@angular/forms';
import { FormsModule } from
@NgModule({
declarations: [
AppComponent
),
imports:[
BrowserModule,
FormsModule,
AppRoutingModule

providers: |],
bootstrap: (AppComponent|

}) {}