Angular 10 Tutorial #24 - 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 start learning about data binding in angular this is one of those striking and very very important features of angular which easily allows us to connect data from component class to our template or the html file it's very very interesting because there can be multiple possibilities here from component to view that is our html file and from html that is our template file to the component back right so it has different variations like one-way data binding two-way data binding event binding attribute binding we will learn all about that in coming episodes for today the idea is to help you understand what is data binding why is it necessary why is it important and why is it critical for you to get the foundations correct this is part 24 of the angular 10 complete tutorial playlist uh i have planned around 100 tutorials planned in the series with detailed notes and explanation i have already updated all the previous episodes with the github link so make sure you check out the description box below of this video there is a github link with the notes make sure you get that and for the previous episodes all right so so far i've covered all these topics in detail along with notes for you so make sure that you go through all these topics because they are covered in detail which will really help you learn and master angular 10. today we are learning about data binding in angular so what is data binding right the first thing that comes to mind and especially for people who are starting really like a beginner or who are coming from a new programming background so data binding means that you're trying to bind the data from the view to controller and vice versa right data binding as the name suggests it is interacting with the data right i mean obviously you're taking data from your component putting it into the template and from template you're putting it to component based on some conditions or expressions data binding means defining how the data flows and how the data gets updated based on some business logic right so this is like self-explanatory but in terms of angular for some of our new developers or who are trying to learn angular i will elaborate it little bit more in detail for this because i want to i want to make sure that you are comfortable so this is episode number 24 we are learning about data binding right so if you see each component that we have seen so far right each component uh so far we have seen will have three four files that we generate right by it will be app component dot html by default it is app but here it will be your component name when you generate it right um let me quickly generate it one for you so ng generate component this we have covered in detail as part of angular cli tutorial so make sure that you get that details right so let me generate a new thing called say users right so i'm generating a new component users so you'll see this will be users.component.html then uses dot component dot scss in my case if you selected css it would be css for you then you will have component.ts and you will have users.component dot spec dot ts file right so if you see it generated all the four files right but the data is the data is spread throughout these files right the data is there in all of these files right for example this has all the class names right this has the view or you can say the html that the or the ui that the user sees this tells what data to be displayed based on some conditions or expressions right so see there is data which is binded right which is connected right and that's why this this process of connecting all the data or interacting the data between all these files is called as data binding right to show you an example let's take the component we just created right now see you have users right now this is a user's component.ts now it doesn't have any variables just yet but if you create one say title equal to this is you user component right if you say this in the html you can just use it and say this is called interpolation we'll learn in the next episode but so see this is this is a variable which is defined in your component right so when you run this code and open this users component you will see that value when what is the value which is there in the component so see the value from here the value is going from component to template right and let's say there is a click event let's say there is a click event right and you would say update value don't worry too much about the syntax today because i will cover this in event binding again update these update something right today is not the day to understand that today the day is to understand the connection between the the data connection between component and template so click equal to update value so what you are doing you are calling an event on click call this method and this method will also be defined inside the component class right here like this right so see now you are sending data from template to component right so which means data binding means interacting with data right of the component let's say right and data can be from component to template data can be from template to component right the connection of this data right in this case the data is this title the data is this method if you see title and method right so they are related they are binded together and that exactly is what is called as data binding now there are two types of data bindings right there is one way data binding and there is two-way data binding right i will these two topics require a dedicated uh tutorial in itself and i will cover that in the next next episode understand today what is one way data binding understand what is two-way data binding right so one way data binding means component to view or view to component which is what i just showed you right here if you see from component to template from template to component this is one way right one way why because it's coming from template to from component to template here it is from template to component again this is one way right so what is two way data binding two-way means it will go from component and then you can say if you have to relate it you can relate it like this that template right it will go to to slash from and from slash to right so basically it will have both way communication right data flows from view to component and back to component from view right i'll cover this i know it's not a very good example i am giving but at this point of time if i say anything more you will end up more confused i do not want to do that understand there are two types of data binding one way data binding two-way data binding and the way we say what is one way what is two-way it is nothing but the direction of data flow okay one way slash two-way is nothing but representation right representation of data flow right so this is from to template is one way that means data is going in one direction from component to template here it is going from template to component so it is one way two-way means it will go and come back again right two-way traffic right so it will go and again it will come back right so that is two-way data binding whereas one way is only this right one way is this two-way means it will go and come back again right i know if it's not a great example but pardon my at this point of time i don't want to get you into too many details to confuse you but understand this is data binding okay i will cover that in detail for you in the next episode where we will learn about sorry about that so in the next we'll start with interpolation which is a type of one way data binding all right

Channel: ARC Tutorials

Views: 6,793

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 data binding tutorial

Id: n6fwXyfogUE

Length: 9min 53sec (593 seconds)

Published: Tue Nov 17 2020