CODEWITHSUNDEEP
angularangular-routingangular-router
dave2118
dave2118

Reputation: 203

How can I have standard header/footers on part of an angular website?

We are working on a site that has a public / protected area where the headers and footers are different.

/src
   /app
       app.module.ts
       app-routing.ts
       app.component
       /pub
           pub.component.ts
           pub-routing.module.ts
           pub.module.ts
           /aboutus
              aboutus.component.ts
       /priv
           priv.component.ts
           priv-routing.module.ts
           priv.module.ts
           /foo
              bar.component.ts

What I can't figure out is how to put a header / footer in pub.component.ts which is inherited by aboutus.component.ts.

If I navigate to /pub, the header and footer shows up, but going to /pub/aboutus only displays the content in that component.

-------------
pub.module.ts
-------------

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PubRoutingModule } from './pub-routing.module';
import { PubComponent } from './pub.component';

@NgModule({
  declarations: [
    PubComponent
  ],
  imports: [
    CommonModule,
    PubRoutingModule
  ],
  exports: [
    PubRoutingModule
  ]
})
export class PubModule { }

---------------------
pub-routing.module.ts
---------------------

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { PubComponent } from './pub.component';
import { AboutUsComponent } from './aboutus/aboutus.component';
const rootRoutes: Routes = [
  { path: 'pub', component: PubComponent },
  { path: 'pub/aboutus', component: AboutUsComponent }
];
@NgModule({
  declarations: [AboutUsComponent],
  imports: [
    RouterModule.forChild(rootRoutes)
  ],
  exports: [RouterModule]
})
export class PubRoutingModule { }

----------------------
pub.component.ts
----------------------

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

@Component({
  selector: 'app-pub',
  template: `<p>Heading</p><router-outlet></router-outlet><p>Foot</p>`
})
export class PubComponent implements OnInit {
  constructor() { }
  ngOnInit(): void {
  }
}

Upvotes: 0

Views: 1661

Answers (1)

Akirus
Akirus

Reputation: 574

You need to have the aboutus part be a child route of pub for the router-outlet to show the content of the component while maintaining the header/footer from the parent component.

Stackblitz example - change the path to /a/b to test

Upvotes: 1

Related Questions