How to loop through array values using ngFor and interpolation in Angular

Question

The Employee object in my Angular app contains an array of Skill objects, like below:

export interface IEmployee {
    id: number;
    fullName: string;
    skills: ISkill[];
}

Here is my Skill interface:

export interface ISkill {
    skillName: string;
    experienceInYears: number;
    proficiency: string;
}

I am able to use interpolation to display employee details like so:

{{employee.fullName}}

Now, I am trying to display the employee's skill.

Below, I am able to display the first skill:

{{employee.skills[0]?.skillName}}

But I want to display all of the skills associated with that employee, not just the first one.

I think the solution might have something to do with ngFor, but not sure exactly how to implement it.

Can someone please tell me how I can loop through the skills array to display all skillName's in the above code?

Nabin Paudyal · Accepted Answer · 2019-06-20 07:46:52Z

1

You can simply use ngFor for the skills of the particular employee.

Something like this should do the trick.

<div *ngFor="let skill of employee.skills">
  {{skill.skillName}}
</div>

answered Jun 20, 2019 at 7:46

Nabin Paudyal

1,6399 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

asimhashmi · Accepted Answer · 2019-06-20 07:45:20Z

1

You can loop over your skills array like this:

<div *ngFor="let skill of employee.skills" >
   <span>{{skill.skillName}}</span>
   <span>{{skill.experienceInYears}}</span>
   <span>{{skill.proficiency}}</span>

</div>

You can find more info here

answered Jun 20, 2019 at 7:45

asimhashmi

4,3861 gold badge17 silver badges34 bronze badges

Comments

Akash Srivastav · Accepted Answer · 2019-06-20 07:45:55Z

1

<div *ngFor="let skill of employee.skills">
    <div>{{ skill.skillName }}</div>
    <div>{{ skill.proficiency }}</div>
    <div>{{ skill.experienceInYears }}</div>
</div>

answered Jun 20, 2019 at 7:45

Akash Srivastav

7665 silver badges17 bronze badges

Comments

Yusuf Azal · Accepted Answer · 2019-06-20 07:46:17Z

1

Read the docu for more informations: https://angular.io/guide/displaying-data

<div *ngFor="let skill of employee.skills">
      {{ skill.name }}
    </div>

answered Jun 20, 2019 at 7:46

Yusuf Azal

2283 silver badges14 bronze badges

Collectives™ on Stack Overflow

How to loop through array values using ngFor and interpolation in Angular

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related