CODEWITHSUNDEEP
angularangular2-routingangular-auxiliary-routes
Dev
Dev

Reputation: 103

Using Angular multiple outlet

My app-routing.module.ts content looks like this.

const routes: Routes = [
  { path: '', redirectTo: '/', pathMatch: 'full' }
  , { path: 'navbar/:moduleId', component: NavMenuComponent }
  , { path: 'entitylist/:menuItemId', component: EntityListComponent, outlet:"content"}
  , { path: 'profile/:profileId', component: ProfileMasterComponent}
];

I have a header.html. which loads header links.

**header.html**
<div class="collapse navbar-collapse" id="navbarCollapse">
  <ul class="navbar-nav">
    <li *ngFor="let module of modules">
      <a class="nav-link dropdown-toggle" [routerLink]="['/navbar',module.id]" (click)="moduleId = module.Id">
        {{module.name}}
      </a>
    </li>
  </ul>
</div>


<div class="container-fluid content">
<router-outlet></router-outlet>
</div>


**nav-menu.html**
<div class="row">
  <div class="col-sm-2">
        <a [routerLink]="['',{outlets:{content:['entitylist',menuItem.id]}}]">{{menuItem.name}}</a>
  </div>
  <div class="col-sm-10">
    <router-outlet name="content"></router-outlet>
  </div>
</div>

Question 1

On click in any header link, it correctly loads the nav-menu.html (the side bar). However on click of any link in nav-menu.html, I want the entity-list component to be loaded in area (with blue border) which is right adjacent to side bar. However that does not happen. There are no errors in the console as well.

Question 2

Once content in loaded in blue border area, I want everything to be loaded in that area only. example, I have link in entity-list component which should load new component, I want that new component to be loaded in blue border area only.

enter image description here

Upvotes: 1

Views: 652

Answers (1)

pauljosephatay
pauljosephatay

Reputation: 131

i think this is a matter of route design.

check this stackblitz and hope you find some idea:

https://stackblitz.com/edit/angular-router-outlets-sic3d3?file=app%2Fapp.routing.ts

Upvotes: 1

Related Questions