In this video we are going to learn about ngFor Directive.
NgFor is a built-in template directive, that makes it easy to iterate over, something like an array or an object and create a template for each item.
So let see how can we use ngFor in angular 10.
So switch to the project and here just open app.component.ts.
Now here lets create an array.
So just write here.

fruits = ['mango','orange','apple',' pineapple','banana ']; 

Now inside this array add some element here.
Now lets get each element of the this array through the ngFor.
So go to the app.component.html here just write.

<ul> 
    <li *ngFor=\"let fruit of fruits\">{{fruit}}</li> 
</ul>

Now lets check it.
You can see the all fruits in list.
Now lets see the ngFor with object array.
So go to the app.component.ts file and here just create an object array.

users =[
    {
        name:'Alice',
        email:'alice@gmail.com',
        phone:'3530000012'
    },
    {
        name:'Andrew',
        email:'andrew@gmail.com',
        phone:'3530000013'
    },
    {
        name:'Mike',
        email:'mike@gmail.com',
        phone:'3530000014'
    },
    {
        name:'Sophie',
        email:'sophie@gmail.com',
        phone:'3530000015'
    },
    {
        name:'Steve',
        email:'steve@gmail.com',
        phone:'3530000016'
    }
];

So just write here Now get each user by ngFor directives.
So go to the app.component.html file and here just add a table.

<table border=\"1\">
    <thead>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Phone</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor=\"let user of users\">
            <td>{{user.name}}</td>
            <td>{{user.email}}</td>
            <td>{{user.phone}}</td>
        </tr>
    </tbody>
</table>

Now lets check it.
So switch to browser and here you can see the all name email and phone.
So in this way you can use the ngFor Directives in angular 10.