Render a list from a Component Class array in Angular

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.