go-header-bar component does not display its contents when navigated to the same component.

[sudheepdivakargithub]

Describe the bug
When the app navigates to the same component, the go-header-bar component does not display its content.

To Reproduce
Steps to reproduce the behavior:

1. Get a template rendered in the go-header-bar component.'
2. On any event navigate to the same component.
3. Observe that the go-header=bar is blank.

Expected behavior
go-header-bar should display the content supplied.

Screenshots
If applicable, add screenshots to help explain your problem.

[grahamhency]

Hey @sudheepdivakargithub, in Angular when a navigation event is fired that targets the same route that is active, Angular will not re-render the component by default. I am curious what could be causing this. Can you provide any code examples that could explain why this might be happening in your case?

[sudheepdivakargithub]

Hi Graham, please refer https://stackblitz.com/edit/angular-ivy-dfgmuq to reproduce this issue.

1. Wait for the app to load and notice that the go-header-bar is visible.
2. Click on Step 1. App navigates to another route.
3. Click on Step 2. Observe that the g-header-bar is not visible.

One thing to note is in the template with goHeaderBar directive we render buttons dynamically.

[grahamhency]

Thanks for that replication @sudheepdivakargithub! That helped. I removed a bunch of stuff from the stackblitz just to get to the base issue, but I believe it has something to do with how the goHeaderBar directive is handled when it get's destroyed.

Because of the way routing is being used here Angular will trigger a page refresh for the component, even though it's the same component being used and just a different param. This probably doesn't need to happen and I've been able to create a work-around until we can find a resolution to this bug.

For the buttons that perform the routing in the header-bar, try using this for routing:

fireActionEvent() {
  this.router
    .navigateByUrl('/', { skipLocationChange: true })
    .then(() => {
      this.router.navigate(['detail', 200])
    });
}

Instead of:

fireActionEvent() {
  this.router.navigate(["detail", "200"]);
}

[grahamhency]

@sudheepdivakargithub here is the fork of your recreation with a working example: https://stackblitz.com/edit/goponents-header-bar-disappearing

[grahamhency]

@sudheepdivakargithub I figured out why this was happening in Goponents, although I am not sure of a way to actually bypass this. If we remove this line the previous page's header-bar would appear on the next page, even if that page didn't have a header-bar declared. I'll need to think on this.

The issue:

goponents/projects/go-lib/src/lib/components/go-layout/go-layout.component.ts

Line 56 in a19ae39

this.headerBar.reset();

[grahamhency]

@sudheepdivakargithub, did this fork solve your issue?

@sudheepdivakargithub here is the fork of your recreation with a working example: https://stackblitz.com/edit/goponents-header-bar-disappearing

Doing this:

this.router
      .navigateByUrl('/', { skipLocationChange: true })
      .then(() => {
        this.router.navigate(['detail', 200])
      });

Instead of this:

this.router.navigate(["/detail", 100]);

[StevenUlmer]

Closing this issue as it was fixed as a part of #581