How to Know Which component is loaded in router-outlet in Angular 5 and above

Question

This my ap.component.html

Answer 1

header.component.html

routing

...
  { path: 'services' , component: ServicesComponent },
  { path: '', pathMatch: 'full', redirectTo: '/' },
  { path: '**', component: NotfoundComponent , data: { status : 'notfound'}}
];

header.component.ts

 ngOnInit() {
    this.isNotFound = false;
    this.router.events
        .filter(e => e instanceof NavigationEnd)
        .subscribe(event => {
          this.isNotFound = this.route.firstChild.data._value.status;
          if (this.isNotFound) {
            this.isNotFound = true;
          }
        });
  }

First, I sent data only to the notfound component then received it on header component then using ngClass add a class on the navbar which is outside router outlet.

This is how i solved it, Though thanks for all the advice. :)