Part 11 ngFor directive in angular 2

With ngFor we can print this data to the screen under the form of a data table, by generating HTML similar to this:

<table>

<thead>

<th>Name</th>

</thead>

<tbody>

<tr>

<td>Superman</td>

</tr>

<tr>

<td>Batman</td>

</tr>

...

</tbody>

</table>

export class AppComponent {

title: string ="student Information";

students : any[]=[

{id: 'sid101',name: 'Rahul', lastname:'Jograna', gender:'Male',scholarship:10000,dob:'07/15/1997'},

{id: 'sid102',name: 'John', lastname:'carter', gender:'Male',scholarship:15000,dob:'07/15/1997'},

{id: 'sid103',name: 'Mark', lastname:'hamster', gender:'Male',scholarship:20000,dob:'07/15/1997'},

{id: 'sid104',name: 'Amit', lastname:'Jadeja', gender:'Male',scholarship:3000,dob:'07/15/1997'},

{id: 'sid106',name: 'merry', lastname:'johnson', gender:'female',scholarship:40000,dob:'07/15/1997'},

{id: 'sid106',name: 'merry', lastname:'johnson', gender:'female',scholarship:40000,dob:'07/15/1997'},

];

}

<!--The content below is only a placeholder and can be replaced.-->

<div style="text-align:center">

<h1>

Welcome to {{title}}!

</h1>

</div>

<div>

<table>

<tr>

<td>ID</td>

<td>First Name</td>

<td>Last Name</td>

<td>Gender</td>

<td>SS</td>

<td>DOB</td>

</tr>

<tr *ngFor="let student of students">

<td> {{student.id}} </td>

<td> {{student.name | uppercase}} </td>

<td> {{student.lastname | uppercase}} </td>

<td> {{student.gender | lowercase}} </td>

<td> {{student.scholarship | currency : 'USD':true}}</td>

<td> {{student.dob | date :'fullDate'}} </td>

</tr>

</table>

</div>