Ngfor get the name from one array where the id = the id from another array and add a comma till the last element

Question

export class Task implements ITask {
  id:number;
  name:string;
  employees:number[];
}

export class Employee implements IEmployee {
  id: number;
  department_id: number;
  first_name: string;
  last_name: string;
  birth_date: string;
}

apiEmployees:Employee[];
apiTasks:Task[];
//task of apiTasks

I would like to display the employee names of the employees for a certain task. I managed to do it like this but the problem is that it does not remove the last comma and i do not know how to fix that problem:

<span *ngFor="let employee of apiEmployees let isLastTaskEmployee=last">
            <span *ngIf="task.employees.includes(employee.id) ">
              {{employee.first_name}}
              {{employee.last_name}}
              {{isLastTaskEmployee
                ?'' : ', '}}
            </span>
          </span>

I would like a different approach because this creates a lot of 'span' tags which are hidden and the isLastTask does not work because it counts the last of the non-visible and visible 'span' tags.

https://i.sstatic.net/V71vd.png

Here you can see how it does not remove the comma when the last visible span is not the overall last span.

P.S. Excuse me for the maybe confusing title, this is my first StackOverflow question!

Answer 1

You can use the pipe to transform apiEmployees.

import {Pipe, PipeTransform} from '@angular/core';
@Pipe({name: 'employeelistPipe'})
export class EmployeeListPipe implements PipeTransform {
    transform(employees: IEmployee []): string {
        names: string[] = [];
        employees.forEach(employee => {
            names.push(`${employee.first_name} ${employee.last_name}`)
        });
        return names.join(", ")

    }
}

And afterward, you can use this pipe as

<span>{{apiEmployees | employeelistPipe}}</span>

NOTE: This code is not tested. It's just for an idea of how to accomplish this task.