Angular ngFor directive

Text version of the video

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.

Slides

Angular 2 Tutorial playlist

Angular 2 Text articles and slides

All Dot Net and SQL Server Tutorials in English

All Dot Net and SQL Server Tutorials in Arabic

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.

@Component({
selector: 'list-employee',
})
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' },
];
}

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']
[/tr]
[td colspan="5"]
No employees to display
[/td]
[/tr]
[/tbody]
[/table]

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;
}

@NgModule({
imports: [BrowserModule],
declarations: [AppComponent, EmployeeComponent, EmployeeListComponent],
bootstrap: [AppComponent]
})

export class AppModule { }

@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.

[biswadip]

Incredible. Great tutorials. Thanks a lot sir.

[divya]

angular 2 is very rich. Component fundamental is simply cool as it makes the code more robust and flexible.

[venkatajayaprakashnagabirv]

The UI tutorials are great, Can you also Please create Professional Java tutorials along spring and Hibernate frameworks, It helps us to step into back-end also.

[rathibcom]

Hi,
Nice explanation..There is an possible to add multiple selector in single directive code..

[AravindHarigoppula]

Awesome as always.. I just wonder how are you able to paste data without copying anything onto clipboard? This is not related to angular but I'm curious..

[sahilmahajan]

Hello venkat, I am getting error: unable to get property 'code' of undefined or null reference. Can you help me out here, where I am going wrong?

[swathimuthiyam]

Hi venkat, Can you make a tutorial for file upload. was struggling to find a good blog for upload in ng4.

[studysolutions]

Can we add multiple components directly in index.html file instead of app.component.html file?
if yes then how if no then why we can not do this?

if trying to do this in index.html file, but it did not work.
<list-employee>Loading Employee List</list-employee>
<my-app>Loading AppComponent content here ...</my-app>

[ankushjassal]

Its great. But i have one question can we use (*) sign in ngModel also or its only use in case of ngIf and ngFor?

[G-Code_official]

Hi, I searched for the following error on google but couldn't find it. Can you please help me out.
"Build:Property 'lift' in type 'Subject<T>' is not assignable to the same property in base type 'Observable<T>'"
I get this error everytime I try to build. However, I am able to see the result in browser if I proceed.

[AtulKumar-qujn]

how to create pyramid pattern used by loop in angular 2.please reply

[ajitpedha]

Hi Sir, I am getting this error "Can't bind to 'ngForIn' since it isn't a known property of 'tr'".Can anyone help?

[vijaykumar]

How to Bind Value of Array if have not key For e.g. code, name, gender etc. etc

[Pardeepdeveloper]

how to install angular2 in visual studio 2012