Angular Tutorial - 26 - paramMap Observable

📘 Courses - learn.codevolu...
💖 Support UPI - support.codevo...
💖 Support PayPal - www.paypal.me/...
💾 Github - github.com/gop...
📱 Follow Codevolution
Twitter - / codevolutionweb
Facebook - / codevolutionweb
📫 Business - [e-mail]
Angular | Angular Tutorial for Beginners | paramMap Observable

[@stevemaster92]

Great tutorial, sir!
I am a newbie to Angular 5 and Typescript, but now I feel like an expert ;-)
3x thumps up for easy following, clear explanations, and hands-on examples!
Can you please include forms (only if there's important things to discuss) and authentication in Angular in your next episodes?? With login/register forms, logout, password hashing, cookies, and other functions that are necessary. Thanks!

[@shahzebchaudhary3236]

For those who are facing problem with a continuous increment and decrement and are not getting where and how to use 'if' statement:
1. First of all import the DepartmentList component in the DepartmentDetails component.
2. Import the DepartmentList component in app.module as well(as we have passed all the components through RouterComponent array) and add it in the Providers array.
3. Then create an instance of DepartmentListComponent in DepartmentDetails component.
4. I suggest using the button instead of anchor tags, as we have the 'disabled' attribute. Declare two boolean variables:
Previous
Next
5. Now you can use 'if else' in both the methods:
goPrevious()
{
this.departmentId = this.departmentId - 1;
if(this.departmentId > 1 ){
this.minLimit = false;
this.maxLimit = false;
this.router.navigate(['/departments',this.departmentId]);
}
else
this.minLimit = true;
}
goNext()
{
this.departmentId = this.departmentId + 1;
if(this.departmentId < this.departmentsComp.departments.length ){
this.maxLimit = false;
this.minLimit = false;
this.router.navigate(['/departments',this.departmentId]);
}
else
this.maxLimit = true;
}

[@EvilInsideYEA]

You can also disable the buttons inside the subscribe field so that the previous button is already disabled when you click on the first entry and the next button is already disabled when you click on the last entry, which looks nice.
ngOnInit(): void {
this.route.paramMap.subscribe({
next: (params) => {
let id = parseInt(params.get('id') as string);
this.departmentId = id;
if (id = _departmentListComponent.departments.length) {
this.maxLimit = true;
}
},
});
}
And then write the button methods like this so the button doesnt get disabled ahead of time.
goPrevious() {
let previousId = this.departmentId - 1;
if (previousId = _departmentListCompoment.departments.length) {
this.maxLimit = true;
this.router.navigate(['/departmentList', nextId]);
} else {
this.minLimit = false;
this.maxLimit = false;
this.router.navigate(['/departmentList', nextId]);
}
}
}

[@rangabharath4253]

Hi, Awesome series.
Change the method to remove negative numbers if we click previous button.
Or you can disable the prev button
goPrevious() {
if (this.departmentId === 1) {
let previousId = 1;
this.router.navigate(['/departments', previousId]);
} else {
let previousId = this.departmentId - 1;
this.router.navigate(['/departments', previousId]);
}
}

[@haransarwan3719]

For this who are getting " Argument of type 'string | null' is not assignable to parameter of type 'string' " USE the param statement like this : let id = parseInt(params.get('id') ||'{}');
This is for Angular 14 and above version users.

[@Santoshthakur100]

Sir, I learned Angular with the help of your video... Always follow and share to my friends... Thanks for everything.

[@someshnukala804]

No words to praise sir.
Great tutorial.
Thank you so much sir.
Thanks a lot for the best explanation

[@markshibley7085]

Excellent explanation of snapshot vs. paramMap. Thank you.

[@ailespro_travels]

worked for me. best tutorial for dynamic routing

[@mohit66552]

here id is increment continuously even if there is 4 dept. so once we reach at dept id 4 then it should stop of increment. also same for decrements otherwise its good

[@vaibhavgautam3682]

