How to add a top level router outlet in Angular

user_8548553 0
Viewed 107

This is probably really easy, but for some reason I just can't get to figure it out. I have some html in my app component:

<div class="top-half">
    <app-top-bar></app-top-bar>
</div>

<div class="bottom-half">
    <app-sidebar></app-sidebar>
    <router-outlet></router-outlet>
</div>

This is cool, but I can't figure a way to display a whole new page, login page for example, without having all the persistent elements (top-bar, side-bar, etc...). Is there a way to have some sort of a "outer level" router outlet to control the navigation between the pages. Thank you in advance

Edit, here is the router:

const routes: Routes = [
  { path: '', redirectTo: 'boards', pathMatch: 'full' },
  { path: 'boards', component: BoardComponent },
  { path: 'boards/:boardId', component: BoardComponent },
]

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
router-outlet angular router
2 Answers

Let suppose you have your router-outlet in app.component.html

<div class="top-half">
    <app-top-bar></app-top-bar>
</div>

<div class="bottom-half">
    <app-sidebar></app-sidebar>
    <router-outlet></router-outlet>
</div>

In the app.component.ts file,make a getter for accessing the current route in real time using the below code snippet.

import { Component, OnInit } from '@angular/core';
import {Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
 
  constructor(private router: Router) { }

  ngOnInit(): void { }
  
   get getCurrentURL() {
    return this.router.url;
  }
}

Then apply the logic in app.component.html to show and hide the Navbar and Sidebar

<div class="top-half"  *ngIf="!getCurrentURL.includes('/login')">
      <app-top-bar></app-top-bar>
  </div>
  
  <div class="bottom-half" *ngIf="!getCurrentURL.includes('/login')">
      <app-sidebar></app-sidebar>
      <router-outlet></router-outlet>
  </div>

It will not render navbar and sidebar when the /login route is active. Note: The entire implementation has nothing to do with protecting routes.

user_152823850

You can also to have nested <router-outlet></router-outlet>

Imagine your app.component is like

<router-outlet></router-outlet>

And have a main.component in the way

<nav>
    Your navigation
</nav>
<router-outlet></router-outlet>
<footer>The footer</footer>

You can have a routes defined in the way:

const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent,
  },
  { path: 'no-login', component: NoLoginComponent },
  {
    path: '',                     //see the path:''
    component: MainComponent,
    children: [
      { path: 'boards', component: BoardsComponent },
      { path: 'boards/:boardId', component: BoardComponent },
      { path: 'anothers', component: AnothersComponent },
      { path: 'anothers/:boardId', component: AnotherComponent },
      {
        path: '',                //see how we force that if path=''
        redirectTo: '/boards',   //redirect to board
        pathMatch: 'full',
      },
      //instead of redirect you can also to have
      //{ path: '', component: DefaultComponent}
      //and path='' show the <nav></nav>
      //                        <default-component>
      //                     <footer>
    ],
  },
  {
    path: '**',
    redirectTo: '/boards',
    pathMatch: 'full',
  },
];

I put the example in this stackblitz

See that, e.g. if you navigate to board really you has in your .html some like(*)

<my-app>
  <router-outlet></router-outlet>
  <app-main _nghost-btb-c57="">
      <nav>...your navigation..</nav>
      <router-outlet></router-outlet>
          <app-boards></app-boards>
      <footer>..the footer..</footer>
  </app-main>
</my-app>

(*)Understand that the only indicate where are this

user_85581860
Related