Route Parameters - Angular (Tutorial #21)
HTML-код
- Опубликовано: 25 июн 2018
- Route Parameters in Angular - Tutorial no. 21.
Sometimes we need part of the path in one or more of our routes (the URLs) to be a variable, a common example of this is an ID.
Share this video: • Route Parameters - Ang...
Watch complete FREE course here:
• Introduction- Angular ...
Lets say we have a User and each User has an ID, the URLs for each User might look like:
/user/1
/user/2
/user/3
and so on...
But a better solution is to have one route with one component called UserComponent and pass to the UserComponent the number part of the URL.
That’s called a parameterised route and we would implement it like so:
const routes: Routes = [
{ path: 'user/:id', component: UserComponent }
];
The path has a variable called id, we know it’s a variable since it begins with a colon :
A path can have any number of variables as long as they all start with : and have different names.
ActivatedRoute: Now we will read the parameter value in userComponent using ACtivatedRoute Class . ActivatedRoute class give us a snapshot object which will return the route parameters as object
If you liked my channel , subscribe to it and like my videos. For any queries ask you question in comment section
you can also connect with me @
- Facebook: / angularjs4beginners
- LinkedIn: / nisha-singla-82407aa0
- Website :
I hope you liked this Angular tutorial. If you are a beginner and facing any trouble in understanding the Route Parameters in Angular 5, feel free to drop the comment below and I'll be happy to help you at my best.
Now am working with Angular, My friend to suggest to watch your videos, I thought it's usual but when coming in to your videos its all more n more clarity, Very proper example. It helped me a lot at this time.
*All the other RUclipsrs will show you 'how to create a ROUTE with PARAMETERS'. But here you'll learn the actual use of 'Route with Parameters'*
Amazing video. Thank you, madam. 👏
Thank you 😊
thank you Nisha for clear videos.
First i started to see just bcoz of this girl bt then i seriously started to understand and now im going to check her others videos too. Nice teacher indeed
thanks nisha , simply easily understand
Very nice @Nisha.... I was very tired to search a good video for Angular. Now I got it......Thanks So Much.
Thank you so much I got good knowledge by seeing this video
Very nice tutorial for Angular !
I found it really helpful . Your explanation is awesome .
Glad it was helpful!
Hi nisha. you're videos are awesome to start angular. please complete/update the series with sample project . thank you.
thank a lots. very very very good video
Hey nisha, you have done very nice job. Thank you. Your presenting style us awesome. So clear. But one request . I want you to to deep in it like full tutorial. N please make one series of latest angularjs full project ideas like database binding n backend+frontend data handling in VS mvc framework.
N again thank you so for your great contribution on this to us. I appreciate you to upload more n more latest videos upcoming future. Take care n god bless you.
Such a clear explanation!!!!
Thank you 🙏
Hello Nisha, That was an awesome explanation. It really helps a lot. Keep doing more videos. Thank you
😀😀
Bymistake watch this video and now I love it
Good explanation.I understood very well.Thanks a lot.
Glad to hear that
Thanks Nisha. Your all videos really awesome. Please upload lifecycle hooks and forms in angular
wow, this is amazing
Thanks :)
Very Nicely Explained. 😀
awesome video👍💖
The most confusing topic in angular, It was superb explanation i have cleared my doubt :)
Glad you liked it 😃
Thank you very much ji.......
Thanks Nisha. please upload lifecycle hooks and forms in angular5.
hi Nisha.. Thank you sooooomuch for your videos. explanation way is awesome.no one do like you. please do more vedios. thanks alot....
Good to hear Sukanya you liked it.
Impressive thanks
Thank you 😊
Mam thank you sooo much for this video this is exactly what i wanted to know...
Glad it helped ... keep learning 😀
Mam...thank you soooo much...can you be my mentor ma'am?.;Angular is my love and i have no mentor in this field
Good explanation, I like very well.... thanks a lot.......
thank you
Thanks, Nisha
this video was helped a lot. please do more on real-time project requirements
Thank you 🙏
You are awesome 👌👌
Hey thanks 😊
Thank u so much mam, it helped me a lot
😀😀
The explanation and ur voice super
9:47 , how does this work adding the id in the url..Please elaborate
superb
Nice explain
ma'am, is there is any way to hide and pass that params in angular?
Weldon behna. Keep it up
Thank you dear 😀
can you please advice me how can I link name instead of id?
How to get dynamic data. Will you give suggestions. Like first time I clicked 2 and second time I clicked 4 how to display 4 id employee data
All your video are really awesome, so much clear and so much straighTforward. Can you make a video of ngRx?
Thanks Jack 😀😀
Plz upload video about difference between the angular versions
Madam, i have gone through videos for angualrjs and angular it was superb nice to understand , thanks for your service and your youtubes , can you make videos web api with crud operations and how to deploy in IIS and also how to configure in MVC projects, which will be useful to all , thanks in advance.
Thank you
Hi... can u design a website for me using angular or bootstrap framework
Hi mam
Crud operation post kigye angular 7 with express framework
Madam...ap angular se back end(express server) ka session kaise manage karte hai..;plz make a video on that madam...plz plz plz..;
Thanks you Nisha,but I am Waiting for your next videos in the angular 4/5 series
hello nisha
can u tell me how to navigate from login page to another component
i want to press Like button 10000000+ times 😁👍
Thanks 😊 keep learning
How can i do parameter routing in routing module
HI Nisha, plz tell me in simple what is dependency injection
Hi Nisha i have one doubt...... how to handel multiple observables in single component
Your explanation is awesome. Could you please do videos for higher versions of Angular.
Thank you 😊 sure
Nisha please upload tutorials about spring and hibernet.. for beginners to advance
also please update or create new videos according to latest angular version
Hi please do video on ngrx❤️
Very nice..u post more videos
Hi Nish Ji, Plz tell me ,What is webpack in angular 2/4/5 ?
Webpack is a tool to bundle your assets together. When we create JS based application we have so many javascript files so webpack bundled them all together into single file(bundle) so that we don't need to make so many network requests to download each file
Thanks Nisha Ji
Please make video on angular Form
Hi mam,
Just because of you.i am able to understand angular but I think this not enough to crack interview.plzz mam plzz upload ( module, feature module,TDF,reactive form, observable, lazy loading).plzz upload these concept mam.
Thanks,
Will upload soon
Thanks Nisha you way of explanation is very good. Could please let me know how to itreate json array object in chaild component while passing from parent component
Thank you Rajesh. you can use service or use data to pass data to child route
hi nishisha i am very satisfying with ur videos ...is it suitable for angular 6
HI Nisha ma'm i want to learn javascript and jquary . plz share video
Thanks you Nisha,but last week you mentioned play list name was angular 4 tutorial,but now it is angular 5,I am in confusion now which version I am learning
This series will work fine for both angular 4 and 5 ,don’t worry
Hi Nisha ji your videos are good could you please do you a video on feature modules
Thanks please make bootstrap carousel video and make forms creation video
{{user.id}}
I got a typo at 'Slash'.. If anyone face same issue, they can better take this line from here..
Y did u use snapshot...it have some limitations...u should have used parammap n swichmap options.
Please upload the video about reactive form
Thanks Ranjita. Will upload it soon
@@NishaSingla Thank You Nisha
Please guide every step . And you teach method very fast make it little bit slow. Your blog is good.... do more but in detail
plz help me to build my portfolio website
please upload more vedios full angular5 course
Ma'am,
in the service class why didn't we define the method like getUser(id: number}{
return this.http.get("jsonplaceholder.typicode.com/users/:" + id)
}
instead of getUser(id:number){
this.http.get("jsonplaceholder.typicode.com/users/" + id)
}
i mean why didn't we put collon ":" before the id like URL + "/:" +id
and doing URL + "/" +id instead??????
cause generally we write a parameterized api like URL +"/:" +id
PLEASE PLEASE REPLY TO THIS QUESTION OF MINE??? PLZ PLZ ma'am...I WORK HARD Ma'am and I DONT HAVE NO ONE TO GUIDE ME..
YOU ARE THE ONLY ONE THAT I FOLLOW ON TGE RUclips WHEN IT COMES TO ANGULAR
cus its already inside ngoninit method
Hi Nisha,
As you said, -> (this.route.snapshot.params['id']) has another way of receiving the data from route, in which tutorial I can find the same ? please let me know the tutorial number.
Thanks in advance!
can you make routing video based on ngIf condition
this is my github link github.com/srikanthdasari66/omkie-app/tree/master/src
sure, will update soon
Nisha Singla please upload tutorials about spring and hibernet. You guide very clear
please make the videos on ionic with anguler and say how to use capacitor plugin.
why because is no good explanation for ionic in hole_youtube( );
Life cycle is important but there is no video on that 🙁🤔
sir can u say what is life cycle in anguler ?????
mam not working plz make another way
Ma'am,
in the service class why didn't we define the method like getUser(id: number}{
return this.http.get("jsonplaceholder.typicode.com/users/:" + id)
}
instead of getUser(id:number){
this.http.get("jsonplaceholder.typicode.com/users/ + id)
}
i mean why didn't we put collon ":" before the id like URL + "/:" +id
and doing URL + "/" +id instead??????
cause generally we write a parameterized api like URL +"/:" +id
PLEASE PLEASE REPLY TO THIS QUESTION OF MINE??? PLZ PLZ ma'am...I WORK HARD Ma'am and I DONT HAVE NO ONE TO GUIDE ME..
YOU ARE THE ONLY ONE THAT I FOLLOW ON TGE RUclips WHEN IT COMES TO ANGULAR
Ma'am,
in the service class why didn't we define the method like getUser(id: number}{
return this.http.get("jsonplaceholder.typicode.com/users/:" + id)
}
instead of getUser(id:number){
this.http.get("jsonplaceholder.typicode.com/users/ + id)
}
i mean why didn't we put collon ":" before the id like URL + "/:" +id
and doing URL + "/" +id instead??????
cause generally we write a parameterized api like URL +"/:" +id
PLEASE PLEASE REPLY TO THIS QUESTION OF MINE??? PLZ PLZ ma'am...I WORK HARD Ma'am and I DONT HAVE NO ONE TO GUIDE ME..
YOU ARE THE ONLY ONE THAT I FOLLOW ON TGE RUclips WHEN IT COMES TO ANGULAR
Ma'am,
in the service class why didn't we define the method like getUser(id: number}{
return this.http.get("jsonplaceholder.typicode.com/users/:" + id)
}
instead of getUser(id:number){
this.http.get("jsonplaceholder.typicode.com/users/ + id)
}
i mean why didn't we put collon ":" before the id like URL + "/:" +id
and doing URL + "/" +id instead??????
cause generally we write a parameterized api like URL +"/:" +id
PLEASE PLEASE REPLY TO THIS QUESTION OF MINE??? PLZ PLZ ma'am...I WORK HARD Ma'am and I DONT HAVE NO ONE TO GUIDE ME..
YOU ARE THE ONLY ONE THAT I FOLLOW ON TGE RUclips WHEN IT COMES TO ANGULAR
Ma'am,
in the service class why didn't we define the method like getUser(id: number}{
return this.http.get("jsonplaceholder.typicode.com/users/:" + id)
}
instead of getUser(id:number){
this.http.get("jsonplaceholder.typicode.com/users/ + id)
}
i mean why didn't we put collon ":" before the id like URL + "/:" +id
and doing URL + "/" +id instead??????
cause generally we write a parameterized api like URL +"/:" +id
PLEASE PLEASE REPLY TO THIS QUESTION OF MINE??? PLZ PLZ ma'am...I WORK HARD Ma'am and I DONT HAVE NO ONE TO GUIDE ME..
YOU ARE THE ONLY ONE THAT I FOLLOW ON TGE RUclips WHEN IT COMES TO ANGULAR
Ma'am,
in the service class why didn't we define the method like getUser(id: number}{
return this.http.get("jsonplaceholder.typicode.com/users/:" + id)
}
instead of getUser(id:number){
this.http.get("jsonplaceholder.typicode.com/users/ " + id)
}
i mean why didn't we put collon ":" before the id like URL + "/:" +id
and doing URL + "/" +id instead??????
cause generally we write a parameterized api like URL +"/:" +id
PLEASE PLEASE REPLY TO THIS QUESTION OF MINE??? PLZ PLZ ma'am...I WORK HARD Ma'am and I DONT HAVE NO ONE TO GUIDE ME..
YOU ARE THE ONLY ONE THAT I FOLLOW ON TGE RUclips WHEN IT COMES TO ANGULAR