CODEWITHSUNDEEP
angularlayoutroutesangular8
ShivShankar Namdev
ShivShankar Namdev

Reputation: 298

How To Set Header Icon Like Back Arrow or Menu Based on Pages In Angular 8

I am making an app in which i have on layout page which have hamburger menu. now my problem is that for menu root page hamburger menu is OK but when i navigate to child component in that page i have to show the back arrow button dynamically based on route or child element. How can i achieve this in angular 8

I have tried using view child and fetching that element in any component and trying to set its value like display none but it is not accessible in child component

I have provided three images

1) Dashboard, it is ok

2) My View In that the menu is ok

3) In My View i select today arrival in that i have to show back icon dynamically

enter image description here

This Is My project Hirechy

As You can see on the second image : -i.e client.component.html which contains only menu other than that are the child of the client component

Upvotes: 0

Views: 2189

Answers (4)

Gabri
Gabri

Reputation: 1

You can check if the current page is the first one in the "history" of your app by subscribing to NavigationEnd or NavigationStart Router Event and looking the "id" property. If it is equal to 1, it means is the first page visited by the user, so if he wants to go back you can decide what to do, otherwise you just go back by calling back() method on Location class provided by angular/common.

I used a BehaviorSubject variable because it could be used in a service, and other components could subscribe to it for doing some logic. But if you want just use a normal boolean variable.

import { Location } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  ...
})
export class YourComponent implements OnInit {
  public canGoBack$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);

  constructor(private router: Router, private location: Location) {
    this.router.events.subscribe((val) => val instanceof NavigationEnd && this.canGoBack$.next(val.id > 1));
  }
  
  public back() {
    this.canGoBack$.getValue() ? this.location.back() : this.router.navigateByUrl('home', { replaceUrl: true });
  }
}

Upvotes: 0

Matt
Matt

Reputation: 451

You have three options I can think of... 1. Use ngrx and manage the state there (Overkill) 2. Create a service with an rxjs Subject and have your top menu subscribe to the subject and then be disciplined when navigating and always be sure to push to the subject so your top menu knows what to show. 3. inject ActivatedRoute into your top menu component and subscribe to something in the activatedRoute which will tell you if its a child or not. Im not sure what your project or routes look like so I couldn't tell you exactly what to be watching to know but this seems like the easiest way to go. With all three options you could just have two separate divs both with *ngIf statements that determine which one to show.

Here is an example of the third option.

    url$;
    showBackArrow;
    parentUrlEnding = "parent-whatever";

    constructor(private activatedRoute: ActivatedRoute) {
    }
    ngOnInit() {
      this.url$ = this.activatedRoute.url;
      this.url$.subscribe(response => {
        if (response[response.length - 1] == this.parentUrlEnding) {
          this.showBackArrow = false;
        } else {
          this.showBackArrow = true;
      })
    }

If you know what the parent url looks like you can compare the current active url to that and determine if its a child or parent and decide what to show in the html with *ngIf statments

Upvotes: 1

Sebasti&#225;n Rojas
Sebasti&#225;n Rojas

Reputation: 2891

I recommend you to use Ionic and doesn't care about things like this.

In order to help you with this, you should tell us if you're using angular router to navigate.

In the meantime, you can check this: https://angular.io/guide/component-interaction

Upvotes: 0

Hunor
Hunor

Reputation: 449

You could have both of the icons present in your header - one of them being always hidden. For example:

1) Dashboard => you should hide the "Back" arrow based on a variable and show the "Hamburger"

2) My View => you should hide the "Back" arrow based on a variable and show the "Hamburger"

3) In My View when you select "today arrival": => you should hide the "Hamburger" icon based on a variable and show the "Back" arrow

I have a similar example at this stackblitz example (just click an item): https://stackblitz.com/edit/angular-63sjtx?file=app%2Flist-sections-example.html

Relevant example may be this part:

<mat-icon [ngClass]="today_arrival ? 'hidden' : ''">Hamburger</mat-icon>
<mat-icon [ngClass]="today_arrival ? '' : 'hidden'">Back</mat-icon>

Upvotes: 0

Related Questions