How to have multiple headers and show specific header to specific page in Angular?

[admin]

How to have multiple headers and show specific header to specific page in Angular?

Suppose you've a Angular project in which you want your all pages should have normal header but one page, for example payment page you want to have different header which is only having a logo or any case you want different header on payment page then.

I will create About Us page and on About Us page will call normal header and on payment page will call second header.

Let's have a look on code:
app.component.html

Code: Select all

<app-header *ngIf="_router.url != '/payment'"></app-header>
<app-secondheader *ngIf="_router.url == '/payment'"></app-secondheader>
<router-outlet></router-outlet>

<br/>
On about page I want normal header and on Payment page I want second header should be shown.

app.component.ts

Code: Select all

import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  router: string;

  constructor(private _router: Router){
   this.router = _router.url; 
  }
}

app.module.ts

Code: Select all

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';



// Headers
import { HeaderComponent } from './header/header.component';
import { SecondheaderComponent } from './secondheader/secondheader.component';

// Pages
import { AppComponent } from './app.component';
import { AboutComponent } from './about/about.component';
import { PaymentComponent } from './payment/payment.component';

// Enable routing
import { RouterModule, Routes } from '@angular/router';

const appRoutes: Routes = [
  { path: 'about', component: AboutComponent },
  { path: 'payment', component: PaymentComponent },
  { path: '',
    redirectTo: '/',
    pathMatch: 'full'
  }
];

@NgModule({
  imports:      [ BrowserModule, 
                  FormsModule,
                  RouterModule.forRoot(appRoutes) ],
  declarations: [ AppComponent, 
                  HeaderComponent, 
                  SecondheaderComponent, 
                  AboutComponent,
                  PaymentComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Create about us component:
src
--app
----- about
-------- about.component.html

Code: Select all

This is about page

src
--app
----- about
-------- about.component.ts

Code: Select all

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

@Component({
  selector: 'app-about',
  templateUrl: './about.component.html',
  styleUrls: [ './about.component.css' ]
})
export class AboutComponent  {
  
}

src
--app
----- about
-------- about.component.css

Code: Select all

no css code I wrote, you can write your if required

Create payment component:
src
--app
----- payment
-------- payment.component.html

Code: Select all

This is payment page

src
--app
----- payment
-------- payment.component.ts

Code: Select all

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

@Component({
  selector: 'app-payment',
  templateUrl: './payment.component.html',
  styleUrls: [ './payment.component.css' ]
})
export class PaymentComponent  {
  
}

src
--app
----- payment
-------- payment.component.css

Code: Select all

no css code I wrote, you can write your if required

Create header component:
src
--app
----- header
-------- header.component.html

Code: Select all

<h1>This is header</h1>
<nav>
  <ul>
  <li><a routerLink="/about" routerLinkActive="active">About</a></li>
  <li><a routerLink="/payment" routerLinkActive="active">Payment</a></li>
  </ul>
</nav>

src
--app
----- header
-------- header.component.ts

Code: Select all

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

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: [ './header.component.css' ]
})
export class HeaderComponent  {
  
}

src
--app
----- header
-------- header.component.css

Code: Select all

li{
  margin:10px;
  display:inline;
}

Create second header component:
src
--app
----- secondheader
-------- secondheader.component.html

Code: Select all

<h1>This is second header</h1>
<nav>
  <ul>
  <li><a routerLink="/about" routerLinkActive="active">About</a></li>
  <li><a routerLink="/payment" routerLinkActive="active">Payment</a></li>
  </ul>
</nav>

src
--app
----- secondheader
-------- secondheader.component.ts

Code: Select all

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

@Component({
  selector: 'app-secondheader',
  templateUrl: './secondheader.component.html',
  styleUrls: [ './secondheader.component.css' ]
})
export class SecondheaderComponent  {
  
}

src
--app
----- secondheader
-------- secondheader.component.css

Code: Select all

li{
  margin:10px;
  display:inline;
}

Demo : https://angular-multiple-headers.stackblitz.io/