#Angular in #VSCode: Programmatic Router Outlet targeting

Mozilla_Firefox.pngdownload.jpgI wanted to put a component into a named router outlet, but do it from another component based on some database/API value. Here’s how I was able to get it to work relatively easily:

My main component, Customers, has this route setup:

    const routes: Routes = [
      {
        path: "customers",
        component: CustomersComponent,
        children: [
          {
            path: "customerlist",
            component: CustomerListComponent,
            outlet: "detailsOutlet"
          }
        ]
      }
    ];

and this named router outlet template:

   router-outlet name="detailsOutlet"

In the CustomerComponent I can then load the CustomerList component into the outlet:

    const parentPath = "customers";
    const childPath = "customerlist";
    this.router.navigate(
      [parentPath, { outlets: { detailsOutlet: childPath } }],
      {
        skipLocationChange: true
      }
    );

I used 2 const values to show where the string values come from. You’ll notice that the paths there match the route paths above.

I didn’t want the URL to change or the history to get the outlet assignment, so I specified the skipLocationChange.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s