Get current component name

Question

Is that possible to get current component name?

for example if I have localhost:3000/en/mycomponent and I'll to this.router.url it returns /en/mycomponent which is /language/component

I want to make redirect on language change.

I can make

this.router.navigate([this.lang, my component here]);

But how can I get current component from routing?

Answer 1

Angular CLI:

You can access the component name from the constructor:

 console.log('this', this.constructor.name);

 this.constructor.name; // Component name

Answer 2

You may get the component name like below,

export class MyComponent{

  constructor(
    private route: ActivatedRoute,
    private router: Router
  ) {
    // Below will result in MyComponent
    console.log(this.route.component.name);         
  }
}

Having said that Routing is based on path rather the component name.

Hope this helps!!

Answer 3

Angular 8

This returns name of current Component each time, the shown Component changes.

constructor(private router: Router) {
    router.events.subscribe((val) => {
        if (val instanceof ActivationEnd) {
            console.log('componentName', val.snapshot.component['name']);
        }
    });
}

Answer 4

Best way to get the component name is using the constructor.

this.constructor.name

Answer 5

Only that component name isn't enough.. you may want the additional options and so on..

If the first segment is always your language, do it like this:

let urlSegments = this.route.url.split('/');
urlSegments[1] = this.lang;
this.router.navigate(urlSegments.join('/'));

Answer 6

You can get the current component name from the 'ActivatedRoute' module like this:

    const compName = this.activatedRoute.snapshot.routeConfig.component.name;

use the above either in onInit or constructor call. It's working fine in angular 6+. Not sure about the older versions.

Answer 7

You can get the component name with dot notation like that:

let state: ActivatedRouteSnapshot = routerState.root;

while (state.firstChild) {
  state = state.firstChild;
}

const stateComponent = <any>state.component;
const component = stateComponent ? stateComponent.name : '';

Answer 8

It is possible, but in a production build the name will differ from during dev, so don't use it for anything valuable

If you need to check 'which' component is currently in the route for example it's best to use typeof rather than checking for the name

const onComponent = typeof this.activatedRoute.snapshot.routeConfig.component === typeof MyCustomComponent

Answer 9

To get the current component I use this code for Angular 13:

import { ActivationEnd, Router } from '@angular/router'; 

constructor(private router: Router) { }

ngOnInit(): void {
 this.router.events.subscribe((val) => {
   if (val instanceof ActivationEnd) {
      const [,componentName] = val.snapshot.component.toString().split(" ");
      console.log(componentName);
   }
  });
 }

Answer 10

@Madhu Ranjan answer.

His approach will not work with dot notation. We will get an error like, Property 'name' does not exist on type 'string'.

As it expects component to be string. As we used dot notation. On top of that, we are accessing a name string property on component string.

As dot notation expects everything to be string after dot. But here in route.component.name (component.name is not a string). It will try to find component.name on route object.

So it's better to go with bracket notation in this case.It will evaluate and convert given expression to string.As component is a function on route object.

When I tried with:

console.log('current component rendered', route.['component']['name']);
                    or
console.log('current component rendered', route.component['name']);

I was successful in getting component name.