Angular Tutorial - 25 - Route Parameters

[@sandoc123]

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!

[@iancarr3923]

I am working through all the videos in this series. Your delivery is excellent!

[@_Rand0mStalker]

Dude, thank you for this useful video without “extra water”

[@sreeramreddyvelagala6952]

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

[@AHari-uu1tn]

broo thank you so much

[@Kiwi_the_shihtzu]

thank you

[@saikadali7779]

thank you

[@hardikrana5946]

You solved my error. Thank you brother. 😊

[@ceddh15]

thanks bro

[@gopalg980]

Watching these videos at 1.25x speed really helps ... :) Thanks for good tutorials

[@simpleway2022]

I usually listen at 1.5x xD

[@carlosfabio2]

Very very very good, my friend! God bless you and your family!

[@vittorio9449]

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.

[@TheShbh2011]

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

[@piyushsharma5373]

This is the best tutorial of angular 7 I have ever seen

[@ChanoTSG]

thanks for your tutorials, ver nace im learning a lot

[@suvendubiswal6820]

Accurate 100% that I was looking for... Thank you

[@famahelene_]

Hi. Thank you for the video. Great one. But what if I need to use two parameters?

[@shantanu9433]

Awesome Video Tutorials for Angular Beginners. Easy to understand. Thanks Vishwas.

[@ninosalkaton4461]

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

[@jacques_ev4712]

ayo Ninos, do you know the difference already? :c

[@EvilInsideYEA]

Difference is the second one works in Angular 9 x)

[@sagarlodh6491]

am getting the errorat point 3:47 as : 1] unexpected closing tag 2] opening tag not terminated. please any1?

[@himanshubalodi3941]

just restart vs code

[@lxdzii]

i finally get it... this part took a little longer to understand!

[@esakkis9727]

Why can't we directly use routerLink="['departments',department.id] in the department-list, instead of using click event. Please clarify

[@vanzinvestor]

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]

[@JunaidKhan-zm2ce]

This is an excellent tutorial thanks

[@abdillahfahime6194]

you helped me so much , many thanks for you man

[@javiergg5977]

can u enable auto-subtitles for this video? the first 24 videos they have :D

[@ndmaru8518]

Completely understand. Thank you!

[@srinivaspatnala696]

Thank you for the video. Great one

[@souvikc37]

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?

[@himanshubalodi3941]

this.route.paramMap.subscribe(params => { this.departmentId = params.get("id") })

[@sanketmane4026]

this will work ........ let id = Number(this.route.snapshot.paramMap.get('id'));

[@Glowupy126]

THANKSSSSSS@@sanketmane4026

[@thejasiliemetha6350]

@@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.

[@abhaydhars]

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

[@someshnukala804]

Thank you so much sir. Great explanation. Kudos

[@vinothkumars7421]

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.

[@karandeepkamboj3787]

(click)="onSelect(department)" this is making it clickable

[@thegamerz5034]

Amazing content, thanks!

[@lexiaontube]

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))

[@milanzivanov6279]

const id = parseInt(this.route.snapshot.paramMap.get('id').toString(), 10); this.departmentId = id;

[@abdullahhamzan2159]

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"

[@ahsanbaloch9126]

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.

[@Prakash8083]

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

[@abdulhadilababidi8052]

@@Prakash8083 how can i do that?

[@anjasmaradwissetiadi326]

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 !!!

[@X-AEA-12]

How do you past the rest of the properties to display on the department detail component?

[@ayoubanbara1685]

thanks, you have a good voice

[@pkbaweja007]

What about of other value of same I on detail page?? Like "name, age"....

[@Prakash8083]

