Angular NgModel Two Way Data Binding with Example

hey guys welcome back to my channel in the previous video we have talked about one-way data-binding keen angler as property and event by NYX and in today's video you can learn how to do to a data binding in angular with a special directive called ng model before we begin if you are here for the first time to learn more about web development cause you're subscribing to my channel and activate your belt so when I upload a new video you will get notified as you recall from the last video we could either transfer data from component to view with property bindings or from you to the component by event bindings there is also a third way in angular which allows us to transfer data in both directions at the same time without using property and event bindings separately and the third way is called two-way data manage to a data binding basically transfers data both from component to view or from view to the component at the same time and we can do this with a special directive called ng model and now let's see how to use it in an example in some cases using two-way data binding might be necessary for example consider that we want to give users the ability to write their own title and we can do that by using an input field so when a user types something here this title will be updated now when I delete this and type here's something new we see that nothing changes this is because the title variable is binded to the input field with property binding and as you recall from the previous video property bindings sends data from the component to the wheel in a one direction way so we also need to use the event bindings to update this title variable in the component so let's say KeyUp that enters so when the user clicks the enter button it should update the title variable and to do that we need to get the actual title variable from the value property and we can do this by polar event attribute which targets the value attribute and when something changes here we should also see that this title will get updated so let's try it let's delete this and type here my new title and click enter ok now as we can see it has worked because we have used both property and event Panisse however this approach is not a good approach because it turns our calls into a messy code which we can write it in a much cleaner way and here comes the special angel model directive into play which allows us to use two-way data-binding and basically does everything but the property and event by Nick's tool so let's clear this code and use the angel model narrative instead first of all like we do in the property bindings we use brackets then inside the brackets we need to use parentheses inside the brackets lights the parentheses in event bindings and finally we write ng model now if this syntax loops confusing to use there is a term called banana in the box which helps us easier to remember the ng model syntax finally what we need to do is assign the ng model property into our title variable and now let's see what happens okay now when we check our terminal we see that an error happens and cells can't bind to ng model because it is an unknown property of input you know that angular is a framework which has multiple modules inside it and we don't call all of the modules at the beginning of our project because it makes the project much heavier and larger and this error happens because the angel module directive is inside the angular forms module so to use the ng model directive we always need to add two forms module into our into our app so let's do this alright so now I am in the app module in the main app module file and as we can see on the main app module there are some other modules here as browser module and in modules and they are important and they are important under the import search now inside to import we need to add a new model which is the forms module so firstly I need to import the forms module from angular forms exactly and then I need to register it here inside the import ok now I have imported our forms module and as we can see the error is gone by the way you don't have to memorize them you can find if you can't remember anything you can find them all under the documentation of English now let's go back in the browser reload again so let's change this and as we can see it's gone and I can write here my new title and as we can see it's working perfectly without using any property or event bindings we have made this work so just let me reload this again so at the beginning we have our title property is binded directly inside the input field with ng model and when I delete this is also automatically deleted and when I write here a new title it updates the title property and also updates the string interpolation here so this is how the angel model works as two-way data-binding if you find this video useful please hit the like button and thank you guys for watching

Channel: Cem Eygi Media

Views: 98,198

Keywords: angular two way data binding, angular ngmodel tutorial, angular ngmodel two way binding, angular ngmodel binding, angular ngmodel one way binding, using ngmodel angular, angular data binding example, angular two way data binding example, angular tutorial 2020, angular data binding, angular tutorial, front end, angular 9, angular for beginners

Id: bKfbzpANUFE

Length: 5min 50sec (350 seconds)

Published: Mon Jun 01 2020