CODEWITHSUNDEEP
ionic-frameworkionic4
Rahul Pamnani
Rahul Pamnani

Reputation: 1435

How to show the back button on the particular page in Ionic

I am working in my Ionic 4 app and I have added a back button in my toolbar and I want to show the back button only on some particular pages.

This is app.component.html:

<ion-back-button class="btnmy11" defaultHref="/"></ion-back-button>

I want to show the back button only on some particular pages.

I have added the CSS for displaying the back button on some particular pages but it is not working.

I have also added the [hidden]="menuIsHidden" and make it false by default and true on some particular pages but this is also not working.

Any help is much appreciated.

Upvotes: 0

Views: 1778

Answers (3)

Bhagwat Tupe
Bhagwat Tupe

Reputation: 1943

where you want to show back button you can use ion-nav instead use of ion-toolbar.
By default ion-nav animates transition between pages based in the mode (ios or material design).

Upvotes: 1

Peter Haddad
Peter Haddad

Reputation: 80944

Create a page by executing the following command:

ionic generate page SharedToolbar

Then inside that page use the @Input() directive, example:

html:

<ion-header>
<ion-toolbar>
 <ion-buttons slot="start">
  <div *ngIf="showBackButton== 'true'">
  <ion-back-button></ion-back-button>
  </div>
</ion-buttons>

typescript:

@Component({
 selector    : 'shared-toolbar',
 templateUrl : './shared-toolbar.page.html',
 styleUrls   : ['./shared-toolbar.page.scss'],
 })
export class SharedToolbar implements OnInit 
{
  @Input() showBackButton: string  = 'false';
  constructor() { }
  ngOnInit(){}
}

Then in any page you create, you can add the following in the html:

<shared-toolbar showBackButton="true"></shared-toolbar>

and send the following attribute as above to show the back button.

Note:

In the module of each page you might have to add the following:

  schemas : [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],

to be able to use a template URL of a specific page.

more info here:

https://angular.io/guide/attribute-directives#pass-values-into-the-directive-with-an-input-data-binding

Upvotes: 1

Tachyon
Tachyon

Reputation: 2411

You can create a css class such as:

.back-hide {
  display: none;
}

And then use a ngClass on the back button that applies the style if needed.

<ion-back-button class="btnmy11" defaultHref="/" [ngClass]="{'back-hide': menuIsHidden==true}"></ion-back-button>

Upvotes: 1

Related Questions