Angular Tutorial - 25 - Route Parameters
ฝัง
- เผยแพร่เมื่อ 7 ก.พ. 2025
- 📘 Courses - learn.codevolu...
💖 Support UPI - support.codevo...
💖 Support PayPal - www.paypal.me/...
💾 Github - github.com/gop...
📱 Follow Codevolution
Twitter - / codevolutionweb
Facebook - / codevolutionweb
📫 Business - codevolution.business@gmail.com
Angular | Angular Tutorial for Beginners | Route Parameters in Angular
CodeEvolution Team Thank you so much for this series on Angular Tutorial 7. I have been learning so much from your videos. Very detailed tutorial with right examples. The order of topicsThe brief introduction about each concept before jumping in to examplesChoosing the right examples Giving away information only that is needed without overwhelming the learnerGood practices, recommendationsAnd above all ..all for free for people who cannot afford for online courses.Amazing!! Thank you for taking so much time to put everything together. I see there is so much work behind this!Thank you!
I am working through all the videos in this series. Your delivery is excellent!
Dude, thank you for this useful video without “extra water”
If anyone's facing a problem with this error:
Error: src/app/department-detail/department-detail.component.ts:17:23 - error TS2345: Argument of type 'string | null' is not assignable to parameter of type 'string'.
Type 'null' is not assignable to type 'string'.
Use this:
parseInt(this.route.snapshot.paramMap.get('id') as string)
instead of this:
parseInt(this.route.snapshot.paramMap.get('id'))
can't explain the theory behind this, but it works for current versions
broo thank you so much
thank you
thank you
You solved my error. Thank you brother. 😊
thanks bro
Very very very good, my friend! God bless you and your family!
Watching these videos at 1.25x speed really helps ... :) Thanks for good tutorials
I usually listen at 1.5x xD
thanks for your tutorials, ver nace im learning a lot
This is the best tutorial of angular 7 I have ever seen
Accurate 100% that I was looking for... Thank you
Awesome Video Tutorials for Angular Beginners. Easy to understand. Thanks Vishwas.
you helped me so much , many thanks for you man
i finally get it... this part took a little longer to understand!
This is an excellent tutorial thanks
Thank you for the video. Great one
Completely understand. Thank you!
Amazing content, thanks!
thank you it really helps
Thank you so much sir.
Great explanation. Kudos
thanks, you have a good voice
I don't understand a thing. How did you do to make the names clickable? I did the same thing that you did in the video but nothing. Did you modified the app.component.html? Please someone answer me.
the best explanation ever,
i have a question: what is the difference between :
this.departmentId = parseInt(this.route.snapshot.paramMap.get('id'));
and
this.route.paramMap.subscribe(params => {
this.departmentId = params.get("id")
})
thank you
ayo Ninos, do you know the difference already? :c
Difference is the second one works in Angular 9 x)
parseInt(this.route.snapshot.get('id') always get error but when removing parseInt no error comes but data not displayed after passing id in url , page not found open, but in console data comes
hello, thank for Vishwas because your video i can learn about angular. maybe i just suggest for you, you can give subtitles english on your videos. because
I am not fluent in English and i think have people like me, little confused. i hope you or somebody can help add subtitles on your videos.
i feel this channel help me and thanks for Vishwas. Good Luck !!!
Thank you very much, helped me a lot!
Good one realy nice .. my kind of person understand easily. Thanks alots
Hi. Thank you for the video. Great one.
But what if I need to use two parameters?
Without a doubt, the best Angular tutorials ,
but I wonder if such a mechanism exists
in the Wordpress system, it reminds me on
Blog page with all its posts.
You saved my weeks)))
good tutorial awesome man
Awesome video thank you so much
awesome merci
شكرا جدا
Excellent bro
Awesome tutorial thank you...
Thank you !
Thank you very much
Good video
Thank you very much! But you can enable auto subtitles for all videos in Angular 6 Tutorial
You're the Best
am getting the errorat point 3:47 as :
1] unexpected closing tag
2] opening tag not terminated.
please any1?
just restart vs code
Changing navigation on same component but data is not getting change.
How do you past the rest of the properties to display on the department detail component?
Angular 8 Tutorial - 25 - Route Parameters : Why do we need to restart nodejs/angular when we use activated route , AOT or hot reload doesnt work when we are using activated route
can u enable auto-subtitles for this video? the first 24 videos they have :D
Awesome video. Can you please explain why colon ':' is required before id placeholder
it means compulsory . for optional we write :id?
Please make series on Angular 12
Why can't we directly use routerLink="['departments',department.id] in the department-list, instead of using click event.
Please clarify
can use 2 method
1. route navigate by programmatically show in this video onSelect(department: any) {
this.router.navigate(['/departments', department.id]);
}
2. route navigate by syntax [routerLink]="['departments',department.id]
am not able to understand why wud u need an ID for the department when it already has a distinct name...kindly clarify.
what would be the practical application of this ?
I have problem router with params, can you help me to solve problem with message error "NG04014: Invalid configuration of route '/departement/:id': path cannot start with a slash"
why did you not use this.departmentId = parseInt(this.route.snapshot.paramMap.get('id'));
Pls make video on login authontication
Login authentications is simple. You can use Bearer Token based authentication. And you call it using /token with username & password and access data thourgh api using the toekn
can't display the department list code are same as you right
Hello sir. I am getting an error saying Parameter 'department' implicitly has an 'any' type. If I put department: any, then its showing blank.
Please help.
What if you want to put the name instead of the id?
paramMap doesn't work for me and neither parseInt as used in the video (requires @param s (A string to convert) , radix (A value between 2 and 36))
const id = parseInt(this.route.snapshot.paramMap.get('id').toString(), 10);
this.departmentId = id;
Can you use router to create a link that dynamically points to rest api in back end? for example in case of a put request?
Zabardust Master Ji
HI Sir,
Can you tell me how you were able to make the array of departments in the department-list component as clickable? I can only able to see the plain text. It is not clickable.
(click)="onSelect(department)" this is making it clickable
hey your CSS file is empty is the GIT HUB REPO, kindly provide it
Thanks for video i have learned a lot from this playlist
I have one doubt.. you have used navigate method i have done same with routerlink (dynamic binding [routerLink] ="['department', department.id]" )
Its working same
Could you please let me know what is difference between these two
There is no major difference.if you have some complex logic in typescript file and do navigate go for navigate otherwise you just use routerLink in html
How do i route to a new page without the old contents on it?
Thank's for this tutorial;
how to pass other parameter like name etc...? if anyone know the answer?!
replace the word "id" with "name" in all the places except the array
Great
What is the purpose of keyword snapshot
Nice videos .
Can you please post some on cascasding interceptors and doing error hadling and authentication and authorization in them..
but when we enter localhost:4200/departments/6 it also works. how to restrict that if we put wrong id in Url then it show page not Found instead of showing department detail works.
Its because your route is correct. You need to check into your code if department id with 6 exists in the database. If not then redirect to not found
@@Prakash8083 how can i do that?
do you recommend to watch your old playlist on angular2?
Watch it for the forms tutorials as they are pretty much the same and I will not cover that in this series.
Hey, some route attribute that if the current page is home, show 'abc', if it's department page, show 'efg'?
how to pass more info like whole new page? not like id and new extra lines..
I am getting this error: property 'snapshot' doesn't exist on type "typeOf ActivatedRoute"
how to solve this issue. plz help
I would suggest checking for typos or property. Check your import, constructor, and method of the page using it.
How to get all the details of selected ID in detail page ?
everything is ok witrh one parameter but how to pass two parameter, as u have name 'n' age in json file, how to display those . please make a video or tel us shortly
I am not able to click on angular mongodb etc please help me itsurgent
in a real application is it good to show the id of the objects?
Very generic question with many possible answers.
If you are displaying items to user, he/she can refer to id when communicating with you.
If you have not secured your services enough, it does not matter for hacker if you hide id from him - and you will most probably complicate your life. Surely, you can expose some long hash instead of id, (hacker will still know unique identification of that item), but you will make "brute force" attack not much funny - and that can also be made less funny by limiting requests count for stupid example.
So it is nor good, nor bad, highly dependant on many factors.
First of all thanks for this awesome tutorial, I have tried this code and it's working on localhost only, Not working on a live server. any idea?
How to write that css?
I'm getting an error as template parse error.
What about of other value of same I on detail page?? Like "name, age"....
this.router.navigate(['game', { queryParams: {width:width, height:height}}]
It didn't work for me, I got {{departmentId}} dispalyed like this in the screen
oups I just missed one }
angular 6 was released on march, how did you get in Jan for tutorials ?
He have already said that this is actually ang 5 but inorder to get the most out of the videos, he have given it the title of 6
let id= parseInt(this.route.snapshot.paramMap.get('id'))
in the same part If I want to parse String "name " how can I do? please help
let name = this.route.snapshot.paramMap.get('name')
how i can send all data to detail page?
You can do that with a service. Google it :)
How can I pass an object? 🤔
Argument of type 'string | null' is not assignable to parameter of type 'string'.
Type 'null' is not assignable to type 'string'.
let id = parseInt(this.route.snapshot.paramMap.get('id'));
Getting error. Can anyone help?
this.route.paramMap.subscribe(params => {
this.departmentId = params.get("id")
})
this will work ........
let id = Number(this.route.snapshot.paramMap.get('id'));
THANKSSSSSS@@sanketmane4026
@@sanketmane4026 was facing the same problem, thank you, your solution has fixed it. I'm still curious why parseInt does not work in this particular situation though.
How to set it to redirect to PageNotFound when accessing localhost:4200/departments/6?
Its because your route is correct. You need to check into your code if department id with 6 exists in the database. If not then redirect to not found
You should show the style.css file
Argument of type 'string | null' is not assignable to parameter of type 'strin
g'.
i used all your service tutorial from there add this
public employees: Array = [];
public departmentId;
constructor(private _employeeService:EmployeeService, private _activeRoute:ActivatedRoute) { }
ngOnInit(): void {
let id = parseInt(this._activeRoute.snapshot.paramMap.get('id'));
this._employeeService
.getEmployees()
.subscribe(data => this.employees = data);
}
Gracias que compre mi tarjeta 1060 6GB antes de la crisis me salio en 4500 mxn
items and badge class is not working for Angular 6/7. I see that the replacement is "badge badge-primary" and "list-group" but you got click functionality.. which is not happening in my case.
CSS is not part of Angular versions. Make sure you have the CSS copied from the github repo.
@@Codevolution I have the same issue so, do you mean to copy the original Bootstrap CSS from github into the angular application style file? or is there any other style file in specific that you are using? cause I have imported the bootstrap css file but the list does not look like yours, I can not even click on it :/ Thanx!
which book you recommend for angular?
his videos are better than books.
If anyone is getting weird css errors you can try editing the .item .badge by adding flaot: left; (and removing display: inline-block;)
I've got a question please:
I tried to get the name too but *const name = this.route.snapshot.paramMap.get('name');* didn't work, I get *null* in the console and I don't know why.
Thank you for this amazing series!
const statement values can be assigned once and they cannot be reassigned so i would use let for the id value because the value of id can be changed very easy
Can anyone help me out?
please add subtitles
After this video i feel my iq growed for 10 more
your explanation is top-notch but the fake accent is bothering me
no no no m sorry this tutorial failed u're just saying the steps you're making outloud
ure not explaining anything , i ve been repeating this for 5 days now and i cant get to the point where i can do every step uunderstanding why m doing it without look to the tutoriAL and jump through files while understanding why m doing that
Does anyone knows how to change the parameters as name selected instead of the id? I have tried the following method with no error but but nothing shows.
onSelect(department) {
this.router.navigate(['/departments', department.name]);
}
public departmentId="";
ngOnInit() {
this.departmentId = this.route.snapshot.paramMap.get('name');
}
Thank you @Codevolution for this amazing series! Your explanation is very simple and clear!
I got an error in departmentDetails.components.ts file in
ngOnInit(): void {
let i = parseInt(this.route.snapshot.paramMap.get('id')) as number; //this line
this.deptId = i;
}
Error : Argument of type 'string | null' is not assignable to parameter of type 'string'.
Type 'null' is not assignable to type 'string'.
Could someone please help? Thanks in Advance!!!
@Shubham Gupta God bless you
Use this:
parseInt(this.route.snapshot.paramMap.get('id') as string)
instead of this:
parseInt(this.route.snapshot.paramMap.get('id'))
let id = JSON.parse(this.route.snapshot.paramMap.get('id')!);
this might help