Myujth

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 </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');

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)
 

component.ts (Use in your typescript code)

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

xyz.html (Use in your html file)

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

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

In .ts

import YourPipe from '/';

let value = new YourPipe().transform(param);

import pipe in the component

import PipeName from './pipename'

include it in the provides

@Component(
 selector: 'pipe-using-component',
 templateUrl: './pipe-using-component.html',
 providers: [
 PipeName
 ],
)

inject it in the constructor

export class PipeUsingComponent 
 constructor(private pipeName: PipeName)
 

 var requiredResult = this.pipeName.transform(passvalue);
}