how to overwrite routing outlet in angular?

Question

I wants to make common layout for header, footer, left side and main content in angular 8 application.

I don't want to reload header, footer and left side every time when user navigate form one page to another page except some pages like as login, contact us.

My some basic code is like as bellow

app.componant.html

<div>
    <router-outlet name="header"></router-outlet>
    <div>
        <router-outlet name="leftMenu"></router-outlet>
        <div>
            <router-outlet name="content"></router-outlet>
        </div>
    </div>
    <router-outlet name="footer"></router-outlet>
</div>

app.routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './header/footer.component';
import { LeftMenuComponent } from './header/left-menu.component';


const routes: Routes = [
{ path: '',
    component: HeaderComponent,
    outlet: "header",
 },
 { path: '',
    component: HeaderComponent,
    outlet: "footer",
 },
 { path: '',
    component: HeaderComponent,
    outlet: "leftMenu",
 },
 { path: 'login',
   loadChildren: () => import('./login/login.module').then(mod => mod.LoginModule)
 },
{ path: 'home',
   loadChildren: () => import('./home/home.module').then(mod => mod.HomeModule)
 },
  { path: '',
    redirectTo: '/home',
    pathMatch: 'full',
  },
  //{ path: '**', component: PageNotFoundComponent }
];

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

login.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoginComponent } from './login.component';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: '', 
    component: LoginComponent,
    outlet: "content",
    children: [
     {
         path: '', component: null,
         outlet: "header",
      },
      {
         path: '', component: null,
         outlet: "footer",
      },
      {
         path: '', component: null,
         outlet: "leftMenu",
      },
       // { path: '**', component:  Page404balanceComponent}
     ]
  }
];

@NgModule({
  imports: [
    CommonModule,
    //EmptyModule,
    RouterModule.forChild(routes)
  ],
  declarations: [LoginComponent]
})
export class LoginModule { }

In home page routing it works properly with header, left menu, content and footer. But in login I don't want to display header, left menu and footer.

In ui-router we can overwrite parent inherited routing by using @ like as @content, @header but I can't overwrite like as that.

So, please help me to made this type of layout like as ui-router.

Why not just render the `` in app.component.html instead of the ``? — Jason White, Jan 29 '20 at 14:19
You’re in for a world of pain trying to use this many router outlets. Ui router was solving a problem in angularjs that is largely solved better by components in angular 2+. Your app design needs to adjust — bryan60, Jan 29 '20 at 14:20
@bryan60 : I have used ui router in angular 7 by using multiple ui views and it works properly, but in my new project in angular 8 I just want to made routing by angualr 2+ default routing. I can handle by using conditional components for header, footer and leftside menu but issue is that I will need to put all routing conditions with it. so I thought if it done by using inheritance routing concept then it nice. — laxman, Jan 30 '20 at 04:50

score 0 · Answer 1 · answered Jan 29 '20 at 14:32

You should define the static components you need. In your components define the selector, templates and styles like

@Component({
  selector: 'header-component',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css'],

})

in app-routing.module.ts:

const routes: Routes = [
    {path: 'login', component: loginComponent},
    {path: 'contacts', component: contactsComponent}
];

then in your app.component.html

<div>
    <header-component *ngIf="router.url !== '/login'"></header-component>
    <div>
        <left-menu-component *ngIf="router.url !== '/login'"></left-menu-component>
        <div>
            <router-outlet></router-outlet>
        </div>
    </div>
    <footer-component *ngIf="router.url !== '/login'"></footer-component>
</div>

You have to route between components using [routerLink]="['your-path']" in your templates.

how to overwrite routing outlet in angular?

1 Answers1