Angular Tutorial - 11 - Two Way Binding

📘 Courses - learn.codevolu...
💖 Support UPI - support.codevo...
💖 Support PayPal - www.paypal.me/...
💾 Github - github.com/gop...
📱 Follow Codevolution
Twitter - / codevolutionweb
Facebook - / codevolutionweb
📫 Business - [e-mail]
Angular | Angular Tutorial for Beginners | Angular Two Way Binding

[@msjazz0118]

Thank you, Vishwas, for these great tutorials! I have started other "beginner" tutorials that have left me confused and with gaps in my knowledge of Angular that made it difficult to apply the concepts beyond that particular tutorial. You have explained Angular in a way that finally makes sense and filled in those gaps in my basic understanding of Angular concepts. Again, thank you so very much for putting these tutorials on KZbin for all to view!

[@disha9876]

I had never thought of [()] as , event + property binding's syntax way. Genius! This totally makes sense now.

[@chagantisubhash]

I'm never going to make a syntactical mistake while writng ngModel directive after that Banana In a Box Analogy!!

[@amberlum9166]

A Banana inside a box, what a imaginative and super helpful hint!!!

[@ikhiloyaimokhai9974]

That sticks very well

[@diegodvs]

That is a mango not a banana

[@shadow_3213]

Since it's not so easy to get a box into a banana, that makes perfect sense to me :-)

[@srikanth29]

It was mentioned in angular documentation.

[@geomukkath5373]

Now I can never look at banana the same way.

[@krishnachaitanya7349]

First time, I am writing a thank you note in youtube. Your video with Githuhb is best combination to learn Angular 7. But first video need you to explain about Angular Architecture. I feel this need to be added. Else -> you are awesome, the best

[@bahabelomgebremedhn2318]

thank you, Vishwas for those great tutorials. I will never make a syntactical mistake while writing ngModel directive after that Banana In a Box Analogy

[@allnoyz7895]

Vishwas....You're making this way too easy.....Thanks!

[@pol-dev-v5y]

I cannot stop commenting this videos, really good way to learn Angular.

[@xGreenhero]

it's really easy to understand these videos. Better than LinkedIn Learning courses.

[@jorgecampoy9436]

I'm spanish and i can understand the videos very good, this videos are excelent.

[@syedsameer382]

smoothest explanation available on internet

[@smachohalla]

You're an icon Mr. Vishwas!

[@shadow_3213]

Thank you very much for this series sir !!! This is the real deal if you want to learn Angular :-)

[@urviljoshi9168]

Helping me so much to learning angular .

[@mindfulrelaxation2230]

Hi Vishwas what a great way of teaching ...great ** One suggestion ** You tube suggests other videos while watching you series , I think you have not marked your videos as series , please mark your playlist as series then youTube will suggest your videos only.

[@MrRam0036]

Property binding should be inside Square ex: [property]="name" , the event binding should be inside curly ex: (event)="getNames()" . if we mix together then it should be two-way binding that is curly inside square [( )] for clear ex : [(ngModel)]="name": Model to View [ ] =" property" ==> .ts file to .html file and View to Model (event)="getNames()" ==> .html file to .ts file vise versa. Overall Banana Inside a Box. [ (your |^| banana) ] .

[@naturalrejects]

Having issues with importing the FormsModule? In your application root try running, npm install @angular/forms.

[@bruhaspati560]

thnxxx buddy!!!

[@nahuelescobedo]

u r the best

[@soultouchingsongs]

Vishwas, you are the best👏👍🙌

[@arnavrajput3087]

Thank you sir this is a very helpful information provided by you..

[@mohdmuzaffarahmed4923]

Best tutorial sir.. thanks

[@altmm20]

Hands Down! Get Angular tutorial on KZbin!

[@mohansingh-wh8tp]

You are amazing .can't be expressed in words

[@songlee8456]

5 🌟 again. Because of your Tuts, Google will have a bunch of new angular developers.

[@KiranMarkad143]

thanks ..very nice Explaination. plz upload next tutorials as soon as possible.

[@naveenvenkatesh3222]

you made it simple .............fantastic tutorials......

[@tejaspatelia8179]

Hi Vishwas, I've one question why don't we include NgModule in imports like BrowserModule. Can u pls answer?

[@vamankumarpatel2652]

great job sir thank you for this ...really helpful .

[@mulasivajyothi8169]

Thank you very much wonderful series sir It is easy to learn !!!

[@amberlum9166]

thank you so much for those GREAT videos!!!

[@sm67873]

Nice work thank you.

[@SofianMW]

great tuto thanks!

[@kishoreandukuri7819]

nice tutorial. working fine in angular5

[@LovebhatiaYT]

Hi Vishwas, I imported FormsModule to run ngModel for two way binding. But to know the exact error without formsModule I deleted the import and run it again. Result is same. ngModel runs without importing formsModule also. IS there any reason behind it. P.S: You way of teaching is very good and facinating

[@edduardoo]

Great tutorials! keep doing. Thank you

[@manishtomar157]

Hi Vishwas, I am trying to print the ngModel value on console, but it is not reflecting. Could you please explain this a little bit.

[@keshavrajacharya1145]

woow amazing and easy explanation . Great tutorials . I liked it.

[@arvindkumarrana2312]

