title: How to access array inside of an array of objects in Angular?
body: <p>I have an array of objects containing employees, that looks like this:</p>
  
  <pre><code>[    
     {
        id: "1",
        name: "name",
        email: "email",
        languages: ['english', 'german', 'spanish']
      },
      {
        id: "2",
        name: "name",
        email: "email",
        languages: ['english', 'spanish']
      },
  ]
  </code></pre>
  
  <p>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):</p>
  
  <pre><code>&lt;e-column field="languages" headerText="Languanges" type="array"&gt;
    &lt;ng-template #template let-data&gt;
      &lt;div *ngFor="let employee of employeeList"&gt;
        &lt;ejs-chiplist id="chip" *ngFor="let lang of employee.languages"&gt;
          &lt;e-chips&gt;
            &lt;e-chip text="{{lang}}" cssClass="e-primary"&gt;&lt;/e-chip&gt;
          &lt;/e-chips&gt;
        &lt;/ejs-chiplist&gt;
      &lt;/div&gt;
    &lt;/ng-template&gt;
  &lt;/e-column&gt;
  </code></pre>
  
  <p>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?</p>