CODEWITHSUNDEEP
angular
Charlie
Charlie

Reputation: 1766

Angular router populate parent outlet

First off, here's a stackbliz link to what I'm trying to do:

https://stackblitz.com/edit/angular-yiaszs

If you click the To Bill button, the route changes but nothing fills in.

If you go into src/app/dashboard/dashboard.component.html and uncomment out the one line, then click the To Bill button, it'll work.

Basically I'm trying to get the button to populate a parent router-outlet. Is this possible?

I've tried all sorts of combinations in the modal: ['bill'] line... ['../bill']... etc...

P.S. Please ignore the routing structure as it's inherited code and matches the actual application routes.

Upvotes: 0

Views: 49

Answers (1)

kvetis
kvetis

Reputation: 7351

Just change what the route navigation is relative to in the click handler to relativeTo: this.route.parent - you want to change the parent view.

public onClick() {
    this.router.navigate([{
      outlets: {
        modal: ['bill']
      }
    }],
      {
        relativeTo: this.route.parent
      }
    );
}

Upvotes: 2

Related Questions