Use pipe in ts file angulr

Pipe angular typescript

import { YourPipeComponentName } from 'your_component_path';

class YourService {

  constructor(private pipe: YourPipeComponentName) {}

  YourFunction(value) {
    this.pipe.transform(value, 'pipeFilter');
  }
}

Source: stackoverflow.com

Use pipe in ts file angulr

// pipe.ts
@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);
// 

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>

Source: stackoverflow.com

Similar codes

-1 vote264 views1 answer
Reverse mongo results order
TypeScript
0 vote266 views1 answer
In grunt cannot be loaded because running scripts is disabled on this system
TypeScript
0 vote255 views1 answer
Const formats = { time: { '24hour': {hour12: false, hours: 'numeric', minute: 'numeric'} } }; <IntlProvider locale={locale} messages={messages} formats={formats}> <FormattedTime value={someDate} format='24hour'/> </IntlProvider>
TypeScript
0 vote244 views1 answer
Mat card api
TypeScript
0 vote273 views1 answer
Update object in array in ngxrx store in angular
TypeScript
1 vote261 views1 answer
How to remove the dots from ul
TypeScript
0 vote263 views1 answer
Typescript interface key with another type
TypeScript
0 vote284 views1 answer
'create' is deprecated
TypeScript
0 vote301 views1 answer
Highcharts print
TypeScript
0 vote257 views1 answer
Keyboard shortcuts to delete whole word using backspace
TypeScript