How to print an array in comma separated string in angular html

To minimize the load on your application, you might also consider creating a pipe.

It could look something like this, as far as usage: <p>{{ cardData.names|join:', ' }}</p>.

The transform function would look like this:

@Pipe({
  name: 'join'
})
export class JoinPipe implements PipeTransform {
  transform(input:Array<any>, sep = ','): string {
    return input.join(sep);
  }
}


You can use Array.prototype.join (notice the white space after the comma)

<p class="personaType">{{cardData.names.join(', ')}}</p>

This will print all the elements in the array, separated by a comma and a white space.