Angular ngFor directive
Text version of the video
http://csharp-video-tutorials.blogspo...
Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.
/ @aarvikitchen5572
Slides
http://csharp-video-tutorials.blogspo...
Angular 2 Tutorial playlist
• Angular 2 tutorial for beginners
Angular 2 Text articles and slides
http://csharp-video-tutorials.blogspo...
All Dot Net and SQL Server Tutorials in English
https://www.youtube.com/user/kudvenka...
All Dot Net and SQL Server Tutorials in Arabic
/ kudvenkatarabic
In this video we will discuss another structural directive - ngFor in Angular.
Let us understand
ngFor structural directive with an example. Consider the following array of Employee objects.
employees : any[]= [
{ code: 'emp101', name: 'Tom', gender: 'Male', annualSalary: 5500, dateOfBirth: '25/6/1988' },
{ code: 'emp102', name: 'Alex', gender: 'Male', annualSalary: 5700.95, dateOfBirth: '9/6/1982' },
{ code: 'emp103', name: 'Mike', gender: 'Male', annualSalary: 5900, dateOfBirth: '12/8/1979' },
{ code: 'emp104', name: 'Mary', gender: 'Female', annualSalary: 6500.826, dateOfBirth: '14/10/1980' },
];
We want to display these employees in a table on a web page.
Step 1 : Add a new TypeScript file to the "employee" folder. Name it employeeList.component.ts. Copy and paste the following code in it.
import { Component } from '@angular/core';
@Component({
selector: 'list-employee',
templateUrl: 'app/employee/employeeList.component.html',
styleUrls: ['app/employee/employeeList.component.css']
})
export class EmployeeListComponent {
employees : any[]= [
{ code: 'emp101', name: 'Tom', gender: 'Male', annualSalary: 5500, dateOfBirth: '25/6/1988' },
{ code: 'emp102', name: 'Alex', gender: 'Male', annualSalary: 5700.95, dateOfBirth: '9/6/1982' },
{ code: 'emp103', name: 'Mike', gender: 'Male', annualSalary: 5900, dateOfBirth: '12/8/1979' },
{ code: 'emp104', name: 'Mary', gender: 'Female', annualSalary: 6500.826, dateOfBirth: '14/10/1980' },
];
}
Step 2 : Add a new HTML page to the "employee" folder. Name it employeeList.component.html. Copy and paste the following code in it.
Please note :
1. ngFor is usually used to display an array of items
2. Since ngFor is a structutal directive it is prefixed with *
3. *ngFor='let employee of employees' - In this example 'employee' is called template input variable, which can be accessed by the 4. [tr] element and any of it's child elements.
5. ngIf structural directive displays the row "No employees to display" when employees property does not exist or when there are ZERO employees in the array.
[table]
[thead]
[tr]
[th]Code[/th]
[th]Name[/th]
[th]Gender[/th]
[th]Annual Salary[/th]
[th]Date of Birth[/th]
[/tr]
[/thead]
[tbody]
[tr *ngFor='let employee of employees']
[td]{{employee.code}}[/td]
[td]{{employee.name}}[/td]
[td]{{employee.gender}}[/td]
[td]{{employee.annualSalary}}[/td]
[td]{{employee.dateOfBirth}}[/td]
[/tr]
[tr *ngIf="!employees || employees.length==0"]
[td colspan="5"]
No employees to display
[/td]
[/tr]
[/tbody]
[/table]
Step 3 : Add a new StyleSheet to the "employee" folder. Name it employeeList.component.css. Copy and paste the following code in it.
table {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: large;
border-collapse: collapse;
}
td {
border: 1px solid #369;
padding:5px;
}
th{
border: 1px solid #369;
padding:5px;
}
Step 4 : In the root module, i.e app.module.ts, import employeeList component and add it to the declarations array as shown below.
import { EmployeeListComponent } from './employee/employeeList.component';
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent, EmployeeComponent, EmployeeListComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
Step 5 : In the root component, i.e app.component.ts use employeeList component as a directive
@Component({
selector: 'my-app',
template: `[list-employee][/list-employee]
`
})
At this point, run the application and notice the employees are displayed in the table as expected.
In questa pagina del sito puoi guardare il video online Angular ngFor directive della durata di ore minuti seconda in buona qualità , che l'utente ha caricato kudvenkat 12 luglio 2017, condividi il link con amici e conoscenti, su youtube questo video è già stato visto 148,823 volte e gli è piaciuto 510 spettatori. Buona visione!
