CODEWITHSUNDEEP
htmlcssangular
Hussein Khamis
Hussein Khamis

Reputation: 21

How to use multiple <router-outlet> with Angular

I've used router outlets many times, but never thought of using many of them. I basically thought about this when I was trying to make a login page with a navigation bar in it, and then I though what if I made multiple navigation bars in one page.

I tried to search the angular documentation but I understood nothing, absolutely nothing. The last thoughts were come and ask my question here in stack overflow.

<div class="row no-gutters">

  <div class="leftside">
    <img src="assets/truck.jpeg">
  </div>

  <div class="rightside">
    <h1 class="title">Route Optimization</h1>
    <br>
    <app-loginbar></app-loginbar>
    <router-outlet></router-outlet>
  </div>

</div>

Login Forgot Password

This is basically my login page / forgot password, as you can see I have a navigation bar and my router outler tag under it.

<ul class="nav justify-content-center">
    <li class="nav-item">
        <button class="nav-button-left" (click)="changeSignIn()">
            <h3 class="navelement" id="signin" style="border-bottom: 2px solid gray;">Sign In</h3>
        </button>
    </li>
    <li class="nav-item">
        <button class="nav-button-right" (click)="changeForgot()">
            <h3 class="navelement" id="forgot">Forgot Password</h3>
        </button>
    </li>
</ul>

My navigation bar is nothing but a list of two buttons: - Both update the underline of the navigation bar and moves from a component to another using this function: 

this.router.navigateByUrl("...");

What I want is have a completely new page. I don't want the login / forgot password navigation bar to appear. And this is what I am facing:

Problem

As you can see, I have the navigation bar and "main works!" too, I only want a new total page with "main works!" to appear.

I'm not facing any error, I just don't know how to do it.

Upvotes: 1

Views: 947

Answers (3)

Chiu
Chiu

Reputation: 374

What you needed is two navigation bars, or call the navigation bars with different parameters to indicating what to show on the top, and put them inside <router-outlet></router-outlet>. Because what you want is showing different things (navigation links) on different pages.

Upvotes: 0

JohnnyDevNull
JohnnyDevNull

Reputation: 982

First before you start think of your app structure how you want to setup everything. What i mean with that is to do a sketch of your pages, how you want to name them and so on... later on you can setup your routing.

For example this is a excerpt of one of my apps:

const routes: Routes = [
  { path: '', component: MainComponent, children: [
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    { path: 'home', component: HomeComponent },
    { path: 'blog', loadChildren: () => import('../modules/blog/blog.module').then(m => m.BlogModule)},
    { path: 'about', component: AboutComponent },
    { path: 'contact', component: ContactComponent },
    { path: 'legal', component: ImpressumComponent },
    { path: 'privacy', component: PrivacyComponent },
    { path: 'signin', component: SigninComponent },
    { path: 'signup', component: SignupComponent },
    { path: 'signout', component: SignoutComponent },
    { path: '**', component: NotFoundComponent }
  ]}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Here in this example the MainComponent has one <router-outlet></router-outlet> and the blog pages are loaded by lazy loading, that also means, that the BlogModule has it's own <router-outlet></router-outlet> and routing configuration. That will be imported there with RouterModule.forChild(routes). For more information you have to dive deeper into the doc's and their example Heroes App.

Import that routing module into your main AppModule:

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent,
    PrivacyComponent,
    ImpressumComponent,
    NotFoundComponent,
    ContactComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

For your navigation you can just simply setup your routerLink attributes:

<mat-toolbar color="primary">
  <app-page-content>
    <a routerLink="/home" mat-button><i class="material-icons" style="margin-bottom: 3px">home</i> Home</a>
    <a routerLink="/blog" mat-button><i class="material-icons" style="margin-bottom: 3px">dashboard</i> Blog</a>
    <a routerLink="/about" mat-button><i class="material-icons" style="margin-bottom: 3px">person</i> About</a>
    <a routerLink="/contact" mat-button><i class="material-icons" style="margin-bottom: 3px">mail</i> Contact</a>
    <span class="flex-spacer"></span>
    <a routerLink="signin" mat-button><span class="mi mi-person"></span></a>
  </app-page-content>
</mat-toolbar>

If you don't understand all this things i recommend you heavily to watch a angular crash course. Just type in YouTube "Angular Crash Course 2019", there is a pretty good one!

Upvotes: 1

Saksham
Saksham

Reputation: 9380

You are looking for named router outlets. With this, one can have multiple router-outlets on a page where only one can be left unnamed. In your route configuration, you need to specify the outlet property in order to specify which component should load in which outlet

Documentation at: https://angular.io/guide/router#displaying-multiple-routes-in-named-outlets

Upvotes: 1

Related Questions