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.
Auf dieser Seite können Sie das Online-Video Angular ngFor directive mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer kudvenkat 12 Juli 2017 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 148,823 Mal angesehen und es wurde von 510 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!
