Lets continue our exploration into angular. We are going to create a simple list from an array attribute in our component.
Lets add an items array to our component class in app.component.ts. We also add the listName attribute and give it a default value.
export class AppComponent {
title = 'Hello World';
listName = "list";
items = [
{
id : 1,
name : "item 1"
},
{
id : 2,
name : "item 2"
},
{
id : 3,
name : "item 3"
},
]
}
We have an items array with three objects in them. The objects have an id and name attribute.
Lets check out our view in app.component.html. We place the listName in a h2 header element.
<h2>Here we have a list called: {{ listName }} </h2>
<ul>
<li *ngFor="let item of items ">
{{ item.name }} - {{ item.id }}
</li>
</ul>
To display our list we use the *ngFor directive. We have access to the items array in our view. We loop through it using the ngFor directive. We declare a item variable for each of the items. With the li element we display the name and id of the object using the declared item variable.

Now we have a list. Its that simple.