How to display list of data in Angular component template


Angularjs is a front end library for create beautiful interactive web application using Nodejs ( JavaScript). If you are familiar with Reactjs , may catch it faster.

List of data

As in other languages a list of data can be stored using a list/array in Angular. So how do we display it in HTML ? Like we do in other JS framework Angular also do, but using ngfor.

In our example we had a list of data as follows

 this.list= ['DELL', 'HP', 'LENOVO', 'ACER'];

In the HTML template we can render it using *ngFor

<p *ngFor= "let brand of list">
    <button>{{brand}}</button>
</p>

Keep reading Angular posts

Published by

Manoj

A developer,teacher and a blogger obsessed with Python,Dart and open source world from India

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.