Angular ngFor directive скачать в хорошем качестве

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.