CODEWITHSUNDEEP
angularrouter
hidri elaa
hidri elaa

Reputation: 75

i can't navigate to router-outlet inside another

I have 2 router-outlet in my project and one inside on the other the first one is the default app router-outlet and the second one is inside one of the 'home' component in which I want to show other components when I click on the toolbarso this was the solution that I found to navigate to the second one
html file :

   <mat-toolbar >
      <a routerLink="/sessionag">Session</a>


      <button mat-button style="background-color: #80D0D0" (click)="logout()">logout</button>

    </mat-toolbar>
    <mat-drawer-container >
      <mat-drawer-content style="color: #333333 ;background-color: white">
        <router-outlet name="second"></router-outlet>

      </mat-drawer-content>
    </mat-drawer-container>

AppRoutingModule file :

 const routes: Routes = [

  {path:'sessionag',
    component:SessionAgComponent,outlet:'second'},

];

but this is not working for me i don't know why .
did i do something wrang or it does not work like this

Upvotes: 4

Views: 1723

Answers (2)

hidri elaa
hidri elaa

Reputation: 75

so what I was looking for actually is a router outlet inside another and the answer that I found is to add the component as children of the component in which I want to add the second router-outlet like this :
in app-routing-module

    const routes: Routes = [
      {path:'home',
    component:HomepageComponent,
    children:[
      {path:'sessionag',
        component:SessionAgComponent},
      {path:'sessiontek',
        component:SessionTekComponent},
    ]
  },
];

in the .ts file

this.router.navigate(['/home/sessionag']);

in HTML file

 <router-outlet ></router-outlet>

Upvotes: 1

C.OG
C.OG

Reputation: 6529

If you're not navigating to the primary router, you have to tell angular what router-outlet you want to route to.

Using the routerLink directive you can specify the outlet you want to route to:

<a 
  [routerLink]="[{ outlets: {second: ['sessionag'] } }]">
  Session
</a>

Demo on Stackblitz

Upvotes: 2

Related Questions