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>
  <li *ngFor="let item of items ">
    {{ }} - {{ }}

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.

Rendering a list

Now we have a list. Its that simple.

Leave a Reply

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

You are commenting using your 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