Angular 10 Tutorial #29 - Two Way Data Binding 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 two-way data binding if you are following the series you would notice that in the last couple of episodes like last three four episodes we have focused on one way data binding where we learned about interpolation attribute binding property binding event binding today we are learning about two-way data binding extremely important extremely critical without which we cannot really build forms in angular right we'll learn all about it in today's episode let's get started this is part 29 of the angular 10 complete tutorial playlist i have planned around 100 tutorials for you in this particular series and the tutorial links are in the description box below as well as i'm creating real time notes which is also i'm making it available in the github link so make sure you get the notes make sure you follow the tutorials if you have any doubts just ask me in the comment section below i'll be happy to help you please don't forget to subscribe to my channel to keep supporting me thank you again all right so so far uh the following topics i have covered in detail uh we have gone through each and every single aspect of these two topics we made some notes as well for these so make sure that you go through the previous episodes so you have continued in your learning all right so following uh um topics we have already covered today we are talking about two-way data binding all right so what is two-way data binding two-way data binding is a technique that allows the user to bind events of elements from view to component and vice versa which means if you have an element which is in your template you can send data to component and in return component will again send the data back that is two-way data binding so it's a bi-directional that means the data goes from template or view to component and again back from component to template right so that is that technique is called as two-way data binding the data flow is both ways like i explained it's a bi-directional it will go and come back now think of it this way that two-way data binding is nothing but a combination of property binding and even binding right so when you add both of these bindings to a particular element what you get is a two way data binding but instead of rewriting both property binding and event binding every time angular has a built in directive called ng model right using which we can easily bind the data in a two-way direction it is written in banana brackets you put a square bracket and then followed by angle bracket right so let's see that in action now that was about theory if you have any doubts drop me comment i will be happy to help you let's get started and let me make some notes for you this is episode number 29 today we are learning about two-way data binding so what is two-way data binding it's a technique right it's a technique which helps us send data flow from template to component and vice versa right that's it technique from where from template you send data from template two component and then component back to template right now it's a combination right two-way data binding data binding is a combination right or in sometimes in interviews they ask you what's an alternative right what's an alternative of writing ng model so the alternative is simple the alternative is we write property binding and event binding on the same element right then it becomes a two way data binding example is like this if i have a input i am going to bind the property first value equal to let's say there is a variable data1 right so i am binding a property here now i am binding a event which is input right so see now on this particular element i have now two bindings one is property binding one is event binding these two when they are used together becomes two way data binding right so what angular does is angular provides a built-in directive called ng model now what this does now ng model will make it easy for us using ng model it will handle both the above like that is property binding and event binding binding on an element okay now let me show you how it is written using ng model right so this was about this was using property and event now i will show you how do you write the same with ng model so here we will write square bracket followed by banana bracket now see square bracket for property angle bracket for event right so that's why this is called banana syntax now don't ask me why banana why not apple that's for you to ask google okay so this is called banana syntax but it's a funny name right drop in your comments if you think it's funny or drop in your comments and say why it's not funny okay so we use banana syntax and then we write the keyword ng model okay then we will give the name that we want to use on this particular element so let's say you want to use something called username close it that's it now see this whole syntax got reduced to just this much right so that was all about the theory and the explanation and the overview of the notes right time to get some hands-on action all right so what i'm going to do the same thing i'm not going to use anything different because i don't want to confuse you just take it as it is okay but the rule remember this is very very important rule the rule is whatever name you give here right in the ng model this right the name of the ng model should be declared in the component class okay if you are using you can use any name here you want but that name has to be in the component class let me show you that so i'm putting input square bracket banana bracket ng model equal to username save right so now we have saved it now i want you to see that it will give you error okay that's why i am not fixing it so see the error it says is property username does not exist on app component right if you don't if you don't declare this variable it will give you error and what is the error property does not exist on app component this is the error you will get ok so whenever you get this error remember that you have not declared it in the component right so we are also seeing that error so we are lucky property username does not exist on knapp component so now we know that it why because it is not there now see what another thing important thing another important error that you will see okay so this is my favorite error because half the time half the people have asked me only this question so um i'm kind of you know now uh used to telling this now so let me tell you that as well uh where is that file okay app module where did it go all right just one second let me find that data binding okay all right so okay so next error important very very important error okay because you would see this error a lot of times when you are doing forms so i thought i will just help you walk through that so just by adding ng model you will not see anything okay now i forgot to add you that so very very important error message now what is that error message it says can't bind to ng model since it's it isn't it isn't a known property now you would see this error message at least a zillion times if you are working on a real time application okay now why this happens is because you have not imported forms module in our app module okay we have not imported forms module that's why we will see this error so how to fix it how to fix it import forms module in our app module right let's do that now let me go to app module right so i have it here forms module let's so how do you do that you just do import then you do forms module from and you'll say at the rate angular slash forms okay now it will give you this just importing will not help just importing here will not help you need to add it to the array of imports into the ng module so you will have to add it here so see i have imported the forms module and added it to the array of imports in the ng module of app module okay now this is very very critical guys because half the time you guys have made this mistake if you open my forms tutorial from angular 9 you will see that at least 80 percent of the people have the same issue this particular issue so make sure that you don't get it because just follow my tutorial stop if you want stop the video for a few minutes do it yourself come and check the cross check the code all right so what do we do we import forms module in app module to fix it now let's compile it right so it is still giving error why because we have not yet declared the username in our component right let's do that now i'll close the this module i'll close this also don't save okay so here we are now i'll go to my app component uh so the name is username copy that go to component class and say username equal to it give some you can give you can leave it empty however you want right so now it is compiling successfully right i'll go back again just to show you what we did so that you don't make that mistake again first put input ng model equal to variable name right that's first step once you have done that then come to your app module import the forms module right declare the in the component right these are the three steps right first create the element given g model add it into the component declare this variable in the component class right then import forms module or you some people will tell you to do this first but i did it intentionally to show you right so you get an idea about the error otherwise you will never know what the error is right so follow the steps that i am doing so that you will learn from mistakes and you will learn from the errors all right now this is done right let's go to our application and launch it there so i have my simple crm application i have a text box it does nothing now let's go back here to our component class and assign a value and say arc tutorials okay arc tutorials now you see here it is binding the data from component to template right now what we will do we will change this value and how do we track it so now i am saying put a div we can use interpolation because it's a variable and we can print it again here right so now you see arc tutorials now let's change the value now it got deleted see both places you are amazing right so see you are seeing whatever i am typing here is coming here right youtube right why because of this simple flow that we have learnt here data goes from template to component then back to template or it can again be like from component to template two component two template you can it's it's a circle because it's two way data binding right so now whatever value you change it's reflecting in the div but now what i want is that if i put a condition based on some condition it should show or not show right so what i am going to do i am going to add a if condition if um say subscribers um or let's say some number right i mean if month is greater than 10 or say 10 yeah right if month is greater than 10 right so now what we'll do we'll define this month and what will be the logic we'll say um let's say some value that user enters right so let's say month equal to 5 for now okay so i've said month is 5 then only show this so you have a condition so now it will not show you the below 1 because there is a condition now you can take this and make it say 12 now you will see that again back right now similarly you can keep it empty right and you can take the same value what user enters now right and i will say so you basically get an idea right we'll do some practical when we come there like building calculator you can do some manipulation if some value is greater than that you do this else don't do it right you can put all of those values let's say i'll do a simple one again here for you let's say this is not username this is month right say this is month and here i'm saying if month is greater than 10 simple right and here i have month by default it is initialized to 0. so it is 0 now i enter 3 nothing happens i enter 5 nothing happens now i enter 11 nothing happens i enter 12 oh nothing happens let's check why okay so here i am saying month is greater than so what we need to do is basically we need to parse now right so i'm going to do just that now so we will say if month is greater than 10 so here we need to put it as a percent right so that's again little bit um okay i'm going to just month if equal to i'm just showing this as a example guys so just to give you an idea of how it works so here i'm going to say no this is not this is such a bad example guys i'm sorry i'm not able to recollect some good example but we'll do something with where we'll put some values and will um change it basically when we come down to forms you'll have to do all of that right so if there is error if it's empty we'll do lot of validations around it but you get an idea that you can put if else ng the whole point of this tutorial is to learn this connection of two-way data binding right which is nothing but simple whenever you enter any data you are saying that it's connected it's going to your component and from components coming back to template right you can have some number based on some condition you can have if and else like like this like month equal to 10 so you can again have it here like this month is greater than say 5 right so it will now show because it's greater than 5 but now if i change some condition in the background say 3 now it will not show you right so that's how two way data binding works i hope it's clear to you i hope i made it easy for you i hope i made it you know in simple terms i'm trying to explain you because once you start putting things together it will be much much easier much much beautiful together so i'm looking forward for that let's complete the basic foundations as quickly as possible so we can jump into our live application thank you so much for joining in this episode let's meet in the next episode where i will cover about pipes in angular thank you so much for joining if you like my work you can buy me a coffee at buy me a coffee dot com slash our tutorials thank you so much again see you in the next episode we will start with pipes in angular

Channel: ARC Tutorials

Views: 5,819

Rating: 4.9259257 out of 5

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 10 beginners tutorials, angular 10 tutorials, angular full tutorial series, angular 2021 full course, Angular two way data binding

Id: kri0onQDAIw

Length: 20min 2sec (1202 seconds)

Published: Tue Nov 24 2020