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!
@shahzebchaudhary32364 жыл бұрын
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; }
@EvilInsideYEA2 жыл бұрын
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]); } } }
@rangabharath42534 жыл бұрын
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]); } }
@Santoshthakur1004 жыл бұрын
Sir, I learned Angular with the help of your video... Always follow and share to my friends... Thanks for everything.
@fasikademelash46383 жыл бұрын
I got error on id, it is fixed by => let id=parseInt(params.get("id"))
@kotaiahbabu24863 жыл бұрын
How did you solve it?
@fasikademelash46383 жыл бұрын
@@kotaiahbabu2486 I already mention it
@kotaiahbabu24863 жыл бұрын
for me it wasn't working. I changed it to ( params.get('id'),||" ")) ; then it worked.
@unspoken_shutter2 жыл бұрын
thanks
@soumyaranjansahoo4392 жыл бұрын
thanks
@someshnukala8044 жыл бұрын
No words to praise sir. Great tutorial. Thank you so much sir. Thanks a lot for the best explanation
@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.
@mohit665525 жыл бұрын
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
@vaibhavgautam36822 жыл бұрын
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
@icasemobileservicecenter32935 жыл бұрын
why u skip when u create button ?
@lexiaontube6 жыл бұрын
he doesn;t show for SOME REASON: import { ParamMap } from '@angular/router'
@jayhey25776 жыл бұрын
Thank you
@kishanprajapati53815 жыл бұрын
great you mentioned
@shadow_32135 жыл бұрын
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]); } }
@srinupotnuru99454 жыл бұрын
thanks buddy
@varunteja82043 жыл бұрын
@@shadow_3213 jk
@markshibley70855 жыл бұрын
Excellent explanation of snapshot vs. paramMap. Thank you.
@ailespro_travels4 жыл бұрын
worked for me. best tutorial for dynamic routing
@misycode3 жыл бұрын
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?
@bigpapa73326 жыл бұрын
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.
@adnankhuwaja12343 жыл бұрын
Same Question
@letscode13882 жыл бұрын
Check it at the same time. If the I'd is less than 1 than assign it last value it contains
@prathmeshnamdeo6414 жыл бұрын
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.??????
@srinivasvalekar99044 жыл бұрын
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.
@rahulchowdhury15593 жыл бұрын
@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?
@rupambhattacharyya780 Жыл бұрын
How did u understand all these by yourself? Hats off
@alagudrem6 жыл бұрын
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 ?
@shujunhan82944 жыл бұрын
millions of thanks to you.
@rod829214 жыл бұрын
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???
@manishasony49982 жыл бұрын
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
@Santoshthakur1004 жыл бұрын
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
@harshavardhanreddy19072 жыл бұрын
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..
@vinodhkumar4577 жыл бұрын
Hi sir, please do on angular authentication, authorisation..
@rahi31394 жыл бұрын
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
@mohammadamir47563 жыл бұрын
@Codevolution! what if I want to pass an OBJECT instead id??
@jyothisrilakamsani1194 жыл бұрын
How can I typecast string to date exact error is like cannot assign string to date. Could u please help
5 жыл бұрын
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.
@shravilpotdar6 жыл бұрын
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?
@konadeepak94434 жыл бұрын
Will it be helpful if we update Id everytime we go in to Next and Previous methods
@anuragsekhri23154 жыл бұрын
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?
@Shakti_Kr_Singh4 жыл бұрын
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.
@NoshPatel4 жыл бұрын
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 :)
@andrewyan8836 жыл бұрын
Hi, somehow this video is listed before #25 on the KZbin playlist. Can you fix it?
@Codevolution6 жыл бұрын
Thanks for pointing it out. I fixed it :)
@andrewyan8836 жыл бұрын
Thanks!
@HongKimhia5 жыл бұрын
Excellent explanation thank you very much
@RamKumar912216 жыл бұрын
What if ID is a 'string' not an 'int'.. How can we navigate using previous and next buttons? @Codevolution
@HolyHarmonyOfficial6 жыл бұрын
there are no subtitles after the 26th tutorial. There is a little effect I learn, could you add the subtitles
@ankurshukla85886 жыл бұрын
if i am clicking continuously, why the click counts are increasing ?
@sonamohialdin33762 жыл бұрын
Very useful tutorial
@ahmedfarag5696 жыл бұрын
Tell me please how to pass the data of the component i've clicked on to the details component.
@doktor_faust6 жыл бұрын
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?
@namikenzi98626 жыл бұрын
For performance. If you want to preserve the component's state and not update it.
@jayhey25776 жыл бұрын
previous id not always current id -1
@abhishekkumawat83536 жыл бұрын
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.
@perujagan48405 жыл бұрын
It is. If Id is 1 then disable previous
@Anilkumar-lg9vy5 жыл бұрын
How to display the department name in department detail
@trdngy82305 жыл бұрын
Why do not just simply update departmentId after every time goPrevious or goNext?
@sajansjoseph5 жыл бұрын
He is teaching Routing.... Not click event...
@akhilganne41783 жыл бұрын
Not working with current angular
@amanullahahmadzai74474 жыл бұрын
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
@themanthis8376 жыл бұрын
How comes this is not displayed as a link ? Next
@abhishekkumawat83536 жыл бұрын
If you're talking about the underline and the blue color, it's probably because of the absence of href attribute in the tag.
@kennethadrianbuenavista95705 жыл бұрын
If you're talking about the underline and the blue color again he might have some css added to the tag.
@rishav00a5 жыл бұрын
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.
@ashfaqhussain7618 ай бұрын
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
@jasondaniel53874 жыл бұрын
clear explanation
@himanshu68236 жыл бұрын
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.
@kuldeepkodi59555 жыл бұрын
My code is working just with snapshot.. even without using paramMap. @Codevolution !?
@anubhavkaushik73406 жыл бұрын
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??
@ToDeoS6 жыл бұрын
You should have the issue with the snapshot approach.... the url shouldnt update lol something is wrong
@nishantmalik19825 жыл бұрын
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]);}
@ignitesofthelp5 жыл бұрын
react gives easy solution for this approach. both are good, though.
@ai.aspirations5 жыл бұрын
awesome tutorial
@TeluguCartoonist6 жыл бұрын
Previous id goes to minus values
@rahulsaraf68154 жыл бұрын
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; }
@reduser774 жыл бұрын
could you explain why the router doesn't create new component when extracting the id from the snapshot ?
@seenuvasanv7 жыл бұрын
Thanks
@umutacer016 жыл бұрын
Please open auto subtitles :)
@androiddevthings6 жыл бұрын
Can you activate spanish subtitle for all videos? Thanks :)
@varunkarthikeyan50945 жыл бұрын
can you give better easy project type lesson in angular and link me tag
@Maxgautphotographe6 жыл бұрын
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...
@ToDeoS6 жыл бұрын
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.
@manishasony49982 жыл бұрын
Please clear this doubt
@vinodkumar198016 жыл бұрын
good
@this_wind5 жыл бұрын
again forgot to unsubscribe in large applications, this can lead to tangible memory leaks
@Santoshthakur1004 жыл бұрын
If we are not unsubscribe , how can we deduct memory leaks issue in the project.... Plz reply soon
@17001045jv6 жыл бұрын
Subtitles?
@adamhamdi9210 Жыл бұрын
great $
@kelolettek39273 жыл бұрын
english sub please.... difficult to understand a bit ! .....
@geomukkath53733 жыл бұрын
Angular routes are too much to take in.
@pavanTY2 жыл бұрын
for whose who's value are not updating after calling gonex t() and goprevious(), inside both the function call this.ngOnInt(); it will work
@amirbennasr50305 жыл бұрын
why you dont work with html why always template ? thank you