Angular 10 Tutorial #43 - RouterLink in Angular | Angular 10 Tutorial For Beginners

hi friends welcome back to arc tutorials this is angular 10 full tutorial series for absolute beginners in today's episode we are going to learn about router link it's a directive which helps us to create links in our template bind dynamic data or even static data how do we do that let's learn all the tricks in this episode this is part 43 of the angular 10 complete tutorial playlist i have planned around 100 tutorials for you in this particular series so make sure that you check out the description box below which has links to the previous tutorials the notes that i write in every tutorial as well as in the going forward we'll be doing a live project so the code of that will also be available soon these are the topics that i've already covered in the previous episodes so make sure that you check out all the previous episodes so that you learn and master angular in detail all right so so far we have covered around 42 episodes where we have covered a lot of groundwork today we are learning about router link so what is the router link so router link is an attribute directive which when you apply to an element it will make it a link right so in simple terms whenever you want to create a link in your template you will use router link right is it the only way no it's not the only way you can use a button right to make through click and then navigate you can use router for that but this is one of the most simplest straightforward ways that you would find yourself using in most applications which is to create a link which has dynamic value right now that is the use case which i have seen its would be 99.99 applications right so you click on it it will be routed to one or more components or can be to any other page right so let's see one of the example is given here which is a router link you write it in the bracket because that's how you bind attributes and then you pass the value right so that's a simple use case of how you would give a link router link right that was all about the theoretical explanation if you have any doubts hit me up in the comment section i will try and help you but first let's go ahead and do some hands-on examples i'm not going to make any notes for this or maybe i'll i'll keep it open just in case if you if someone needs any more details we can capture it here right so we can have any number of router links in the template right router links can be static or can be dynamic in nature right uh that being said an example is something like a simple ahref right you'll give router and then link right so that's how you give router link and once you have it you will give equal to value now where is the i will so i'll tell you where are the some of the common mistakes you will do not giving single quotes like this right let me make it here common mistakes right not putting strings in single quote this will this will give you error if you don't put it in single quote it will give you error i'll show you that in just a bit um right so that's one of the common mistake i have seen not passing dynamic data correctly is yet another common mistake i have seen in most people doing it so let's get started and see how to define first static route and then this is an example of a static route link and then we will also see how to write a dynamic dynamic router link okay all right so let's get started and let me show you the application we are so far so if you are following along in the previous application we did this product component where we had this dynamic data and all that right so we'll extend that and create some more use cases around it now and we'll get some more data into perspective so you get an idea of how it's done all right for that i will need um say i'll create a new component let's call it let's generate a new component and we'll call it as since we already have loan leads contacts right let me call that clients right so i'm creating a new clients which is what will be a kind of a tabular look that we can build right so first up i'm going to go to my app routing and throw in that route right and i'm going to say clients means it should come to component clients component okay all right is so far now let's see i will go back here and i'll put clients so it says clients works right all right so now let's use this component to have our data and everything in this so let's go to our clients in the component what i'm going to do i'm going to use a lot of details here now like interpolation for loop and maybe a constant array right so all of that we are going to use so i'm going to create client list equal to array right and in this i'm going to put oh you don't need that it's not express all right so here we are going to create client id 10 first name abc give some meaningful names to make it okay and then copy paste this couple of times and we'll change the values don't waste too much time in setting up data i mean it's always good to work with good data but when you're learning don't spend too much time just go with the flow all right this is 15. here i'm going to uh give and we are going to change here and say john moon cherry berry steve mike okay um manual right uh these are names of some of the people who have bought me coffees if you don't see your name please do let me know in the comment section i will add it to you in your name in your next example so yeah thank you so much for that all right so i have a list of um array right so what i'm going to do i'm going to go into my template and so we are going to create a th and i'm going to say client id and here i'm going to say first name right so it doesn't make sense it makes sense to remove that word client righty and here i'm going to say tr td okay okay so now this is where we will write our ng for and we will write ng for client of let client of client list print using interpolation i'm saying client id and first here you print first name here you put last name right what i'm doing i have a simple array right of these objects and which is called client list in the html using for loop i'm just looping that using interpolation i'm printing the output right so let's see why this is not coming so this is not coming obviously uh off client list let's see the spelling mistake ng okay so app clients okay and in the html we have ng for what is the thing that we are missing let's quickly check it out here we have ng for okay let client off okay client list yeah that's of i terms in such cases right uh most of the times the problem will be because uh you would have we would have missed out on um some of the name or see that's what so just make sure that you get that up it's an object right so obviously we missed out on this okay so now you see we got the names correctly we got the client id we got the first name last name you see something like this we'll use it here this is what i'm building we are going to soon start it so i'm going to give you some kind of hints so this is a table we are going to use the same structure we are going to use and print value now we have a requirement that we need to give an option to edit and delete right so how do we do that so what i'm going to do we need two links right we need links like this but we will not use href okay because that's not what we should be using with angular so here i'll say edit and here i'm going to say delete right so see now we got edit and delete so let's reload and you got edit and delete just add a space between that okay so you got edit and delete right but if you look at the links these are dummy links they don't do anything so this is where our router link will come into picture so i'm going to say router link is equal to now pay very very careful attention here if i want a static link i still have to put it like this and say edit this is a static link which will not do anything because it's just slash edit and same thing here for delete okay so we have now two links what happened is it not closed is it not saved okay a href this oh my bad okay so if you see the url at the bottom here see the url for all everything it is edit only and for everything it is delete so this is how you do static right this is a static link for router link right so i can also say like this right so this is a static link which will always go to slash user see right this is a static link but what we want is a dynamic list right so now pay careful attention here we are going to uh and here we are going to make it into array and comma now we will pass client dot client id this value is dynamic which is coming the client id is this one now you're passing it directly don't put double quote or double braces here it will give you error just look at how i've typed i have put it in a square bracket right and i am passing the variable what is the variable it is this variable we are still inside the for loop and that's why i can use this okay got it now let's see the output now let's see the here check the output here edit 15 14 13 12 you see that right now same thing for delete router link and right so instead of slash edit now it will be delete so now the urls that you you can click open a new window it says so basically if you see here right you will see that it is delete slash 13 10 that is how you get dynamic data using router link in your application now this was about two values right so right now our application is looking like this a right and you have the link right which says slash edit slash edit slash number let's say 13 14 whatever number right this is but if say someone wants something like this which says 13 slash user slash 16 here i have two dynamic values so how can you do since it's an array you can pass like this slay or now see what i'm doing i'm saying user id slash edit right so now the url is user slash id slash edit i am not putting slashes you should put okay remember guys this is yet another common mistake people do right we have to put slash in in variables right in oh not on 42 sorry putting it on 43 okay right you do not have to put it on we do not have to put it on slash in variables in router link okay it will not work now remember the trick here pay very very careful attention guys now now see the url it says slash app user delete 13 14 15 88 right now if you don't put that starting slash right now if you don't put this slash here in the starting then see what happens if i now i've removed the slash from the starting now what will happen it will take the entire path of this and then add this further you see the below now it says app one slash client slash user slash 12 slash edit here look here look here guys right so app one client slash user slash 11 right so if you copy the link address and i paste it here now you see it says app one clients user slash 10 slash edit so it is basically adding the url of the the page you are in right so that's why in the beginning you need to add if you want to have something like this copy and paste now you see you don't have slash clients right so that's the difference guys try this out then only you will understand these differences these are small but really screws up a lot of times so i request you to please try with me try hands-on i'm here to help you okay all right now now you see i'm passing three parameters to this link copy here user slash 11 slash edit so you see user slash 11 whatever that id is and then edit similarly for delete i have only two that's fine whichever you where you want right links are something what you form off right so this is router link now i showed you with static how it looks i showed you with dynamic i showed you with multiple params right i will show you again when we come back to query params right query params we will cover along with query params in routes right so there again i will cover this particular router link there we will router link query links i'll cover it along with it right i hope uh you are enjoying i hope you are learning i hope you are finding it interesting because this is what you will be working if you are working with any real time application right and this is how applications are built so slowly when you see this getting into live you would see that these are all small small things that i get add up to a bigger application right i'm putting a lot of effort in training you guys i hope you are finding it interesting if you do please give a thumbs up to the video please do subscribe to my channel if you like my work please do consider buying me a coffee at buy me a coffee dot com slash our tutorials thank you so much for joining join me in the next episode where we will learn about router redirect thank you again

Channel: ARC Tutorials

Views: 7,414

Keywords: Angular 10 tutorial for beginners, angular 10 crash course, angular 10 tutorial for beginners step by step, angular 10 tutorials for beginners 2020, angular tutorial 2020, angular 10 full course, angular full example, angular 10 for experienced, angular 10 full tutorial series, angular 10 crud tutorials, angular 10 tutorial for beginners, angular complete tutorial series, angular 10 beginners tutorials, angular 10 tutorials, angular 2021 full course, Angular routerlink tutorial

Id: n3f3yU6NmKk

Length: 18min 46sec (1126 seconds)

Published: Thu Dec 10 2020