Angular Tutorial - 26 - paramMap Observable

📱 Follow Codevolution

Angular | Angular Tutorial for Beginners | paramMap Observable

[stevemaster]

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!

[shahzebchaudhary]

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:
<button (click) = "goPrevious()" [disabled] = "minLimit"> Previous </button>
<button (click) = "goNext()" [disabled] = "maxLimit"> Next </button>
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.maxLimit = false;
this.minLimit = false;
this.router.navigate(['/departments', this.departmentId]);
}
else
this.maxLimit = true;
}

[haransarwan]

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.

[fasikademelash]

I got error on id, it is fixed by => let

[rangabharath]

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

[Santoshthakur]

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

[someshnukala]

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

[markshibley]

Excellent explanation of snapshot vs. paramMap. Thank you.

[mohit]

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

[ailespro_travels]

worked for me. best tutorial for dynamic routing

[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 :(
what's wrong with my plus operator?

[prathmeshnamdeo]

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

[rupambhattacharyya]

How did u understand all these by yourself? Hats off

[srinivasvalekar]

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.

[rahulchowdhury]

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

[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 ?

[bigpapa]

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.

[vinodhkumar]

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

[HongKimhia]

Excellent explanation thank you very much

[amanullahahmadzai]

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