CODEWITHSUNDEEP
pipeangular
Sachin
Sachin

Reputation: 146

Pass data to custom pipe from component in angular 2

How can I pass data to custom pipe from the component?
I am trying to bind the form data to the component and pass to the pipe.

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

want to pass 'this.phone' to 'PhoneNum' pipe from the component.

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

My question is done in AngularJS in this way from the controller

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

Upvotes: 5

Views: 10690

Answers (4)

Dudi
Dudi

Reputation: 3079

For me, using only the following solution didn't work:

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

The problem: The assignment of phone = $event didn't work for all cases until user had to focus out the input element.

So I suggest using ALSO ElementRef Object for handling the native 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 here:

  1. Letting the "(ngModelChange)" method to do the Setter job:

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

  2. Enabling direct access to the native Dom element using this call:

    eRef.value = eventStrToReplace;

Upvotes: 0

renzherl
renzherl

Reputation: 161

Double binding with pipes will not work, you can use one way binding and ngModelChange for update:

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

Upvotes: 1

Michael Kang
Michael Kang

Reputation: 52867

Since a pipe is just a class that implements the PipeTransform interface, you can register it with the component's injector through the providers property:

import { MyPipe } from './my.pipe.ts';

@Component({
   ...
   providers:[MyPipe]
})

Then you can inject the Pipe into any component's (or child component's) constructor through DI and use it by calling the transform method:

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

Or if you don't want to register it through DI, you can just instantiate the Pipe when you need it:

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

Upvotes: 5

Langley
Langley

Reputation: 5344

I don't think you can do that with two-way data binding, but you can break it into two one-way bindings and filter one of them through your pipe:

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

or you can leave the original propery just the way it is and call the pipe in the getter of the property:

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; }

Upvotes: 2

Related Questions