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

Question

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

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

• so in dashboard menu is ok

• in myview menu is ok,

• but when user navigate to myview=>arrivaldeparture. In that I have to change the menu icon in client.component.html to back arrow.

Answer 1

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