How To Use Pipe In Ts Not Html

I adding text into html element from ts like this this.legend.append('text') .attr('x', legendRectSize + legendSpacing) .attr('y', legendRectSize - legendSpacing) .text(funct

Solution 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 })
exportclassFilterPipe{
  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 = newFilterPipe();
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>

Solution 2:

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

exportclassPipeUsingComponent {
  constructor(private pipeName: PipeName)
   }

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

Solution 3:

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

Solution 4:

In your .ts

import {YourPipe} from'/pipePath';


let value = newYourPipe().transform(param);

Solution 5:

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 = newPipeName();
}

In case of any service injection.

constructor(private anotherService: AnotherService
) {
    this.pipeName = newPipeName(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']
})
exportclassEditAppointmentComponentimplementsOnInit {
    startDate: string;
    localizeDatePipe: LocalizedDatePipe;

    constructor(private translateService: TranslateService
    ) {
        this.localizeDatePipe = newLocalizedDatePipe(this.translateService);
    }

    ngOnInit() {
        this.startDate = this.localizeDatePipe.transform('2021-04-08T07:30:00Z', 'd/M/yyyy, h:mm a');
    }
}