Angular 9 Tutorial For Beginners #22 - Two Way Data Binding

hi friends welcome back to our tutorials we are continuing with our angular 9 full tutorial series and in today's episode we will learn about two-way data-binding in the previous episodes we have learned about angular one-way data-binding which is passing data from template to component or from component to template today we will learn about two-way data-binding where we can send data from component to template as well as from template to the component my name is reader i have over 10 years of experience as a full-stack developer and i'm here to share my knowledge with you all also to learn from you all I am bringing you this full tutorial series so that you can master the entire angular application building process during the course of this tutorials if you have any doubts any queries just drop them in the comment section below I will be happy to help you for free I am putting in a lot of hard work in compiling these tutorials for you so please support by liking the video and also by subscribing to my channel thank you so much in advance so far in the series we have covered around 20 tutorials where we have started from basic angular introduction to CLI to angular modules to decorators to components and much much more like directives ngf else which for style class a data binding right so into the past five episodes we have dedicated to data binding where we learnt about interpolation property binding attribute binding and event binding in today's episode we are focusing on two-way data binding just to give you a recap if you have missed out on any of the angular tutorials that I have shared earlier I have created a playlist you can check out in the description and also so that you don't miss out on the important concepts and tutorials just to give you a recap what is data binding data binding means that we bind the data from the template to component and from component to template there are different types of data bindings like one-way data binding and two-way data binding in one-way data binding we send data from component to view and from view to component we learned about different techniques like interpolation property binding style binding attribute binding and also event binding today we are focusing on two-way data binding where we can send data from view to component and from component to the view so these are the little background and details about interpolation property binding attribute binding event binding that we have covered in previous tutorials I will not go into the details in this episode but we will focus on two-way data binding so what is two-way data binding two-way data binding is a technique that allows the user to bind events of elements from template to the component and vice-versa we can send data in both ways from component to view and from view to component you can think of it like two-way data binding is a combination of property binding as well as event binding to use two-way data binding angular provides a directive called ng model using ng model we can easily bind the data from component to view and from view to component how do we write ng model we write using square brackets in the properties and then with parentheses the syntax is given here and now we will learn how to do some hands-on practical examples if you are liking the video give a thumbs up to the video don't forget to subscribe to my channel to keep supporting me let's get started with some and so on examples so this is the example we are building let's open so to make it easy I'm just going to throw a H for for you here two-way data-binding okay so this is where it will start showing up ok we will learn two-way data-binding so two-way data-binding is from HTML to component class and from component to HTML right so the first thing we will do is we will create input usually whenever we talk about two data binding it is using the form elements like input where you want some input from the user and you want to show it based on some settings right so we will write input and then let's close this here and now we will define ng model right so this is the name you want to give now you can the name that you give has to be the same name that will be in your component class all right so let's just say this has first name right now this will give us error because it doesn't know what is first name so we will have to create a variable and let's create first name equal to let's say blank for now it's empty it's fine right so now we have ng model first name and what we will do is using interpolation we will display that value so here we'll put first name so now what will happen is whenever you we enter any data in the input it will automatically get mapped to div wire component because this is where it is getting set let's see that in action do you see that here it is automatically coming right now similarly if you print some value and let's say we have a button and we'll say click to read first name right so here we are adding a button and let's define this method now in the component and here we'll put a console right so here we are just putting the first name right so now let's see that I'm going to enter a name which is what is also getting displayed now let's open inspect the console that's clear and now let's click on great first name so it reads the value right because this is the same variable that was binded to way into the component class as well as into the template so whatever value we do it will send this value to the component and in the component it will update the variable name and we'll bring it back and display it here so this is one of the techniques which is called two-way data-binding now if I have to make some notes for you remember that two-way data-binding two-way data-binding is to is data binding from view to component and vice-versa right we achieve two-way data binding using ng model mostly two-way data binding is used by in by input controls input controls where we want to read data from user and also do some operations right we will learn more about it when we come to forms so remember it's a combination where we can send data from template using ng model and in the component we will update that variable we can process it as well right so that that is data binding for you right so this is this is how we achieve data binding in angular this is very helpful when we come to forms right so which we are going to cover in the cup coming tutorials but for you to understand two-way data binding start using ng model put together some code try it hand sound let me know if you have any issues I will be happy to help you in the next tutorial we will focus on implementing angular pipes we will learn about what is angular pipes how what are the different types of it how to use them and how to create custom pipes till then take care don't forget to subscribe to my channel also give a thumbs up to this video if you liked it thank you so much again

Channel: ARC Tutorials

Views: 9,675

Keywords: angular two way data binding, angular 9 two way data binding, Two Way Data Binding, angular 2 way data binding, Angular 9 tutorial for beginners, angular 9 crash course, angular 9 tutorial for beginners step by step, angular tutorial for beginners 2020, angular tutorial 2020, arc tutorial angular, angular code examples, angular for freshers, angular tutorial for experienced, angular data binding

Id: KBWc-0ihRD8

Length: 10min 7sec (607 seconds)

Published: Mon May 25 2020