How to use pipe in ts not HTML

Question

I adding text into html element from ts

like this

this.legend.append('text')   .attr('x', legendRectSize + legendSpacing)   .attr('y', legendRectSize - legendSpacing)   .text(function(d) { return d; }); 

this will create html like

<text>Data will come here</text> 

I want to use pipe to convert this data into some form how can I do that from ts code ?

and as I am creating this HTML dynamically I cannot use pipe like this

<text>{{Data will come here | pipename}} </text> 

I am looking for somethig like

this.legend.append('text')   .attr('x', legendRectSize + legendSpacing)   .attr('y', legendRectSize - legendSpacing)   .text(function(d) { return d; }).applypipe('pipename'); 

Answer 1

First import your pipe in component. And then use your pipe in your component. Like this..

pipe.ts

/**  * filter checkbox list  */ @Pipe({ name: 'filter', pure: true }) export class FilterPipe{   transform(items: any[], args: any): any {     let filter = args.toString();     if(filter !== undefined && filter.length !== null){         if(filter.length === 0 || items.length ===0){             return items;         }else{             return filter ? items.filter(item=> item.title.toLocaleLowerCase().indexOf(filter) != -1) : items;         }     }   } } 

component.ts (Use in your typescript code)

const filterPipe = new FilterPipe(); const fiteredArr = filterPipe.transform(chkArray,txtSearch); 

xyz.html (Use in your html file)

<ul>     <li *ngFor="todo for todos | filter:'txtsearch'"> {{todo.name}} </li> </ul> 

Answer 2

If Pipename is your custom pipe then if you want to use the same in your ts file then you can use below code

import {Pipename} from './pipename';  Pipename.prototype.transform(arguments);//this is how u can use your custom pipe