this.router.navigate(['game', { queryParams: {width:width, height:height}}]

[@vishalanand2936]

Good one realy nice .. my kind of person understand easily. Thanks alots

[@vik8860]

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?

[@johnlauricefarmaccount8014]

thank you it really helps

[@vntmadan]

why did you not use this.departmentId = parseInt(this.route.snapshot.paramMap.get('id'));

[@bipinsinghrawat4695]

Changing navigation on same component but data is not getting change.

[@viktorlernt6063]

Thank you very much, helped me a lot!

[@AmanNidhi]

do you recommend to watch your old playlist on angular2?

[@Codevolution]

Watch it for the forms tutorials as they are pretty much the same and I will not cover that in this series.

[@malinmalindic8582]

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.

[@shubhambhure8171]

I am getting this error: property 'snapshot' doesn't exist on type "typeOf ActivatedRoute" how to solve this issue. plz help

[@IronMan-wz8dx]

I would suggest checking for typos or property. Check your import, constructor, and method of the page using it.

[@vishtrinity]

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 ?

[@havefun5519]

Hey, some route attribute that if the current page is home, show 'abc', if it's department page, show 'efg'?

[@ritsk4338]

Awesome video. Can you please explain why colon ':' is required before id placeholder

[@gargraghav1234]

it means compulsory . for optional we write :id?

[@thanho7479]

Thank you very much! But you can enable auto subtitles for all videos in Angular 6 Tutorial

[@harshamandloi394]

can't display the department list code are same as you right

[@pavak7539]

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.

[@riddhipatel2578]

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

[@vanipentyala2116]

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

[@babacar221]

Thank's for this tutorial; how to pass other parameter like name etc...? if anyone know the answer?!

[@spectrefzier4626]

replace the word "id" with "name" in all the places except the array

[@VaVathana-co3nh]

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

[@simon_situ]

let name = this.route.snapshot.paramMap.get('name')

[@karthikeyanns843]

hey your CSS file is empty is the GIT HUB REPO, kindly provide it

[@vjoshiscs]

Pls make video on login authontication

[@Prakash8083]

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

[@khaledmohsen2724]

good tutorial awesome man

[@diego.coder26]

in a real application is it good to show the id of the objects?

[@ThePainkiller347]

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.

[@MrAlliqator]

how i can send all data to detail page?

[@xhonato5685]

You can do that with a service. Google it :)

[@abhishekbhardwaj7684]

angular 6 was released on march, how did you get in Jan for tutorials ?

[@akhilsuresh9536]

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

[@ToDeoS]

How to set it to redirect to PageNotFound when accessing localhost:4200/departments/6?

[@Prakash8083]

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

[@rahulmathew8713]

Awesome video thank you so much

[@houseservice636]

What if you want to put the name instead of the id?

[@Federation1323]

You saved my weeks)))

[@dishantvashistha2038]

Zabardust Master Ji

[@PremKumar-lc1hi]

Awesome tutorial thank you...

[@yosiefberhe4974]

How do i route to a new page without the old contents on it?

[@Glowupy126]

It didn't work for me, I got {{departmentId}} dispalyed like this in the screen

[@Glowupy126]

oups I just missed one }

[@arnabdas7145]

how to pass more info like whole new page? not like id and new extra lines..

[@manikantanomula3096]

Excellent bro

[@ai.aspirations]

awesome merci

[@anavaratha7020]

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

[@deepakdagar_change_is_in]

Nice videos . Can you please post some on cascasding interceptors and doing error hadling and authentication and authorization in them..

[@seemazanvar9323]

Please make series on Angular 12

[@harkiratsingh9071]

I am not able to click on angular mongodb etc please help me itsurgent

[@lonelynik]

How to get all the details of selected ID in detail page ?

[@TheBodysome]

If anyone is getting weird css errors you can try editing the .item .badge by adding flaot: left; (and removing display: inline-block;)

[@ايمانعبدالقادر-ص9خ]

شكرا جدا

[@sairammullapudi6658]

What is the purpose of keyword snapshot

[@aheteshamshaikh9743]

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?

[@learnwithankit3582]

How to write that css?

[@IvanProsic]

Thank you very much

[@scottsmyth3251]

Thank you !

[@MinimSan]

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'); }

[@saurabhsuman4960]

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.

[@Codevolution]

CSS is not part of Angular versions. Make sure you have the CSS copied from the github repo.

[@josefam20]

@@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!

[@sridhars9161]

I'm getting an error as template parse error.

[@RastafarTV]

Good video

[@anasfarih]

You're the Best

[@dailyproviders5606]

which book you recommend for angular?

[@devenshah3653]

his videos are better than books.

[@loco7051]

Gracias que compre mi tarjeta 1060 6GB antes de la crisis me salio en 4500 mxn

[@pudulls]

How can I pass an object? 🤔

[@alexandersantosablaza7033]

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); }

[@viniciuslublanskiferreiral5406]

You should show the style.css file

[@irenazlo5173]

After this video i feel my iq growed for 10 more

[@bilaldev6770]

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!

[@mitetaskov19]

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

[@simpleway2022]

Great

[@sridhars9161]

Can anyone help me out?

[@vijaysachdeva6147]

please add subtitles

[@mayankdhyani1787]

your explanation is top-notch but the fake accent is bothering me

[@nohael-deeb5830]

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

[@AnonymousPandaPanda]

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!!!

[@tarekjrd75]

@Shubham Gupta God bless you

[@jaypatel2471]

Use this: parseInt(this.route.snapshot.paramMap.get('id') as string) instead of this: parseInt(this.route.snapshot.paramMap.get('id'))

[@PrasannaDangol]

let id = JSON.parse(this.route.snapshot.paramMap.get('id')!); this might help