Auxiliary Routes:
Ant Man of Angular

FORMS

PIPES

ROUTE GUARDS

DIRECTIVES

SERVICES

COMPONENTS

DI

Austin, Texas

@GuacamoleAnkita

SoodAnkita

Ankita Sood

(uh nk - ee t ah s oo d)

SPA Layout

<router-outlet></router-outlet>

<header></header>

<footer></footer>

<nav></nav>

The Plot

The Marvel-Us App

Handcrafted with blood, sweat, tears, love & Angular

    {
        path: 'my-favorites',
        outlet: 'favorites',
        loadComponent: () => import('./app/shared/favorites-panel/favorites-panel.component')
                             .then(m => FavoritesPanelComponent)
    },

<main class="main">
    <router-outlet></router-outlet>
    <router-outlet name="favorites"></router-outlet>
</main>

[routerLink]="['/', {outlets: {favorites :['my-favorites']}}]" skipLocationChange

[routerLink]="['/', { outlets: { details : null } }]"

this.router.navigate([{outlets: {details: null}}]);

OR

Some other use cases

A view that lets users add products to a comparison list in a modal (loaded via the auxiliary route) as they explore the app.

Have the help documentation or the chat feature or the draft mode while editing persistently open while the user navigates through the app following the instructions.