How to using grid image navigation?

Ionic Framework
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
4

hi @supakwong,

If you prefer use “href” in your image, try put like this:

<ion-grid>
<ion-row>

                <ion-col>

                  <p>
                    <a href="your local">
                      <img src="/assets/yourimage.png" alt="" />
                    </a>
                  </p>

                </ion-col>

                <ion-col>
                  <p>
                    <a href="your local">
                      <img src="/assets/your image" alt="" />
                    </a>
                  </p>
                </ion-col>

              </ion-row>
            </ion-grid>