Angular 2 Pipe under condition
You need to change the syntax a bit: {{variable.value ? (variable.text | SomePipe) : (variable.text | pipe2)}} Plunker example
You need to change the syntax a bit: {{variable.value ? (variable.text | SomePipe) : (variable.text | pipe2)}} Plunker example
I modified @Thierry Templier’s response so the pipe can sort custom objects in angular 4: import { Pipe, PipeTransform } from “@angular/core”; @Pipe({ name: “sort” }) export class ArraySortPipe implements PipeTransform { transform(array: any, field: string): any[] { if (!Array.isArray(array)) { return; } array.sort((a: any, b: any) => { if (a[field] < b[field]) { return … Read more
To fully understand the problem and possible solutions, we need to discuss Angular change detection — for pipes and components. Pipe Change Detection Stateless/pure Pipes By default, pipes are stateless/pure. Stateless/pure pipes simply transform input data into output data. They don’t remember anything, so they don’t have any properties – just a transform() method. Angular … Read more
According to the Angular documentation, the keyvalue pipe sorts the items by key order by default. You can provide a comparer function to change that order, and sort the items according to the key, to the value, or to the entry order of the properties in the object. The following comparer functions sort the items … Read more
First declare the pipe in the providers of your module: import { YourPipeComponentName } from ‘your_component_path’; @NgModule({ providers: [ YourPipeComponentName ] }) export class YourServiceModule { } Then you can use @Pipe in a component like this: import { YourPipeComponentName } from ‘your_component_path’; class YourService { constructor(private pipe: YourPipeComponentName) {} YourFunction(value) { this.pipe.transform(value, ‘pipeFilter’); } … Read more
Don’t get confused with the concepts of Angular and RxJS We have pipes concept in Angular and pipe() function in RxJS. 1) Pipes in Angular: A pipe takes in data as input and transforms it to the desired output https://angular.io/guide/pipes 2) pipe() function in RxJS: You can use pipes to link operators together. Pipes let … Read more
Pipe date format bug fixed in Angular 2.0.0-rc.2, this Pull Request. Now we can do the conventional way: {{valueDate | date: ‘dd/MM/yyyy’}} Examples: Current Version: Example Angular 13 Old Versions: Example Angular 8.x.x Example Angular 7.x Example Angular 6.x Example Angular 4.x Example Angular 2.x More info in documentation DatePipe