NgFor Directive - Angular(Tutorial #9)

In this video we will learn about NgFor Directive in Angular applications Use this link to share this video: https://youtu.be/KCa7jfeJZM8 What is Structural Directive ? Structural directives allows us to add or remove elements from the DOM as per the expression provided. What is NgFor Directive ? NgFor is a structural directive that is used to iterate over the collection like array or objects. You can think of NgForm is like a for loop we have used in most of programming language. But the difference is for loop can be used only with arrays but NgFor directive can be used with arrays as well as with objects. Example 1: first we will see how to use ngFor directive to display data in list format suppose we have variable with name user that will be of type string array app.component.ts users:string[] = ["john","Peter","omed"] Example 2: suppose we have list of users in array of object format then we can use ngFor to display data in table format users:any[] = [ {id:101,name:'john',city:'Delhi'}, {id:102,name:'peter,city:'pune'}, {id:103,name:'omed,city:'Delhi'}, ] Example 3: Index Sometimes we also want to get the index of the item in the array we are iterating over . We can do this by adding another variable to our NgFor expression and making it equal to index ngFor ="let user of user; let i = index" here this i will hold the index position of each element and index with start from index 0 If you liked my channel , subscribe to it and like my videos. For any queries ask you question in comment section you can also connect with me @ Facebook: https://www.facebook.com/AngularJS4Beginners LinkedIn: https://www.linkedin.com/in/nisha-singla-82407aa0/ Website : http://nishasingla.com/