How to access array inside of an array of objects in Angular?

Question

I have an array of objects containing employees, that looks like this:

[    
   {
      id: "1",
      name: "name",
      email: "email",
      languages: ['english', 'german', 'spanish']
    },
    {
      id: "2",
      name: "name",
      email: "email",
      languages: ['english', 'spanish']
    },
]

This array is the datasource for my grid. In the same grid's 'languages' column, I am trying to list these languages as chips elements. To create these elements I tried to use ngFor, as it follows (I am using syncfusion):

<e-column field="languages" headerText="Languanges" type="array">
  <ng-template #template let-data>
    <div *ngFor="let employee of employeeList">
      <ejs-chiplist id="chip" *ngFor="let lang of employee.languages">
        <e-chips>
          <e-chip text="{{lang}}" cssClass="e-primary"></e-chip>
        </e-chips>
      </ejs-chiplist>
    </div>
  </ng-template>
</e-column>

This kinda works, however, because of the 2 ngFors, it displays the languages multiple times. What can I do about this? What would be a better way to solve this?

Answer 1

You can remove the one ngFor for all the employees as you already have access to the data in the template from the grid's data source and can access the employees languages like below

<e-column field="languages" headerText="Languanges" type="array">
  <ng-template #template let-data>

      <ejs-chiplist id="chip" *ngFor="let lang of data.languages">
        <e-chips>
          <e-chip text="{{lang}}" cssClass="e-primary"></e-chip>
        </e-chips>
      </ejs-chiplist>
  </ng-template>
</e-column>

you can also have a look at the Syncfusion documentation on column templates: https://help.syncfusion.com/angular/grid/columns#column-template