Menu
From what I understand there is no way in Angular to use pipes on a two-way databinding. Essentially, what I would like to do is:
<input name="humidity" [(ngModel)]="humidity | percent">
Coming from a background of programming .NET WPF I am used to be able to have data transformed in both way (from model to UI, and from UI to model) using value converters.
If I instead change the code to:
<input name="humidity" [ngModel]="humidity | percent" (ngModelChange)="humidityChanged($event)" >
...I'm able to manually in code make the backward "pipe transformation" before storing the data to the model. Please see my Plunker for full code sample using this approach.
My questions are:
Is there a better approach in the current or upcoming version of Angular?
If I want the backward-pipe-transformation to be reusable (in the
same manner as the percent pipe is reusable), is it a good way to
create a PercentComponent containing an <input> along with the
needed code?
498
In a two-way binding, the data flow is bi-directional. This means that the flow of code is from ts file to Html file as well as from Html file to ts file. In order to achieve a two-way binding, we will use ngModel or banana in a box syntax.
Reuse Pipes In Multiple Components: It's is not necessary that we should use the pipe in a single component because we can reuse the pipe in multiple components.
By default, pipes are defined as pure so that Angular executes the pipe only when it detects a pure change to the input value. A pure change is either a change to a primitive input value (such as String , Number , Boolean , or Symbol ), or a changed object reference (such as Date , Array , Function , or Object ).
Steps Involved In Creating a Custom Pipe In Angular are: 1) Create a Pipe Class and decorate it with the decorator @Pipe. 2) Supply a name property to be used as template code name. 3) Register your Pipe in the module under declarations. 4) Finally, implement PipeTransform and write transformation logic.
Angular do not support data converters (i.e. two-way pipes) and there is no indication of any future support.
You can create a custom reusable class containing the transformation logic (transform(..) and transformBack(..)). Still, you will need to extend you model with for instance a new property everywhere where you want to use it.
Angular pipes are direct counterparts of AngularJS filters and suppose to transform view data. They are one-way, as a part of one-way data flow that Angular propagates.
If a value is supposed to be changed both in view and a model, it should be changed in model only, then it will be automatically updated in view. This consists with a role of a model as single source of truth.
humidity | percent is supposed to be used when a value should be shown with a percent in view but remain a number in model.
For instance, this is different in Aurelia which shares a lot of ideas with Angular but has value converters instead of pipes, they (as the name suggests) are capable of converting values in both directions.
74
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
