In this video we are going to learn about Route Parameters.
Route parameters are parameters whose values are set dynamically in a page's URL.
This allows a route to render the same component while passing that component the dynamic portion of the URL.
So that it can change its data based on the parameter.
We can also pass a parameter with the route
So lets see how can we pass parameter in angular 10.
Before passing the parameter just create a new component.
So switch to the command prompt and just type the command.


ng g c components/user


Now switch to the project and just open app-routing.module.ts and import the user component.


import {UserComponent} from './components/user/user.component';


Now add this UserComponent to the route.


const routes: Route = [
{
    path:'user/:name',
  component:UserComponent.
}
]


Now go to the user.component.ts file and here just import the following.


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

export class ContactComponent implements OnInit {
  name='';
  constructor(private route: ActivatedRoute) { }
  ngOnInit(): void {
    this.name = this.route.snapshot.params.name;
  }
}


Now lets display this this name to the user.component.html file.
So just open user.component.html file and just write here.


<h1>{{name}}</h1>


Alright now lets check it.
So switch to the browser and go to the url /user/Jennifer.
Now press enter.
You can see the name.
If change the name.
Let say Peter.
You can see the name.
So in this way you can add parameter in angular 10 router.