So Why did we use ngModel and not the "value" property to do two-way binding using [()] syntax? Well, to follow the [()] syntax, we need to follow a naming convention that says - If there is a property, let us say "someProperty", that we want to bind to then it should have a corresponding change event named "somePropertyChange". But in the case of the input element, while we have a "value" property, it doesn't have a corresponding change event named "valueChange". Instead, there is an event named "input" for that. So if you try to do - Then Angular shows an error. So, Angular provides us with a Directive named "ngModel". A directive is a fancy name for a class that adds additional behaviour to the elements. So "ngModel" has a corresponding change property named "ngModelChange". Internally, ndModel binds to the "value" property and "ngModelChange" binds to the "input" event. So the naming convention is followed and hence the two-way binding using [()] syntax works. That's why the official Angular Documentation says that - "Because no native HTML element follows the 'x' value and 'xChange' event pattern, two-way binding with form elements requires NgModel";

[@dharmacharlie]

[( Thanks mate, it was really helpful!! )]

[@AhamedKabeer-wn1jb]

Superb bro...

[@abdelfettahakkaoui2957]

the greatest tutos thanks

[@alejandrocr9293]

Thanks Thanks Thanks!!!

[@jeremyedp1026]

HI! many many thanks for this explication very but ry simple I have looking for pages where explication is complicated One more time thanks, for this information

[@dheerajpaladi7041]

I have to send list content from one component to another component in angular so that the list content in that component should print in another component .how to do it? and i dont want to use parent to child or child to parent component data transfer as the output is showing total html as output.

[@robeeeeen]

Just Awesome!

[@skrezwan12]

really helpful tutorial. liked it as a new learner..

[@annappaangel]

Hi Codevolution, I need to pass an additional parameter in routerLink and use that value in routed template.. can you please help on this?

[@saurabhpande7456]

Simply Amazing!

[@subratkumarbarik8896]

Superb!!!

[@kathiravant1668]

ur tuts is awesome

[@chaitanya1999]

btw where did we define what attribute the two way binding is going to work on ?

[@zeusaurel6714]

The FormsModel import does not work with version 11. I have no clue what's wrong and I'm not angular savvy, help. Ty

[@arvindkumarrana2312]

It is FormsModule.

[@Zawodowieec]

As always, great content. Thank you =]

[@amitgaikwad1943]

is this tutorial for angular 5 or 8? because anglar 8 was released in 2019.

[@inspiredaily2811]

why that is not allowed ? why I have to use

[@NoName-vw9hl]

I have the same doubt

[@ealvinoq]

Kudos!

[@harryzhang7310]

is a place to download the code or the slides show?

[@amrelattar5297]

thnx

[@av03]

nice tuts, thumbs up for that, i have question what is the difference only banana ex. (click) and banana in a box [(ngModel)]

[@BlackStarLegend]

[()] is a combination of -- 2 x (one way bindings), ie "property-binding' + 'event-binding'; There is nothing known as 2-way binding in angular. It is only a mirage created or fabricated by mixing 2 x (one way bindings) -- one from view -> logic && another logic -> view; final affect generated is a mixture of both -"property binding" + "event bidning" to give you "2-way binding" or [()].

[@wallaygamer]

Thanks you for help me!

[@sudhir600]

in vuejs/nuxt we use v-model="variable".. in angular [(ngModel)] = "name" almost same but angular have difficult pattern bw, nice tutorial..

[@mahmoudmutawe5439]

I mean it works for me after adding the module ,, but somehow it still showing this error in the console. "can't bind to 'ngmodel' since it isn't a known property of 'input' still show error"

[@bilaldev6770]

You have to write [(ngModel)] with a Capitale 'M'

[@MrWahidmaroc]

Angular 8 was released on May 28, 2019 !!!!!!!!!!!!!!!!!!!!!!!!!!

[@disha9876]

Does this tutor offer any UDEMY Course? Please let me know if any :) Anyone reading this , Have a good day! Cheers!

[@filmolosophy]

isnt ngModel deprecated in angular 7?

[@filmolosophy]

nvm... ngModel input property and ngModelChange event with reactive form directives has been deprecated.

[@Go4omir]

[ means component bind to a view. ( means view bind to component. ng-model as two way binding is represented by [(

[@ToDeoS]

How did the op do the brackets at 02:17?

[@patrickm9953]

Bananas !... Great videos

[@samallopa3579]

How to bind private property?

[@yaibanoutsukushii]

banana in the box for win :D

[@tysonliu2833]

banana in the box, what a way to memorize sth

[@mrrishiraj88]

👍

[@mohamedsahli9935]

A Banana inside a box no way that i forget this

[@svworld01]

Simplicity :)

[@phklucas7]

Doesnt work even after i imported formsmodule like what u taught...

[@bruhaspati560]

yeah after doing that the data binding doesnt work anythng put inside '{{}}' jus doesnt work pls help!!

[@JFLABBERVILLE]

I hope you've found your answer by now but you have to have name in your input and then it works. The property used with ngModel can have any name you like as long as it's consistent with your declared property in the class of the .ts file. myname=""; in the class you can have public hatsonfire = "": and then in your template {{hatsonfire}} I hope that's helpful.

[@bilaldev6770]

There are two possible reasons: 1. Missing _FormsModule_ hence Add this to your Module 2. Check the syntax/spelling of *[(ngModel)]* in the input tag

[@muhammadfaheem8859]

@@bilaldev6770 he is probably writing [(ngModule)] instead of [(ngModel)], i was doing the same :d

[@bilaldev6770]

@@muhammadfaheem8859 I did the same mistake too LOL

[@awaiszaki14]

two way data binding a banana in the box wow

[@kidoo1567]

Full

[@urviljoshi9168]

👍👍🥰🇮🇳

[@MZ-uv3sr]

BANANA! LMAO

[@anthea6130]

lol Banana in a Box [ ( ) ]🤣🤣🤣🤣🤣🤣🤣

[@igloomcyurt3657]

weak

[@sreenivasamajji68]

The content is good, but the accent is kind of annyoing.