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');
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>
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
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);
}
In your .ts
import {YourPipe} from '/pipePath';
let value = new YourPipe().transform(param);
I have to use it on multiple methods so I declared a property with its type: PipeName
.
private pipeName: PipeName;
Then in constructor.
constructor() {
this.pipeName = new PipeName();
}
In case of any service injection.
constructor(
private anotherService: AnotherService
) {
this.pipeName = new PipeName(anotherService);
}
Using pipe to transform anywhere in .ts
this.pipeName.transform(value, format);
Example
import { Component, OnInit } from '@angular/core';
import { LocalizedDatePipe } from '../../../pipes/localized-date.pipe';
import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'edit-appointment',
templateUrl: './edit-appointment.component.html',
styleUrls: ['./edit-appointment.component.css']
})
export class EditAppointmentComponent implements OnInit {
startDate: string;
localizeDatePipe: LocalizedDatePipe;
constructor(
private translateService: TranslateService
) {
this.localizeDatePipe = new LocalizedDatePipe(this.translateService);
}
ngOnInit() {
this.startDate = this.localizeDatePipe.transform('2021-04-08T07:30:00Z', 'd/M/yyyy, h:mm a');
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.