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

angular angular-pipe
Alwaysalearner picture Alwaysalearner · May 23, 2018 · Viewed 34.7k times · Source

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?

Answer

bugs picture bugs · May 23, 2018

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.

Related questions

Format date as dd/MM/yyyy using pipes

I'm using the date pipe to format my date, but I just can't get the exact format I want without a workaround. Am I understanding pipes wrongly or is just not possible? //our root app component import {Component} from 'angular2/…

Read More
OrderBy pipe issue

I'm not able to translate this code from Angualr 1 to Angular 2: ng-repeat="todo in todos | orderBy: 'completed'" This is what i've done following the Thierry Templier's answer: Component template: *ngFor="#todo of todos | sort" Component code: @Component({ selector: 'my-app', templateUrl: "./…

Read More
What is pipe() function in Angular

Pipes are filters for transforming data (formats) in the template. I came across the pipe() function as below. What does this pipe() function exactly mean in this case? return this.http.get<Hero>(url) .pipe( tap(_ => this.…

Read More