How to use for loop in angular 6
How to use for loop in angular 6
Easy way to use for loop in angular 6. The NgFor directive instantiates a template once per item from an iterable.
1) Simple array to use for loop in angular 6.
app.component.ts
export class AppComponent implements OnInit {
users = ["Test1", "Test2", "Test3", "Test4"];
}
app.component.html
<ul>
<li *ngFor="let user of users">
<h1>{{user}}</h1>
</li>
</ul>
view
1) Object to use for loop in angular 6.
app.component.ts
export class AppComponent implements OnInit {
users = [
{name: "David Gupta", age: "20"},
{name: "Sara Taylor", age: "20"}
];
}
app.component.html
<table>
<tr *ngFor="let user of users">
<td><b>Name:</b> {{user.name}}</td>
<td><b>Age:</b> {{user.age}}</td>
</tr>
</table>
view
Follow On Social Media -
Follow on instagram - https://www.instagram.com/frontendissue/
Follow on Twitter - https://twitter.com/IssueEnd
Follow on Linkedin - https://www.linkedin.com/in/hitesh-patidar-34253a10a/
Follow on GooglePlus - https://plus.google.com/118238268171156252992
Follow on pinterest - https://in.pinterest.com/frontendissue/
Comments
Post a Comment