changing header based on URL in Angular

Question

in my application I have two apps inside, first one is Basic which has routes like: localhost:4200/form, localhost:4200/reports, localhost:4200/views, but now I have now on the second which is Advanced, I want to set routes like: localhost:4200/advanced/views localhost:4200/advanced/forms and the header should be different as well.

here is my app-routing.module.ts:

  const routes: Routes = [
      { path: 'report', component: ReportComponent },
      { path: 'form', component: RequestFormComponent},
      {
        path: 'advanced',
        component: AdvancedLevelComponent,
      },
      { path: 'aform', component: PmCustomerFormComponent }

    // I have tried: 
    {
        path: 'advanced',
        component: AdvancedLevelComponent,
        childern:[
            {{ path: 'aform', component: PmCustomerFormComponent }}
        ]
      },
      // but it it asks for <router-outlet></router-outlet> in that component and hence it 
render view in same page, I want it be like go to new page with URL: /advanced/aForm

and my header file:

<mat-toolbar>
  <img [src]="logo" class="logo" routerLink="/mainpage">
  <span class="title">
   Basic
  </span>
</mat-toolbar>
<mat-toolbar *ngIf="router.url==='/advanced'">
  <img [src]="logo" class="logo" routerLink="/mainpage">
  <span class="title">
  Advanced
  </span>
</mat-toolbar>

but route.url only works for the main advanced page not for it sub pages

Why dont you just catch your route and if it match to for example "advanced..." put some header else the other header? that what I do in my applications. there is no other way to deal with it. — Talg123
– Talg123, Commented Feb 8, 2019 at 8:00

Muhammad Ali · Accepted Answer · 2019-02-08 09:03:09Z

2

I have fixed it:

in your header.ts

import {Location,LocationStrategy,PathLocationStrategy } from '@angular/common';

and

   @Component({
     providers: [
     Location,
     { provide: LocationStrategy, useClass: PathLocationStrategy }
     ]
)}

and create function like:

isAdvancedRoute(): boolean {
        return this.location.path().indexOf('/advanced') > -1;
      }

finally at

.html

*ngIf="isAdvancedRoute()"

answered Feb 8, 2019 at 9:03

Muhammad Ali

3697 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

changing header based on URL in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related