ts

people: any[] = [
{
"name": "Douglas Pace",
"age": 35,
"country": 'MARS'
},
{
"name": "Mcleod Mueller",
"age": 32,
"country": 'USA'
},
{
"name": "Day Meyers",
"age": 21,
"country": 'HK'
},
{
"name": "Aguirre Ellis",
"age": 34,
"country": 'UK'
},
{
"name": "Cook Tyson",
"age": 32,
"country": 'USA'
}
];
NgFor

<h4> NgFor</h4>
<ul *ngFor="let person of people">
<li> {{ person.name }} ({{ person.age }}) </li>
</ul>

<ul> (1)
<li *ngFor="let person of people; let i = index">
{{ i + 1 }} - {{ person.name }} ({{ person.age }})
</li>
</ul>

html file
<h4>NgFor (grouped)</h4>
<ul *ngFor="let group of peopleByCountry">
<li>{{ group.country }}</li>
<ul>
<li *ngFor="let person of group.people">
{{ person.name }}
</li>
</ul>
</ul>
ts file
peopleByCountry: any[] = [
{
'country': 'UK',
'people': [
{
"name": "Douglas Pace"
},
{
"name": "Mcleod Mueller"
},
]
},
{
'country': 'US',
'people': [
{
"name": "Day Meyers"
},
{
"name": "Aguirre Ellis"
},
{
"name": "Cook Tyson"
}
]
}
];

<hr>

NgIf
<h4>NgIf</h4>
<ul *ngFor="let person of people">
<li *ngIf="person.age < 30">
{{ person.name }} ({{ person.age }})
</li>
</ul>

<hr>
<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>

Ng Style
ts file
getColor(country) {
switch (country) {
case 'UK':
return 'green';
case 'USA':
return 'blue';
case 'HK':
return 'red';
}
}

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

html file
<div [ngStyle]="{'background-color':'lightblue'}">

<h4>NgStyle</h4>
<ul *ngFor="let person of people">
<li [ngStyle]="{'color':getColor(person.country)}"> {{ person.name }} ({{ person.country }}) (1)
</li>
</ul>

<hr>
<ul *ngFor="let person of people">
<li [style.color]="getColor(person.country)">{{ person.name }} ({{ person.country }})
</li>
</ul>

<hr>
<ul *ngFor="let person of people">
<li [ngStyle]="{'font-size.px':24}"
[style.color]="getColor(person.country)">{{ person.name }} ({{ person.country }})
</li>
</ul>

<hr>
<ul [ngStyle]="{'font-size.px':24}" *ngFor="let person of people">
<li [ngStyle]="{'color':getColor(person.country)}"> {{ person.name }} ({{ person.country }})
</li>
</ul>

<div [ngStyle]="{'border':'5px solid blue'}"> sem - 3 BCA </div>

<hr>
<ul *ngFor="let person of people">
<li [ngStyle]="{'font-size':'24px','color':getColor(person.country),'border':'5px
solid blue','background-color':'yellow'}">{{ person.name }} ({{ person.country
}})
</li>
</ul>

NgClass

<h4>NgClass</h4>
<ul *ngFor="let person of people">
<li [ngClass]="{
'a':person.country === 'UK',
'b':person.country === 'USA',
'c':person.country === 'HK'
}">{{ person.name }} ({{ person.country }})
</li>
</ul>

<hr>
<ul *ngFor="let person of people">
<li [class.a]="person.country === 'UK'"
[class.b]="person.country === 'USA'"
[class.c]="person.country === 'HK'">{{ person.name }} ({{ person.country }})
</li>
</ul>