Creating a dynamic list from Angular

 

In Angular, you can create a dynamic list using the *ngFor directive. The *ngFor directive is used to loop through an array and generate a list of elements based on the data in the array.

Here's an example of how to create a dynamic list in Angular:

 

:

1. Create an array of items in your component:

css

items = ['Item 1', 'Item 2', 'Item 3'];

2. In your component's HTML template, use the *ngFor directive to loop through the array and generate a list of items:

php

<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

This will generate an unordered list with three items, each with the text "Item 1", "Item 2", or "Item 3", respectively.

You can also use *ngFor with an object to loop through the object's properties. Here's an example:

1. Create an object with properties in your component:

css

items = { item1: 'Item 1', item2: 'Item 2', item3: 'Item 3' };

2. In your component's HTML template, use the *ngFor directive to loop through the object and generate a list of items:

css

<ul>
  <li *ngFor="let item of Object.keys(items)">{{ items[item] }}</li>
</ul>

This will generate an unordered list with three items, each with the text "Item 1", "Item 2", or "Item 3", respectively, based on the properties in the items object.

 

Browse More Articles

Tweet

Written by Ragesh

Experienced Webdesigner and SEO Consultant Specialist from Cochin, Kerala with over three years of experience in the field of Search Engine Optimization, SEO and Internet Marketing