[Solved] Popover not displaying data

Ionic Framework
1

Hi All

I have an issue in my v4 app whereby my popover controller is not displaying anything. Even though in the constructor, if I console.log() the variable it displays the passed data.

Please see the attached code:

    async openComments (item, evt) {
      const popover = await this.popover.create({
        component: CommentPopoverComponent,
        event: evt,
        translucent: true,
        componentProps: {
          comments: item.comments
        },
        cssClass: 'popover__comment'
      })
      return await popover.present();
    }

constructor (
    private navParams: NavParams,
  ) {
    this.comments = navParams.get('comments')
    console.log('Comments: ', this.comments)
  }

The following is logged to my console: Screenshot 2020-03-20 at 16.11.06

Ionic info:

Ionic:

   Ionic CLI : 6.1.0

Utility:

   cordova-res (update available: 0.10.0) : 0.8.0
   native-run (update available: 0.3.0)   : 0.2.8

System:

   NodeJS : v12.12.0
   npm    : 6.11.3
   OS     : macOS Catalina

Any help would be much appreciated as this is a bug in a production app.

Regards,

2

So popover does not access props through navParams.
In fact, you should be avoiding that all together.

instead, you @Inputs to get access to component props.

export class PopoverComponent {

  @Input() comments: any;

  ngOnInit(){
   console.log(this.comments);
  }
}
2 Likes
3

Thanks @mhartington. This was a weird one for me and the help is much appreciated.