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
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
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
I have to implement search functionality in my local and Here is Updated your code. please do this way. Here is the code that I have to update. directory Structure app/ _pipe/ search/ search.pipe.ts search.pipe.spec.ts app/ app.component.css app.component.html app.component.ts app.module.ts app.component.spec.ts command run for creating pipe ng g pipe search component.html <input type=”text” class=”form-control” placeholder=”Search” … Read more
Here is a working plunkr with a filter and sortBy pipe. https://plnkr.co/edit/vRvnNUULmBpkbLUYk4uw?p=preview As developer033 mentioned in a comment, you are passing in a single value to the filter pipe, when the filter pipe is expecting an array of values. I would tell the pipe to expect a single value instead of an array export class … 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
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
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