Angular Route

The Angular routing is used to navigate from one view to another view.
OR
The Angular routing is used to navigate one page to another page.

@angular/router is a route library package in Angular which is include into routing module file like app-routing.module.ts file.

import { RouterModule, Routes } from '@angular/router';

Suppose, You have users component which has number of users information.
So firstly include users component in routing module file.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UsersComponent } from './users/users.component';

const routes: Routes = [
  { path: 'users', component: UsersComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Now, open the url on the browser

http://localhost:4200/user

Now, you can see the output

Router Link is used into the anchor tag to the navigation into the angular component view file like app-component.html

<a [routerLink]='["/users"]'>Users</a>

Note:- If you use href attribute into the anchor tag instead of routerLink then page will be load.

Activated Route is used to access the route’s parameters.
OR
If you have routes parameters and you want to access into the component typescript file through ActivatedRoute

There are some steps to use Activated Routes.
Step1) Suppose you define route parameter user_id into the routes array into route module file like (app-routing.module.ts) file.

const routes: Routes = [
  { path: 'users/:user_id', component: UserDetailsComponent }
]

Step2) Firstly import the ActivatedRoute class into the @angular/router into the angular component file like app-component.ts file.

import { ActivatedRoute } from '@angular/router';

Step2) Now, Inject the ActivatedRoute class into Angular component’s class through the the constructor.

constructor(private activatedroute: ActivatedRoute) { }

Step3) Now, get the parameter user_id value into the constructor.

export class UserDetailsComponent implements OnInit {

  user_id:number | undefined;
  constructor(private activatedroute: ActivatedRoute) { 

    this.activatedroute.params.subscribe(params => {
      this.user_id = params['user_id'];
    });
  }

  ngOnInit(): void {
    alert(this.user_id);
  }

}

Step4) Now run the URL on the browser.

http://localhost:4200/users/120

Step5) Now, get the output on the browser after run the above URL.

Wildcard route is used to handle the invalid URL in the Angular Application.
OR
If the Angular route does not exists and you run this route then you will get the below error

You can handle this situation through wildcard route which has two asterisks(**).

Suppose, You created a component like PageNotFoundComponent.

Now, add the wildcard route into app-routing.module.ts file along with component PageNotFoundComponent

import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
const routes: Routes = [
  { path: '**', component: PageNotFoundComponent }
]

Now, run any url, which does not exists into the routes array.

http://localhost:4200/test

Now, get the output on the browser.