How to using grid image navigation?

#1

Can you help me, I try to create menu with grid image clickable to other page.

I try find the idea on the Internet and not found it.

    <ion-col no-padding>
      <ion-img src="/assets/bellwhite.png" full no-margin href="/notification"></ion-img>
    </ion-col>

I try cover by button and item tag it’s not fit on grid col.

    <ion-col no-padding>
      <ion-item href="/notifications/" full no-margin>
          <ion-img src="/assets/bellwhite.png" full no-margin></ion-img>
      </ion-item>      
    </ion-col>
#2

Hi @supakwong,

Neither ion-img nor ion-item have an href property, that’s why it isn’t working. But you can make any element clickable by adding (click)=“myFunction()”, just like in regular Angular.

Then inside this function you can navigate to whatever page you need by using the Angular Router (Ionic 4) or NavController (Ionic 3).

Best,
Rodrigo

#3

Thank you @FdezRomero , It’s work fine.

  constructor(public router: Router) {
  }

  onClickNotification() {
    this.router.navigate(['notification']);
  }
1 Like