CODEWITHSUNDEEP
ionic-frameworkionic2
Prashanth
Prashanth

Reputation: 548

Ionic2: ngOnChanges not triggering

I want to perform some action whenever the input value or the slider is changed, but why is ngOnchanges not getting triggered when text or range input is changed?

Controller:

 export class APage implements OnChanges {

      @Input() total: string;
      @Input() percentage: string;

      constructor() {

      }

      ngOnChanges(changes: {[propName: string]: SimpleChange}) {
          console.log('ngOnChanges');
      }

    }

Template:

 <ion-list>
    <ion-item>      
        <ion-label floating>Total</ion-label>
        <ion-input type="text" [(ngmodel)]="total"></ion-input>
    </ion-item>

    <ion-item>
        <ion-label stacked>Percentage: {{percentage}} %</ion-label>
        <ion-range [(ngModel)]="percentage" min="0" max="100">
        </ion-range>
    </ion-item>
</ion-list>

Update1:

Add @Input decorater as per the suggestion which didn't help.

Update2:

This works:

ion-range [(ngModel)]="percentage" min="0" max="100" (ionChange)="inputChanged()">

But it doesn't work for ion-input:

<ion-input type="text" [(ngmodel)]="total" (ionChange)="inputChanged()"></ion-input>

Update 3:

It worked with keyup:

<ion-input type="text" [(ngmodel)]="total" (keyup)="inputChanged()"></ion-input>

Upvotes: 0

Views: 4161

Answers (1)

Manu Vald&#233;s
Manu Vald&#233;s

Reputation: 2372

You might need to decorate aData with @Input()

Edit:

It's probably that you need to hook into the ionic events via the template. If it's beta 8, the event is called (ionChange), pre beta8 it's (change) , according to the changelog

so something like <ion-range [(ngModel)]="percentage" (ionChange)="changeFunc()" min="0" max="100">

Upvotes: 3

Related Questions