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.