In this video you will learn about rendering data in Angular templates. I will should you on the real example how to do string interpolation and use ngFor loop in Angular for rendering variables from the component.

Introduction

Hi I'm Oleksandr Kocherhin from monsterlessons-academy, where I'm teaching you how to become a developer or improve your skills of being a developer in learning by doing way. And if you are new here don't forget to subscribe and I will link everything that I'm mentioning in the description.

Just to remind you this video is part of the free angular for beginners series So let's get started.

Content

In previous video we successfully created our first userList module and component. But we wrote there only plain html. But the purpose of this component is to render the list of users. So let's do this now.

But first this that we need to learn is how to render variable from our typescript file of the component inside our template. Because all business logic of the component is inside typescript file and in html we simply rendering the data.

First let's try to add a property to our class.

export class UsersListComponent {
  user = 'User for test'
}

{{user}}

If we look in browser we see that our variable was rendered. So to render a variable from our component we use double brackets in template. This thing is called string interpolation. You can write there not only variables logic like string concatenation or functions calling and so on. But I highly recommend you to keep it simple and avoid writing logic in templates at all costs.

{{1 + 1}}

Now that we know how to render a single variable in template what about arrays? Because we are doing a list of users component so we want to render array here.

First let's try to render a simple array.

names = ['Jack', 'John', 'Sam']

To render this array in template we need to use special syntax in template.

<div *ngFor="let name of names">
  {{ name }}
</div>

So the whole construction star and ngFor helps us to render a list. Inside it we need to write let then some-variable of our array. Then inside of this tag we can refer to this local variable to get each element that we created.

As you can see in browser we rendered a list of names.

But normally of course we don't store just names but array of objects where we store diffent data. Let's create a users array with some information inside.

Let's create an array of users inside our component.

  users = [
    {
      id: '1',
      name: 'User 1',
      age: 23
    },
    {
      id: '2',
      name: 'User 2',
      age: 25
    },
    {
      id: '3',
      name: 'User 3',
      age: 30
    },
  ]

So here we have just an array of objects with id, name and age. Let's render now this data.

<div *ngFor="let user of users">
  {{ user.name }} is {{ user.age }} years old
</div>

As you can see it looks exactly the same. The only difference is that we render specific properties from each object.

Call to action

In this video you learned how to render data in Angular components. The most important point is to avoid writing complex logic inside your template because it's difficult to support and read.

If angular for beginners is too easy for you or you want more advanced stuff check my 14 hours Angular course where we create a real project from beginning to the end. Link is also in the description.

If you find this video helpful, don't forget to subscribe to this channel and hit subscribe button. And I see you in my next video.

🚨 Important

• Advanced Angular course
• All my courses
• Twitter

📚 References

• Source code