Ion-fab-button href loads the whole page


I am trying to create ion-fab with multiple buttons linking to different locations in the app.
But when using href it loads the whole page. I would like it to use the router to only load the inner content.
Is this possible?

<ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-icon name="menu"></ion-icon>
  <ion-fab-list side="top">
    <ion-fab-button color="secondary" href="offers">
      <ion-icon name="pricetags"></ion-icon>
    <ion-fab-button color="secondary" size="large" href="search">
      <ion-icon name="search"></ion-icon>
  <ion-fab-list side="start">
    <ion-fab-button color="secondary" href="/products/events">
      <ion-icon name="musical-notes"></ion-icon>
    <ion-fab-button color="secondary" href="/products/sleep">
      <ion-icon name="bed"></ion-icon>
    <ion-fab-button color="secondary" href="/products/eat">
      <ion-icon name="restaurant"></ion-icon>
    <ion-fab-button color="secondary" href="/products/activity">
      <ion-icon name="walk"></ion-icon>

The tab is outside the ion-router-outlet , tried inside without luck.


   Ionic CLI                     : 5.4.13 
   Ionic Framework               : @ionic/angular 4.11.7
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.1.1


   Capacitor CLI   : 1.4.0
   @capacitor/core : 1.4.0


   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 13 other plugins)

Solved by using angular route click event.
But hope it is a solution without this way?