ItSolutionStuff.com

Angular Pipe for Array to String Example

By Hardik Savani • May 2, 2024
Angular

Hello,

This is a short guide on angular pipe array to string. this example will help you pipe array to string angular. you can understand a concept of angular pipe array to comma separated string. it's simple example of angular array to string comma separated pipe.

you can easily create custom pipe for array to string in angular 7, angular 8, angular 9, angular 10, angular 11, angular 12, angular 13, angular 14, angular 15, angular 16 and angular 17 version.

here, you have to follow few step to create simple example of custom pipe for array to string. let's see one by one.

Step 1: Create New App

If you are doing example from scratch then You can easily create your angular app using bellow command:

ng new app-material

Step 2: Create Custom Pipe

We need to run following command to creating pipe in angular application.

ng generate pipe array-to-string

Now we need to write some logic on our custom pipe ts file. so let's write logic as i written for demo now.

app/array-to-string.pipe.ts

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({

name: "arrayToString"

})

export class ArrayToStringPipe implements PipeTransform {

transform(input: Array, sep = ","): string {

return input.toString();

}

}

now it should be import in module.ts file as bellow:

app/app.module.ts

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

import { ArrayToStringPipe } from './array-to-string.pipe';

@NgModule({

imports: [ BrowserModule, FormsModule ],

declarations: [ AppComponent, ArrayToStringPipe ],

bootstrap: [ AppComponent ]

})

export class AppModule { }

Step 3: Use Custom Pipe

Now we need to create one variables and use it, let's add code as like bellow:

app/app.component.ts

import { Component, VERSION } from "@angular/core";

@Component({

selector: "my-app",

templateUrl: "./app.component.html",

styleUrls: ["./app.component.css"]

})

export class AppComponent {

name = "Angular " + VERSION.major;

myArray = ['Hardik', 'Paresh', 'Vimal', 'Harshad', 'Kiran'];

}

Ok, now we can use custom pipe in html file, so let's write it.

app/app.component.html

<h1>Angular Pipe for Array to String Example - ItSolutionStuff.com</h1>

<p>{{ myArray | arrayToString }}</p>

Output:

I hope it can help you...

Tags: Angular
Hardik Savani

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

📺 Subscribe on YouTube

We Are Recommending You

Angular Pipe for Alphabetical Order Example

Read Now →

Angular Pipe for Phone Number Example

Read Now →

Angular Create Custom Pipe for Replace Null Values Example

Read Now →

Angular 11/10 Create Custom Pipe Example

Read Now →

Angular Pipes Example | Angular Pipes List Tutorial

Read Now →

Angular Uppercase Pipe Example | Uppercase Pipe in Angular

Read Now →

Angular Date Pipe Example | Date Pipe in Angular

Read Now →

How to Pass Multiple Parameters to Pipe in Angular?

Read Now →

Angular Nl2br Pipe Example

Read Now →

How to Create Custom Pipe in Angular 9/8?

Read Now →