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.
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;
}
}
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 { }
src
--app
----- about
-------- about.component.html
Code: Select all
This is about page
--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 {
}
--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
--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 {
}
--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>
--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 {
}
--app
----- header
-------- header.component.css
Code: Select all
li{
margin:10px;
display:inline;
}
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>
--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 {
}
--app
----- secondheader
-------- secondheader.component.css
Code: Select all
li{
margin:10px;
display:inline;
}
Demo : https://angular-multiple-headers.stackblitz.io/