Search code examples
angularangular-pipe

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

I have to display a parse an array inside a json in HTML:

 <p class="personaType">{{cardData.names}}</p>

where names is 

names: Array(5) 0:"Person" 1:"Artist" 2:"Performing Artist" 3:"Production Artist" 4:"Visual Artist" 5:"Intermedia Artist"

I want to display names as:

Person, Artist, Performing Artist, Production Artist

Right now it is displaying as (without space):

Person,Artist,Performing Artist,Production Artist

Is there any inbuilt pipe available in angular which can be used to display such data?

Solution

  • 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.