title: How to Know Which component is loaded in router-outlet in Angular 5 and above
body: <p>This my ap.component.html</p>
  
  <pre><code>&lt;app-header&gt;&lt;/app-header&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;app-footer&gt;&lt;/app-footer&gt;
  </code></pre>
  
  <p>How to know which component is loaded in Router outlet and then add a class on header or body depending on the component. </p>
  
  <p>Just Like if Home is loaded then add a home class on the body. or if 404 page then notfound class on body</p>
  
  <p>My Routing  </p>
  
  <pre><code>const routes: Routes = [
    { path: '' , component: HomeComponent},
    { path: 'directory' , component: DirectoryComponent },
    { path: 'directory/:slug' , component: DirectorySingleComponent },
    { path: 'pricing' ,component: PricingComponent },
    { path: 'services' , component: ServicesComponent },
    { path: '', pathMatch: 'full', redirectTo: '/' },
    { path: '**', component: NotfoundComponent}
  ];
  </code></pre>