CODEWITHSUNDEEP
angular
Muhammad Ali
Muhammad Ali

Reputation: 369

changing header based on URL in Angular

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

Upvotes: 0

Views: 2228

Answers (1)

Muhammad Ali
Muhammad Ali

Reputation: 369

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()"

Upvotes: 2

Related Questions