You can use Array.prototype.join (notice the white space after the comma) <p class=”personaType”>{{cardData.names.join(‘, ‘)}}</p> This will print all the elements in the array, separated by a comma and a white space.
You will also get this error if your component is not in the declarations array of its parent module.
As mentioned by @Perry you will need to provide the date in milliseconds. From the Angular 2 reference for date we have: expression is a date object or a number (milliseconds since UTC epoch) or an ISO string So it can be simply be: {{load.loadDate * 1000 | date}}
This is what can happen when you mix template driven form and reactive form. You have two bindings fighting each other. Choose either template driven or reactive form. If you want to go the reactive route, you can use [value] for your pipe… Note, this pipe is rather only for showing the desired output in … Read more
If you want to use pipe’s transform() method in component, you also need to add CustomPipe to module’s providers: import { CustomPipe } from ‘../pipes/custom.pipe’; … @NgModule({ imports: [ .. ], declarations: [ CustomPipe ], exports: [ CustomPipe ], providers: [ CustomPipe ] }) export class SharedModule { }
A pure pipe is only called when Angular detects a change in the value or the parameters passed to a pipe. An impure pipe is called for every change detection cycle no matter whether the value or parameter(s) changes. This is relevant for changes that are not detected by Angular when you pass an array … Read more
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