CODEWITHSUNDEEP
ionic-frameworkionic4
Han Che
Han Che

Reputation: 8519

ionic 4 - prevent navigation on ion-back-button

Is there a way to implement the ion-back-button without having it automatically trigger nav.pop() ?

The problem stems form the funny custom arrow-back button ionic uses which I can't simply remake.

The snippet below is the closest and simplest approach but the result does not look "identical". It doesn't doesn't automatically hide when the nav stack is empty.

<ion-button slot="start" (click)="onBack()" fill="clear">
    <ion-icon slot="icon-only" name="arrow-back" style="color:#424242"></ion-icon>
</ion-button>

What I would like is

<ion-back-button slot="start" (click)="someCustomLogic()"></ion-back-button>

Upvotes: 2

Views: 3035

Answers (2)

Sergey Rudenko
Sergey Rudenko

Reputation: 9235

Definitely a hack:

<ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button onclick="event.stopImmediatePropagation(); window.myCustomMethod()"></ion-back-button>
    </ion-buttons>
    <ion-title>
      List
    </ion-title>
</ion-toolbar>

Inside ts:

import { Component, OnInit } from '@angular/core';
import { NavController } from '@ionic/angular';

@Component({
  selector: 'app-list',
  templateUrl: 'list.page.html',
  styleUrls: ['list.page.scss']
})
export class ListPage {

  constructor( private navCtrl: NavController) {
    window['myCustomMethod'] = this.overide;
  }

  overide = () => {
    console.log("hi")
    this.navCtrl.navigateBack('/home')
  }

}

Upvotes: 3

MagicaNexus
MagicaNexus

Reputation: 312

Why don't your try something like that :

<ion-row>
  <ion-col tap="someCustomLogic()">
    <ion-icon slot="icon-only" name="arrow-back" style="color:#424242"></ion-icon>
  </ion-col>
</ion-row>

Upvotes: 1

Related Questions