[rc0] Calling a custom component, variable is always undefined

Ionic Framework ionic-v3
1

I’ve updated my ionic app from beta 11 to rc0. I am trying to use a custom component that I’m calling from the home-page.html

<slider-component [songs]="recentlyViewedSongs" [viewId]="RecentViewId" </slider-component>

In the slider-component.ts, I have a console.log which remains always undefined

    export class SliderComponent {
        
        @Input() songs: any; 
        @Input() viewId: any = []; //stores id of songs to be shown
         
        constructor(
            public nav: NavController, 
        ) { 
            console.log("In the SliderComponent, this.songs", this.songs);  //shows an empty array
        }

In my app.module.ts, I’m using @NgModule like this

    @NgModule({
      declarations: [
        MyApp,
        HomePage,
        SliderComponent
      ],
      imports: [
        IonicModule.forRoot(MyApp)
      ],
      bootstrap: [IonicApp],
      entryComponents: [
        MyApp,
        HomePage,
        SliderComponent
      ],
      providers: []
    })
    export class AppModule {}

Any ideas on what I’m doing wrong?

2

Try put the console.log in ngAfterViewInit or ionViewDidLoad

Note
The ionic lifecycle hooks is ionViewDidLocad, but since there is an issue with child contents, I’m avoiding it.

3

Thanks for the idea. I’ve used ngOnit and variable was defined.

I was not able to use the ionic lifecycle hooks. Do I need to import them? How to use them?

4

No need for impot, see doc

*If you copy from my comment, it was misspelled, I already correct it

1 Like
5

@Input() songs: any = [];
@Input() viewId: any;

6

Thanks guys. Problem solved. One of the songs had an undefined variable and it was creating errors.

I’ve used used ionic lifecycle hook, ionViewDidLoad, but not showing anything. ngOnit is working fine.

ionViewDidLoad() {
console.log(“In the SliderComponent ionViewDidLoad, this.songs”, this.songs);
}