I tried this approach for five departments.
Prev
Next
ngOnInit(){
this.route.paramMap.subscribe((params:ParamMap)=>{
let id=parseInt(params.get('id')||'{}')
this.departmentId=id
if(this.departmentId==1)
this.minLimit=true
if(this.departmentId==5)
this.maxLimit=true
})

}
Prev(){
let previousId=this.departmentId-1
if(previousId>=1){
this.maxLimit=false
this.router.navigate(['/departments',previousId])
}


}
Next(){
let nextId=this.departmentId+1
if(nextId

[@rupambhattacharyya780]

How did u understand all these by yourself? Hats off

[@shujunhan8294]

millions of thanks to you.

[@fasikademelash4638]

I got error on id, it is fixed by => let id=parseInt(params.get("id"))

[@kotaiahbabu2486]

How did you solve it?

[@fasikademelash4638]

@@kotaiahbabu2486 I already mention it

[@kotaiahbabu2486]

for me it wasn't working. I changed it to ( params.get('id'),||" ")) ; then it worked.

[@unspoken_shutter]

thanks

[@soumyaranjansahoo439]

thanks

[@sonamohialdin3376]

Very useful tutorial

[@HongKimhia]

Excellent explanation thank you very much

[@srinivasvalekar9904]

Brilliant explanation Vishwas! Thanks for these tutorials. I had a question , what if the ids are some random string? I know you wanted to explain about paramMap Observable, I was curious on how to solve this kind of problem.

[@jasondaniel5387]

clear explanation

[@prathmeshnamdeo641]

Man, everything is nice, you explain nicely. But if you keep on clicking next or previous either one of them, they keep on increasing more than 5 and even decreases to negative values, what to do in such case.??????

[@icasemobileservicecenter3293]

why u skip when u create button ?

[@lexiaontube]

he doesn;t show for SOME REASON:
import { ParamMap } from '@angular/router'

[@jayhey2577]

Thank you

[@kishanprajapati5381]

great you mentioned

[@shadow_3213]

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
@Component({
selector: 'app-department-detail',
templateUrl: './department-detail.component.html',
styleUrls: ['./department-detail.component.scss']
})
export class DepartmentDetailComponent implements OnInit {
public departmendId;
constructor(private route: ActivatedRoute, private router: Router) { }
ngOnInit() {
//let id = parseInt(this.route.snapshot.paramMap.get('id'));
//this.departmendId = id;
this.route.paramMap.subscribe((params: ParamMap) => {
let id = parseInt(params.get('id'));
this.departmendId = id;
});
}
goPrevious(){
let previousId = this.departmendId - 1;
this.router.navigate(['/departments', previousId]);
}
goNext(){
let nextId = this.departmendId + 1;
this.router.navigate(['/departments', nextId]);
}
}

[@srinupotnuru9945]

thanks buddy

[@varunteja8204]

@@shadow_3213 jk

[@misycode]

actually when I'm clicking on the next button it's not increasing the value rather instead of increasing it is incrementing the same value next to each other..... :(
what's wrong with my plus operator?

[@ai.aspirations]

awesome tutorial

[@amanullahahmadzai7447]

Thank you very much Sir for your tutorials you have explained in very good manner bur I can't work after 25 because every time it gives me errors !!!
by the way once again thanks .
Bien Cordialement

[@ignitesofthelp]

react gives easy solution for this approach. both are good, though.

[@vinodhkumar457]

Hi sir, please do on angular authentication, authorisation..

[@alagudrem]

Hi this is great article. Why you are using let previousID = this.currencyid -1; instead of this.currencyid = this.currencyid-1;
is there any reason behind that ? could you please explain ?

[@rahulchowdhury1559]

@Codevolution Can't we directly put the code inside ngOnInit in a function say updateRoute() and call this function in goPrevious() and goNext() after the route.navigate statement?

[@manishasony4998]

I have one doubt, you said if we navigate back if cmp already present in angular it will reuse and ngOnInit() should not called right..so it recommended to do not use snapshot, but then again you are defining parammap observable in ngonInit where that method is not called then how param map observable code inside ngonInit method work

[@seenuvasanv]

Thanks

[@rod82921]

if you press previous many times the id is going negative, pressing next the same, never stop, how you can stop the id going further from the departments lenght arrays???

[@harshavardhanreddy1907]

Hi, when i am clicking next button instead of incremen number is adding next to selected id if i add 2 for next button it is placing 2 beside selected id how can i resolve this problem.
for example, i selected 3 when i am pressing next it is going to 31 when i press next one more time it is going to 311 like this..

[@Santoshthakur100]

I did not stand ActivatedRoute
in angular... Can you please explain lil more about it. Question is: While changing the route I want to show particular common button on route change. Hope you understand .... Plz explain

[@rahulsaraf6815]

In the methods goNext and goPrevious, we can simply assign this.departmentId to the next/previous id.
This will get updates in the view as well, at the time of execution of this function itself.
I tried this out and worked fine without having to use paramMap Observable -
goPrevious()
{
let previousId = this.departmentId - 1;
this.router.navigate(['/departments',previousId]);
this.departmentId = previousId;
}
goNext()
{
let nextId = this.departmentId + 1;
this.router.navigate(['/departments',nextId]);
this.departmentId = nextId;
}

[@reduser77]

could you explain why the router doesn't create new component when extracting the id from the snapshot ?

[@ashfaqhussain761]

sir the one which you told is activatedroute can be changed but we are unable to change it it's getting error you taught wrong thing in this video

[@jayhey2577]

previous id not always current id -1

[@abhishekkumawat8353]

I think, by previous id, he does not mean 'the previously visited id', instead the previous id of the current id in the list. This way we do not have to go back to the departments route to click on other department, we can just click next to see the next department, and previous as well.

[@perujagan4840]

It is. If Id is 1 then disable previous

I was having a problem than when clicking next the changes were not reflecting, I'm assuming the compiling was not working, because I had to comment all the lines from goNext and goPrevious and uncomment one by one for the changes to start to show up. I had console.logs on the methods and were not reflecting until I did this.

[@rahi3139]

But there is a problem when we click on the next the value of id is increased after six as well but we have only six departemntids

[@TeluguCartoonist]

Previous id goes to minus values

[@konadeepak9443]

Will it be helpful if we update Id everytime we go in to Next and Previous methods

[@shravilpotdar]

For me, previous button is not working and the next button is even accessing the ids beyond the number of elements in the list. Any solution?

[@kuldeepkodi5955]

My code is working just with snapshot.. even without using paramMap. @Codevolution !?

[@anuragsekhri2315]

let we select the last department now after selecting it if we click next it updates to the department id + 1 even if that department not exist
how to solve this?

[@bigpapa7332]

I need a little bit of help... where should I check for if id < 1, then Previous Button should get disabled or disappear. Then, the Next Button gets disabled on the last element of the array (departments.length()) ..as now it keeps going on the -+nth number. Oh yes, one more thing, just passing the id in depart detail doesn't make all sense. Id with depart name would have been more impressive. Thank you.

[@adnankhuwaja1234]

Same Question

[@letscode1388]

Check it at the same time. If the I'd is less than 1 than assign it last value it contains

[@mohammadamir4756]

@Codevolution! what if I want to pass an OBJECT instead id??

[@jyothisrilakamsani119]

How can I typecast string to date exact error is like cannot assign string to date. Could u please help

[@doktor_faust]

I didn't really get the cons of using the observable map always. Why would you use the route snapshot, if the observable strategy works better?

[@namikenzi9862]

For performance. If you want to preserve the component's state and not update it.

[@ankurshukla8588]

if i am clicking continuously, why the click counts are increasing ?

[@GarbageInAndGarbageOut]

there are no subtitles after the 26th tutorial. There is a little effect I learn, could you add the subtitles

[@andrewyan883]

Hi, somehow this video is listed before #25 on the TH-cam playlist. Can you fix it?

[@Codevolution]

Thanks for pointing it out. I fixed it :)

[@andrewyan883]

Thanks!

[@Shakti_Kr_Singh]

video at 03:45 snapshot works in angular 12 by default when we move to same view without using paramMap approach. Angular 12 is able to reuse the same component.

[@NoshPatel]

From which planet you belong to Bro? Because one Earth Angular 9 is released and 10 is not even fully planned.
Good to see comment from other planet :)

[@RamKumar91221]

What if ID is a 'string' not an 'int'.. How can we navigate using previous and next buttons?
@Codevolution

[@anubhavkaushik7340]

Hi,
We are not facing the issue that you told About the snapshot approach....our URL as well as view both getting updated with out any issue....with previous approach also with out using ParamMap Observable....is there something that we are missing??

[@ToDeoS]

You should have the issue with the snapshot approach.... the url shouldnt update lol something is wrong

[@nishantmalik1982]

mine is also working fine too ….only change I made is in both methods is assigning of calculated id back to departmentIdonPrevious(){ let previousId = parseInt(this.customerId) - 1; this.customerId = previousId; //console.log("Value of previousId :" +previousId); this.router.navigate(['/customer',previousId]);}onNext(){ let nextId = parseInt(this.customerId) + 1; this.customerId = nextId; //console.log("Value of nextId :" +nextId); this.router.navigate(['/customer',nextId]);}

[@ahmedfarag569]

Tell me please how to pass the data of the component i've clicked on to the details component.

[@akhilganne4178]

Not working with current angular

[@Anilkumar-lg9vy]

How to display the department name in department detail

[@himanshu6823]

But in this last part of video when we use arrow function and do next that also shows all record which is not in file or detail.

[@umutacer01]

Please open auto subtitles :)

[@trdngy8230]

Why do not just simply update departmentId after every time goPrevious or goNext?

[@sajansjoseph]

He is teaching Routing.... Not click event...

[@vinodkumar19801]

good

[@themanthis837]

How comes this is not displayed as a link ?
Next

[@abhishekkumawat8353]

If you're talking about the underline and the blue color, it's probably because of the absence of href attribute in the tag.

[@kennethadrianbuenavista9570]

If you're talking about the underline and the blue color again he might have some css added to the tag.

[@rishav00a]

because we are using onclick method there, there is no use of tag you can perform the same task using another tags like Next as well.

[@this_wind]

again forgot to unsubscribe
in large applications, this can lead to tangible memory leaks

[@Santoshthakur100]

If we are not unsubscribe
, how can we deduct memory leaks issue in the project.... Plz reply soon

[@Maxgautphotographe]

Instead of reading the value in the url... why you don't just do this :
goPrevious(){
let previousId = this.departmentId - 1;
*this.departmentId = previousId;*
this.router.navigate(['/departments', previousId]);
}
goNext(){
let nextId = this.departmentId + 1;
*this.departmentId = nextId;*
this.router.navigate(['/departments', nextId]);
}
it will change the value of the departementId inside the method... and not doing the change in the ngOnInit(), maybe it was just to introduce the paramMap but...

[@ToDeoS]

What if some1 is to navigate by changing the url? Not many users would do that but in case if there is, your method won't work.

[@adamhamdi9210]

great
$

[@manishasony4998]

Please clear this doubt

[@androiddevthings]

Can you activate spanish subtitle for all videos? Thanks :)

[@varunkarthikeyan5094]

can you give better easy project type lesson in angular and link me tag

[@kelolettek3927]

english sub please.... difficult to understand a bit ! .....

[@17001045jv]

Subtitles?

[@geo_mukkath]

Angular routes are too much to take in.

[@pavanTY]

for whose who's value are not updating after calling gonex t() and goprevious(), inside both the function call this.ngOnInt(); it will work

[@amirbennasr5030]

why you dont work with html why always template ? thank you

[@icasemobileservicecenter3293]

why u skip when u create button ?

[@efegfg]

Please open auto subtitles :)

[@icasemobileservicecenter3293]

why u skip when u create button ?