title: changing header based on URL in Angular
body: <p>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.</p>
  
  <p>here is my app-routing.module.ts:</p>
  
  <pre><code>  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 &lt;router-outlet&gt;&lt;/router-outlet&gt; in that component and hence it 
  render view in same page, I want it be like go to new page with URL: /advanced/aForm
  </code></pre>
  
  <p>and my header file:</p>
  
  <pre><code>&lt;mat-toolbar&gt;
    &lt;img [src]="logo" class="logo" routerLink="/mainpage"&gt;
    &lt;span class="title"&gt;
     Basic
    &lt;/span&gt;
  &lt;/mat-toolbar&gt;
  &lt;mat-toolbar *ngIf="router.url==='/advanced'"&gt;
    &lt;img [src]="logo" class="logo" routerLink="/mainpage"&gt;
    &lt;span class="title"&gt;
    Advanced
    &lt;/span&gt;
  &lt;/mat-toolbar&gt; 
  </code></pre>
  
  <p>but route.url only works for the main advanced page not for it sub pages</p>