Angular 10 Tutorial #25 - Interpolation in Angular | Angular 10 Tutorial For Beginners

hi friends welcome back to arc tutorials this is angular 10 full tutorial series for absolute beginners we are continuing to learn about data binding in this particular series in the last episode we have introduced the topic data binding we just touched based about it learned the different types of data binding but starting this episode we will deep dive learn understand master and practice all the important features of data binding starting today we are doing interpolation first this is part 25 of the angular 10 full tutorial playlist i have planned around 100 tutorials for you in this particular series it's going to be really exciting because we are going to soon start our live project along with our learning so make sure you check out the description box below i have updated the github link as well which has the notes make sure you check it out and also make sure that you have gone through all the previous episodes because it is important that you have continuity in your learning i'm sure you would learn and benefit from it because i have covered each topic in detail for you today we are learning about interpolation in angular so just to recap in the previous episode we quickly touched based about data binding where we learned that there is one way data binding there is two way data binding in one way data binding again there are two two considerations one is the data going from component to view the other is from view to component today we are focusing on component to view in that also we are talking about interpolation let's get started so what is interpolation it's a new word it's a new jargon it's a new uh feature i would say for our new developers or beginner developers who are just learning starting to learn angular don't get confused don't get panic it is not rocket science it's absolutely basic thing so what is interpolation it's a technique that allows the user to bind data from component to view right so the data is going in one direction from component class to view which is your template file or html file the data flow is one way that is why we call it one way data binding right it's going from component to view it can be used for integers strings objects arrays and much much more well i'll show you all of this in hands-on in just a bit the syntax is very simple it has double curly braces you put the variable in between that that's it that itself is called interpolation right now go through this notes that is there on your screen right now read it for a minute and then let's get started now with hands-on if you don't understand any concept if you are confused about some words or some jargon drop me in the comments i will be happy to help you let's get our hands on all right so i have commented of everything i have started the application the application looks like this so now i have commented everything so that it's easy for you to understand okay so now let's go to component class okay and think that there is nothing okay by default there is always title but i'm going to add something here and i'm going to say page underscore heading equal to right let's say welcome to arc tutorials so what i have done i have created a variable i am assigning a value which is of type string right this is a string i have assigned a variable copy this variable name go to the template file and then just put it in the heading or anywhere anywhere whatever you want whichever tag it doesn't require to be in heading you can add paragraphs you can add div you can add anything right put double curly braces and put the variable name right now what what are some of the common mistakes but 25 interpolation right so common mistakes is that i have seen is people will add codes right single quotes double quotes around the variable right this is the most common mistakes in interpolation did i put codes here no because it's a variable and it's coming from component so what is the name in the component it's page underscore heading that's why i have just added page underscore heading now head back to our application and you would see welcome to arc tutorials right that's because why is this extra okay maybe here okay got it right all right so now you see welcome to our tutorials but we just put the variable name now try putting this in single quote right so now see it is giving page heading because it is now thinking this itself is a string right but that's not the case it's a variable that's why no single quote or double quote there just variable name between curly braces right now if you see such error happening in your console that's because it is not able to refresh so just close and to close you will use the command control plus c it will cancel that particular command and you can again reopen rerun the build so it will build now it should give you that it is successfully compiled okay now you see the application refresh it you should see welcome to arc tutorials this is an example where i am showing you with the string now i will show you one more say page count equal to 10 right so this is yet another variable i have created now this time it is integer right again it does not matter whether it is integer whether it is you know whatever you want to call it right variables now i am putting page count which is a integer so you see you have string you have numbers right which is integer basically then you can also have user underscore object equal to now i am creating an object right all right so here what i have done i am just creating a user object copy that object again go back to your template again put di so you would be seeing i am using div and paragraph you can use span you can use table you can use list you can use anything so now it says object right so now you will say object dot key now it says arc but if i want to print both then let's say space and last name right so now it shows arc tutorials that's first name and last name right now some people will argue that so see it will give you error that's why i have not written it in the same but i am using it in the or we can do something like this let me show you that let me rebuild so these are expressions right these are variable names so that's why it's not uh you cannot directly use it like this instead we can use it but we have to use separately okay so now let me show you but there are other things like pipe and etcetera that we can use along with the particular interpolation right so that i'll show you later once we start using them but not today today's episode is focused on interpolation i want you to practice that today all right so this is string this is number this is object right now similarly you can use array and so on right so doesn't matter whichever you want to use you get the idea that whatever be the variable you come to html put double curly braces put through your object uh throw your variable there it will reflect in your template right now i'll show you with a combination right uh if you remember we have learnt about ngf ng4 ng switch right if you don't remember please refer to previous episodes now let me show you one combination so what i am going to show here is is user logged in so i am making a variable which is is user logged in right now some people ask me what is best practice how should we write the uh the the variable names and those things so i'll cover that again that i will cover as part of our real time project but the good way is to write like this okay if it's a method you can use like that if it's a variable again it depends upon organization to organization but standard practice is something like this with camel case right so i'm going to convert that now right okay so i have it here now i have converted now let's add it in our html also it should be same right that's another reason i have converted that because whatever name you have in your component the same should be here you cannot have different one right so that's an another same name should be followed same name should be given whatever is given in component right you cannot say that i'll give one name in component one name in html it doesn't work like that okay all right so we created a variable is user logged in now go to html and i'll say div ng if equal to if user is logged in then only show him the first name and the last name so see now it is showing you the first name and last name now let me switch this off to false now you see now it's not showing up right so this is one way where we are using interpolation with ng if now let me quickly show you that with ng4 so let's create a va let's create or we should have an object here yeah we have an object called contacts right already we created when we were learning ng4 so make sure again so friends um going forward you will see that everything is combination so make sure that you follow all of the tutorials that i have shared so that you gain maximum knowledge right so here i will say contacts dot contact dot uh it's not it's an object right array of objects so say first name so you put your first name save it now you would see all the first names displayed same way you copy the last name here and you would see first name and last name both are getting displayed right and we'll also see contact id so let's add that also so see friends how easy it is how simple it is right so now you see contact id but this doesn't look nice right it's not looking nice right so what do we do we make it beautiful if something is not beautiful we fix it we don't run away from it right all right so let's put it here so i'm going to beautify this code and you would see how code comes together right you would see this is how applications are built so i have my table headings here right and let's throw it in a tr okay all right so now i'm going to take the tr and put it here and call it td call it td copy this here okay and now we have to loop the data right so what are we going to do we're going to copy this code of ng4 here and put it to the row here and we are going to take this interpolation values and put it to contact id now you see now you will start saying magic all right so here we have the first name last name take the last name as well and put it here all righty so now the beautification has is complete of this table right so now we should see now it's looking much better right but still we can improve it right so when we start our live application i'm going to show you how we can make something like beautiful like this with pagination with selection of this so i'm working hard for you guys so don't worry i will make sure that you will become an expert for today understand that now you are using interpolation with for loop right here you have interpolation with ngf right so your homework is ng switch so make sure you do it drop me comments if you are able to do it or not i will help you further right i hope i make things simple for you i hope i make things look beautiful and above all i make you confident in whatever you're learning in the next episode we will learn about property binding yet another type of data binding it's going to be fun exciting stay tuned to the channel please send me your feedback if you like the video give a thumbs up and don't forget to subscribe to my channel also if you like my work and my tutorials please do consider buying me a coffee at buy me a coffee dot com slash art tutorials thank you so much for joining i'll see you in the next episode with a new tutorial thank you

Channel: ARC Tutorials

Views: 6,194

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 tutorials, angular full tutorial series, angular 2021 full course, Angular interpolation tutorial

Id: gAhOgiJXruE

Length: 15min 15sec (915 seconds)

Published: Tue Nov 17 2020