Passing data to user channel from component in angular 2

Question

How to transfer data to a user channel from a component?
I am trying to associate form data with a component and pass it to the handset.

<input [(ngModel)]="phone" placeholder="Phone Number">

You want to transfer 'this.phone' to the 'PhoneNum' handset from the component.

This is done in the template.
{{phoneNumber | PhoneNum}} // PhoneNum is the pipe

My question is being executed in AngularJS this way from the controller

<input ng-model="phone placeholder="Phone Number">
$filter('PhoneNum')($scope.phone); // something like this.
Appreciate the time!

Answer 1

Since the pipe is just a class that implements the PipeTransform interface, you can register it using the component's injector via the provider property:

 import { MyPipe } from './my.pipe.ts'; @Component({ ... providers:[MyPipe] }) 

Then you can embed Pipe in the constructor of any component (or child component) through the DI and use it by calling the conversion method:

 export class MyComponent { private filteredData:Data[]; constructor(private mypipe:MyPipe) { var data = [...]; this.filteredData = this.mypipe.transform(data, []); } }; 

Or, if you do not want to register it through the DI, you can simply create a Pipe instance when you need it:

 export class MyComponent { private filteredData:Data[]; constructor() { var data = [...]; this.filteredData = new MyPipe().transform(data, []); } }; 

Answer 2

I don’t think you can do this with two-way data binding, but you can split it into two one-way data bindings and filter one of them through your channel:

<input [ngModel]="phone" (ngModelChange)="phone = PhoneNum.transform($event)">

or you can leave the original property as it is and call the receiver in the property receiver:

template:

<input type="text" [(ngModel)]="phone">

component:

 private _phone:string = 'test'; public get phone(){ return this.PhoneNum.transform(this._phone); } public set phone(phone){ this._phone = phone; } 

Answer 3

Double linking with channels will not work, you can use one-way binding and ngModelChange to update:

 <input [ngModel]="phone | PhoneNum" (ngModelChange)="phone = $event"> 

Answer 4

For me, using only the following solution did not help:

 <input [ngModel]="phone | PhoneNum" (ngModelChange)="phone = $event"> 

Problem: assigning the phone = $ event did not work for all cases until the user had to focus the input element.

Therefore, I suggest using the ALSO ElementRef Object to handle the inline input element:

HTML:

 <input type="text" name="points" #points maxlength="8" [(ngModel)]="range" (ngModelChange)="range=saverange($event, points)"> 

component:

  onChangeAchievement(eventStr: string, eRef): string { //Do something (some manipulations) on input and than return it to be saved: //In case you need to force of modifing the Element-Reference value on-focus of input: var eventStrToReplace = eventStr.replace(/[^0-9,eE\.\+]+/g, ""); if (eventStr != eventStrToReplace) { eRef.value = eventStrToReplace; } return this.getNumberOnChange(eventStr); } 

The idea is here:

• Providing the "(ngModelChange)" method for setting the Setter:

  (ngModelChange) = "range = saverange ($ event, points)"

• Enabling direct access to the main Dom element with this call:

  eRef.value = eventStrToReplace;