Используйте трубы в компонентах

Question

Я нашел это решение здесь:

Угловой - использовать каналы в службах и компонентах

Это отличное решение, но я хочу знать, есть ли способиспользовать пользовательский канал в шаблоне этого пользовательского компонента в соответствии с примером:

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

Есть ли способ сделать это?

Answer 1

// 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 шаблон выглядит так

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

// Объявления модулей идут так

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 { }