Angular Tutorial - 28 - Relative Navigation

[@irene693]

I completed the series just now, I want to say a huge Thank you!

[@SunilGupta-yy1gh]

All Videos are of less duration with very high quality. Thank you so much Vishwas.

[@ExploreWithKeerti]

Thank you for these videos , it is very helpful . You have covered almost all basic concepts.

[@engalibadouin5222]

I Ali from Egypt and pleased to get this tutorial. very big thank you Vishwas

[@jonattansalcedo6924]

Hi, I detected a bug in the code, can you tell me how to fix it? So, I'm at the "/departments" route, when I click on "Angular" it takes me to the "/departments/1" route, when I click back it takes me to the "/departments" route with the optional parameter "id=1", so everything is good so far, but when I click again to "Angular" or any other department the route keeps the old optional parameter and it adds the new id like this "/departments;id=1/2".

[@aaronmontague623]

Best I can tell, go back to the original code: this.router.navigate(['/departments', department.id]); Several searches at Stackoverflow have yielded nothing better :)

[@periklisrips4355]

Yes, I don't think that's a bug per se. The same happens to me. As far as I can tell, it's just keeping the optional id, but it still navigates to the '/departments/2'. The fact that '/2' is after the optional parameter doesn't mean anything. Because then, when you navigate back, the optional id will change to '/departments;id=2' and then you can carry on. I think Angular is smart enough to understand where the parameters part starts and ends, and where the path starts and ends. :)

[@Shapuleto]

Even if it's fully functionally, it doesn't supposed to work like that right?!

[@sonalimore1501]

Great help.. thank u so much.. all videos are really very useful and informative. Thanks again.

[@write2sampath1]

Please make a video on viewChild,viewChildren, contentChild, contentChildren and viewContainerRef . It'll be useful

[@Dark23144]

Sampath kumar paravasthu Yes I also need those videos

[@rodjjj]

The optional parameter after going back persists. It makes the url look weird but is not programmatically wrong. /one;id=5/5

[@Shapuleto]

Got any solution to this?

[@umaunni5426]

i completed all the angular 2 series videos. good and easy to understand. thank you.. could u post video for dynamic component loader. and why and when we use that.

[@abhinavanand5584]

Hello sir. Great series..!! One query :- After applying relative navigation, when I select “Angular”, it takes me to “localhost:4200/department-list/1” and after going back it changes to “localhost:4200/department-list;1”. After this, if I click on “Node”, the url is “localhost:4200/department-list;id=1/2” which seems to be logical but it doesn’t look good though. How can I make it to “localhost:4200/department-list/2” Thank you.

[@tramesh6]

Good Series. One clarification, the department button in html part the link is absolute right how can it change with relative ?

[@mk553]

Something's definitely changed here, and no longer works as expected. Hope this video will be updated for Angular 9 soon. I'm noticing a lot of minor changes with 9, for what it's worth.

[@prashansapriya5963]

Amazing course 👍

[@selcukilhanaydi4994]

This tutorial is great but in this video i have just seen something weird, that is, after last back to the department-list and selecting a new department and going to the department-details component again the component's view in the url will be wrong through using relative route here. So this is a semantic error. But not a big deal, so thank you so much for your perfect sharing.

[@mukaofssn]

Is there a way to set the url back to normal?

[@umutacer01]

We've beeen expecting for you to completed series!

[@incognitomode4628]

i completed all the videos in this series till now they are easy to understand and informative just one question how many more videos are still left in this series?

[@GuriLudhiana]

Amazing tutorials 👍👍

[@surajkumarjha4192]

Inside app-routing.module.ts file, in the Routes array, in the first element, if we give { path : '', redirectTo: '', pathMatch:'full'}, then clicking on "Department" button from home page won't direct to renamed link department-list.. Please help to check and suggest on this..

[@rushikeshchoche9555]

Why is your redirectTo value blank?

[@rushikeshchoche9555]

goPrevious and goNext is not working after making changes for relative navigation

[@EasyCompanyEagle]

Not sure if this is the best way, but this seems to work: this.router.navigate(['../' + nextId], {relativeTo: this.route});

[@mukaofssn]

this works as well: this.router.navigate(['../', nextId], {relativeTo: this.route}); Makes the router apply one level up and then the param nextId to navigate back to the appropriate department detail page.

[@codehan]

But now the previous button and the next button stop working when I change the path to 'department-list'. How can I fix this problem?

[@beshg2298]

use this.router.navigate([nextId], {relativeTo: this.route.parent}); so to go to parent and then append the id to it

[@JuanCamiloCampoT95]

it doesn't work besh, what you have to do is the same thing as well. this.router.navigate(["../", nextId ], { relativeTo: this.route}); that way it will works.

[@PavanGarigipati]

You have to change the code in respective goNext() and goPrevious() functions. I mean path navigation code.

[@AizenSousuke92]

@@PavanGarigipati so it loads pages with id of departments that are not even there now?

[@babu-vp3fp]

@@JuanCamiloCampoT95 thanks bruu,,,you just nailed it

[@nilbristi]

Can you please create a video regarding the inside properties of navigate and navigateByURL? There are a lot of things but not able to understand all of them.

[@KM-yo3zc]

wouldn't you also have to edit the app.component.html to change the anchors routerLink to reflect the changes done in the app-routing.module.ts?

[@nithyak8450]

I use angular 8 version and when I try this I am getting the url change. Not even change the url and getting page not found. Can someone help me on this. Thanks in advance Happy coding

[@malavikagopinath788]

I'm having same problem. Have you corrected it?

[@poojanoothi3748]

the route in "relativeTo:this.route." is it instance of activaredRoute?

[@samvelgevorgyan5015]

Thank you very much the best tutorial

[@PavanGarigipati]

In the above example we have only one route with parameter so its ok, but if we have another route with one parameter like 'student/:id' then what's happen ?

[@110_ayusheeshaw5]

spend 4 hours, absolute path is working fine done the same like video for relative path but showing page not found not worked maybe some features are changed or maybe your code have some faults.

[@sherifkhattab1313]

Thank you very much Will u be posting more videos plz?

[@muhaiminurrahman6038]

For Angular 9 Use this import { ActivatedRoute,Params } from '@angular/router'; ngOnInit(): void { this.route.params.subscribe((params: Params) => { let id = params['id']; this.seller_id = id; }); }

[@durgababubalepalli1599]

All videos i could be able to do successfully..except this one..Thank you... I have tested with gitcode, working only wheni change departments and departmentslist, whenever i change departs page not found iam getting..any help..appreciated..Thank you once again.

[@amitkavinkar1627]

Very Very Thanks you So much

[@jaypatel2471]

!!! IT may possible that in current version this code don't work, (currently V 17)

[@ai.aspirations]

awesome thanks

[@seenuvasanv]

good one.

[@TheBigbose23]

Hi Guys, it's really very good videos for better understanding, But I found up to 28th classes. Can anyone share me the all the videos link or any subscribe links to take these classes. Thanks in advance.

[@tester8422]

Voice pidy high

[@riyasabdulsalamraz]

Amazing tutorials 👍👍👍

[@andrescuellar9234]

Hi, I detected a bug in the code, can you tell me how to fix it? So, I'm at the "/departments" route, when I click on "Angular" it takes me to the "/departments/1" route, when I click back it takes me to the "/departments" route with the optional parameter "id=1", so everything is good so far, but when I click again to "Angular" or any other department the route keeps the old optional parameter and it adds the new id like this "/departments;id=1/2".

[@karthikeyansp7504]

same problem here