IONIC2/Angular2 ngOnChange doesn't work

Question

I'm new to Angular2 and I've been struggling for a while with this problem and have found no solution to it online.

[on ionic2!]

I want to use ngOnChanges() so i can detect changes to zonaid:

estados.html:

<ion-item>
       <ion-label color="branco">Zonas</ion-label>


              <ion-select *ngIf="isTrue2" [(ngModel)]=zonaid>
                 <ion-option value={{bicho.zonas}} *ngFor="let bicho of idespecie">
                    {{bicho.zonas}}
                 </ion-option>
             </ion-select>


              <ion-select *ngIf="!isTrue2" [(ngModel)]="zonaid">
                 <ion-option value={{item.id}} *ngFor="let item of itemsZon" >
                    {{item.codigo}}
                 </ion-option>

              </ion-select>
     </ion-item>

idespecie and itemsZon are parts of .json files

estados.ts

import { Component, Input, SimpleChanges, OnChanges } from '@angular/core';
import { NavController } from 'ionic-angular';
import { IpmaBivService} from '../../app/services/ipmabiv.service'
import { Http } from '@angular/http';

@Component({
  selector: 'page-estados',
  templateUrl: 'estados.html'
})
export class EstadosPage {
   itemsZon: any;
   itemsEsp: any;
   zonaEscolhida: any;

   @Input()
   zonaid: string;


   idzona: '';
   idespecie: any[];

   isTrue1:boolean = false;
   isTrue2:boolean = false;
   constructor(public navCtrl: NavController, private ipmaBivService:IpmaBivService) {
  }
  ngOnChanges(changes: SimpleChanges){
     console.log('ngOnChanges ran');
     if(this.zonaid != ''){
        this.isTrue1 = true;
        this.getJsonZonas(this.zonaid);
     }
     if(this.especie != ''){
        this.isTrue2 = true;
        this.getJsonEspecies(this.especie);
     }
 }

}
  ngOnInit(){
     this.getDataZonas('zonas')
     this.getDataEspecies('especies')
   //   this.getData('especies')
 }
 }

app.module.ts

    import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { HttpModule, JsonpModule } from '@angular/http';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { EstadosPage } from '../pages/estados/estados';
import { OutrosPage } from '../pages/estados/outros';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    ListPage,
    EstadosPage,
    OutrosPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpModule,
    JsonpModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    ListPage,
    OutrosPage,
    EstadosPage

  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Everything is happening in the same component (ionic page).

My goal is just to be able to run a method whenever zonaid changes. If you think there is a better way than goin through ngOnChanges, pls let me know

Thanks!

What I see at the first sight - your class does not implement interfaces properly. Use 'implements' keyword when you define the class. For example: "class MyComponent implements OnInit". Then all the interfaces should work as you expect. — plvice, Nov 15 '17 at 20:14
Interfaces are lost after compilation has completed. They only assist (in typescript) in more understandable code, thats the only benefit. — DarkNeuron, Nov 15 '17 at 20:17
@plvice thank you for your answer, still the problem persists — mbc, Nov 15 '17 at 20:31

score 1 · Accepted Answer · answered Nov 15 '17 at 20:14

1

First, remember to always add qoutes, change [(ngModel)]=zonaid to [(ngModel)]="zonaid"

Anyway, as an answer try this:

Change <ion-select *ngIf="isTrue2" [(ngModel)]=zonaid>

to

<ion-select *ngIf="isTrue2" [ngModel]="zonaid" (ngModelChange)="runYourFunction($event)">

Remember to create a public runYourFunction(event) {} in your code.

With this you'll be data binding from the component to the view, and whenever the view changes, you'll run the function runYourFunction.

Hope that helps

answered Nov 15 '17 at 20:14

DarkNeuron

7,981
2
43
48

1

thank you for your answer. Still, runYourFunction(event) { console.log('runYourFunction ran'); } does not print to the console when i select one of the options. I've updated the html as you suggested as well. – mbc Nov 15 '17 at 20:31

score 1 · Answer 2 · answered Nov 15 '17 at 20:47

1

try export class EstadosPage implements OnChanges {

https://angular.io/api/core/OnChanges

answered Nov 15 '17 at 20:47

rhavelka

2,283
3
22
36

score 1 · Answer 3 · answered Nov 16 '17 at 06:05

ngOnChanges is not required. Angular will automatically update the selected value with binding. Dark Neuron answer will work but code need to change from [ngModel]="zonaid" to [(ngModel)]="zonaid". You can also find my working version of ionic dropdown here

Your HTML should look like this.

<ion-item>
       <ion-label color="branco">Zonas</ion-label>
              <ion-select *ngIf="isTrue2" [(ngModel)]="zonaid" (ngModelChange)="zonaiChanged()">
                 <ion-option value={{bicho.zonas}} *ngFor="let bicho of idespecie">
                    {{bicho.zonas}}
                 </ion-option>
             </ion-select>


              <ion-select *ngIf="!isTrue2" [(ngModel)]="zonaid" (ngModelChange)="zonaiChanged()">
                 <ion-option value={{item.id}} *ngFor="let item of itemsZon" >
                    {{item.codigo}}
                 </ion-option>

              </ion-select>
     </ion-item>

In TS file call zonaiChanged to do something on dropdown change

zonaiChanged(){
alert(this.zonaid);
}

your version of the ionic dropdown helped a lot, dhanyawad bhaiya — mbc, Nov 16 '17 at 10:10

IONIC2/Angular2 ngOnChange doesn't work

3 Answers3