Use pipes in components

Question

I found this solution here:

Angular - Use pipes in services and components

This solution is great, but I want to know if there is a way to use a custom pipe in the template of that custom Component as per example:

`<div *ngFor=" something of someThings | customPipe: value">
</div>`

Is there a way to do this?

Please post code, or a [mcve], or anything that could help identify your issue or your request. Right now, I have no idea what you're talking about, except that you want to use a pipe in a component. And if so, *RTFM*. — , Jun 04 '18 at 13:42
Of course there is, they'd be totally useless otherwise. Did you read https://angular.io/guide/pipes? — jonrsharpe, Jun 04 '18 at 13:43
Actually the post you provided has a answer for your question, https://stackoverflow.com/questions/35144821/angular-use-pipes-in-services-and-components, look for the one with 8 answers. — windmaomao, Jun 04 '18 at 13:43

score 0 · Answer 1 · answered Jun 04 '18 at 14:07

// ListConcatPipe.ts

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

@Pipe({
    name: 'listConcat'
})
export class ListConcatPipe implements PipeTransform {

    transform(list: any[], seperator:any) {
        let str = "";
        list.forEach(element => {
            str = str + element + seperator;
        });
        return decodeURIComponent(str);
    }

}

// html template goes like this

<span class="vmiddle">Destination path : {{user}}/plans &amp; specs/{{uploadPath | listConcat : "/"}}</span>

// Module declarations go like this

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';

import { ListConcatPipe } from './list-concat.pipe';
import { Component } from './projects.compoennt';

@NgModule({
    imports: [CommonModule],
    declarations: [ListConcatPipe, Component],
    exports: [Component]
})

export class PipesModule { }

Use pipes in components

1 Answers1