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 >
<app-top-bar></app-top-bar>
</div>
<div >
<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 { }
CodePudding user response:
Let suppose you have your router-outlet in app.component.html
<div >
<app-top-bar></app-top-bar>
</div>
<div >
<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 *ngIf="!getCurrentURL.includes('/login')">
<app-top-bar></app-top-bar>
</div>
<div *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.
CodePudding user response:
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