NgFor Directive - Angular(Tutorial #9)
In this video we will learn about NgFor Directive in Angular applications
Use this link to share this video: • NgFor Directive - Angular(Tutorial #9)
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: / angularjs4beginners
LinkedIn: / nisha-singla-82407aa0
Website :
На этой странице сайта вы можете посмотреть видео онлайн NgFor Directive - Angular(Tutorial #9) длительностью часов минут секунд в хорошем качестве, которое загрузил пользователь Nisha Singla 18 Май 2018, поделитесь ссылкой с друзьями и знакомыми, на youtube это видео уже посмотрели 19,587 раз и оно понравилось 322 зрителям. Приятного просмотра!
