Data Binding - Angular (Tutorial #6)

In this video we will learn about Data Binding in Angular. Data Binding allows to define communication between Component and View.
Use this link to share this video: • Data Binding - Angular...
So we can say DB is process where data is passed from Angular Component to the view(template) and from view to component.
There are four forms of data binding and they differ in the way the data flow.
1) Interpolation . {{ }}
2)Property Binding [ ]
3)Event Binding ( )
4) Two way binding [( )]
Interpolation:
Interpolation provides the data binding from component to view. Interpolation is one way data binding It binds from Component class to the template
Property Binding:
Property binding allows us to bind Property of view element to the value of template expression
The property binding uses the [ ] bracket. The binding target is placed inside the square bracket. The binding source is enclosed in quotes
Difference between Interpolation and Property Binding:
If I talk about Interpolation - it requires expression to return a string. So if you want to set element property to a non string data value - we must use property binding
Event Binding:
The interpolation and property binding are one way binding from component to view.
Event binding is used to perform an action in the component (may be executing a method) when user-raise a event - like click on button
Event binding uses the parenthesis. And name of the event is enclosed in parenthesis and then it assigned to the statement which mostly the method in the component class
Two-way data binding:
2 way data binding means changes made in component data should sync to the view so any changes made in the view are immediately updated in the respective component data
Two way binding is used mainly in data entry forms whenever user makes any changes in the data we would like to update our model in the component with new data and if model changes, we would like to update view as well
Angular uses combination of property binding and event binding by using ngModel directive
ngModel directive is not apart of angular core library . It is defined in the FormsModule library. You need to import FormsModule into our main module that is app.module.ts
If you liked this video don't forget to subscribe my channel
Click subscribe for more updates:
• Introduction- Angular ...
Connect with me:
Facebook: / angularjs4beginners
LinkedIn: / nisha-singla-82407aa0

[@abhisheksoni6012]

Nisha, you are an excellent trainer with expertise in the subject. You explained such complex concepts/topics of angular effortlessly. I am a big fan of you. I watched your whole angular series and only one word, it is awesome. I have never seen such a detailed explanation of Angular Topics. You really made our life easy. Thank you so much and Hope you will continue to share your knowledge with strugglers.

[@hemanth8381]

Woowwwwwwww!!! Thanks alottttttt

[@NishaSingla]

Most welcome 😊

[@4444-c4s]

Best video ever seen on Data Binding..You have unique way to teach complex things easier

[@ashimroy3891]

Such Clear and Concise explanation!!! Much appreciated.

[@michaelegli4929]

Well done! Excellent tutorial! Thank you very much and greetings from Switzerland!

[@NishaSingla]

Many thanks!

[@moldovandorin6187]

Very nice of you to give us these tutorials. Thank you very much indeed

[@NishaSingla]

My pleasure!

[@half-bloodprince3227]

Thank you so much, the video is so good. It is easy to understand, much better than other top rank videos.

[@gg-bl5su]

very niice thanks!

[@md.imtiaz6331]

Explained very fluidly. Great Job!

[@NishaSingla]

Thank you

[@muxammad2777]

The best tutorial in the world thank you very much I wish I could give you more then one likes 👍

[@NishaSingla]

Thank you so much Muxammad

[@nareshkuruva8249]

Explaing very well with examples and also thanks to giving notes about concepts under the down of the video

[@NishaSingla]

thanks Naresh. yes notes can be used if someone faced some issue in understanding

[@apoorvgupta2511]

Amazing tutorial. clears all the doubts of data binding

[@NishaSingla]

Glad it was helpful!

[@SridharKaliyaperumal]

One of the Best Tutorial clear explanation sister Very Smooth and Clear

[@NishaSingla]

Glad it was helpful!

[@jinthasyed]

Very nice explanation. Really helps to understand the Angular from scratch.

[@canada_c_apture]

Awsome way of teaching.. full ropic knowledge.. and the way you teach is just superb👌🏻👌🏻👌🏻👌🏻

[@NishaSingla]

Keep watching

[@donaldli1864]

Thank you Nisha! Peace between China and India.

[@morlaadarsha9056]

very nice explanation thank you very much

[@NishaSingla]

you're welcome

[@PANKAJKUMARSINGH673]

Very talented women thank you mam 🙏

[@hardikjoshi5791]

nice one dear ,, thanks

[@NishaSingla]

Thank you Hardik

[@nickeax]

Great, thanks very much!

[@NishaSingla]

Thank you :)

[@jean-paulboga8189]

Wonderful explanation .great job Nisha!!!!!!!!!!!!!!!

[@NishaSingla]

Thanks

[@shaikliyakhat7555]

Woow.....! cool thank u mam

[@NishaSingla]

Most welcome 😊

[@nifasa8309]

Thank you so much I understood very much

[@jasonbourne9884]

That was awesome explanation. Thanks for clarifying such crucial concepts 🙏.

[@NishaSingla]

Glad it was helpful!

[@shubhamSharma-ee8jc]

Thanks for this video, it is really helpful

[@NishaSingla]

Thank you

[@kushaalrana]

Perfect precise and on point explanation , subscribed and Thank you please keep uploading more videos 👌

[@NishaSingla]

Thank you Kushaal 😄

[@dbhjulio]

Excelente conteúdo. Muito obrigado!

[@NishaSingla]

não há de quê

[@swapniltravels]

nice explanation

[@tamalbose3336]

nice explanation.. going to subscribe

[@NishaSingla]

Glad to connect 😃

[@paramkushamaparna5207]

ur great mam, I subscribed ur channel 👌👌👌👍👍

[@NishaSingla]

Hey glad to connect 🙏

[@susanjoshi5948]

Very Nice lecture Nisha! Thank You.

[@NishaSingla]

Thanks

[@ehsanset6709]

Very helpful. Thank you.

[@NishaSingla]

Pleasure is all mine

[@jayakumar2927]

Good one. Post more videos with

[@NishaSingla]

Thanks

[@jayakumar2927]

@@NishaSingla Share source code

[@vasanthapandiyanm2405]

hi nisha your videos and explanations are an awesome... also could you please upload a sample project....

[@Avaneesh_Mishra]

Hey Nisha..Wonderful video on Data Binding. Thanks.

[@NishaSingla]

Thank you Avaneesh

[@ravindujeewhantha4012]

well explained ma'am

[@letslearn5032]

Well Explained... thanks mam

[@NishaSingla]

thank you . :)

[@jean-philippepascal1360]

simple and clean as usual 👍

[@jaiharshagottumukkala6538]

👌👌👍👍

[@NishaSingla]

Thanks

[@jaiharshagottumukkala6538]

We are eagerly waiting for ur superb video tutorials on Angular9 ..i like the way u teach concepts and simplify the topics ..keep it up ....keep uploading tutorials ...

[@ganeshbodke5872]

Well explained... thanks Nisha

[@NishaSingla]

Thank you Ganesh

[@Murtaza0052]

One more example of two way data binding

[@fridatakang3900]

This is amazing and short. Thanks for clarifying those four important Angular concepts in such a short video. How can one connect with you?

[@NishaSingla]

Thank you Frida

[@SaiKumar-xm9uo]

Really nisha, you deserve a high position in It field n please if possible upload videos on react and express js

[@NishaSingla]

Thank you Sai

[@SaiKumar-xm9uo]

@@NishaSingla please tech javascript as well nisha

[@IT.1466]

i love you this voice owner

[@udaykumarb2621]

In event binding while click on change title it's not changing the name ple tell me

[@yogeshfirke-v2r]

very nice and informative videos on angular js ..thanks a ton

[@Avaneesh_Mishra]

Its Angular 5. Not Angular JS

[@yogeshfirke-v2r]

@@Avaneesh_Mishra got it sir..I know very well, typo mistake

[@udaykumarb2621]

For angular 8 it is same?? I mean data binding

[@NishaSingla]

Yes concept is same

[@tarunagarwal7748]

hey give the link repository link of this program

[@ashwini4444]

could u please make some videos on component communication from parent to child and child to parent?

[@NishaSingla]

ruclips.net/video/qC3P_Ye-jec/видео.html

[@ajaygaikwad-zj2xo]

Please share Two way Binding without ngModel

[@kirthimedia5235]

4:39 Interpolation
11:34 Two way data binding

[@riteshsingh415]

any udemy course on angular ?

[@NishaSingla]

Nopes... I have just this channel

[@vasanthapandiyanm2405]

what is obserable?

[@venkateshyadla9798]

hi nisha,how did u create images folder with in assets ?manual or with angular cli,if it is angular cli,coulde you tell me

[@NishaSingla]

I have created it manually

[@dikshantyadav1110]

can u tell how did u get that image into your image folder ??

[@NishaSingla]

Copy paste :)

[@sukritikumari7211]

English ke bad hindi me asplend kijiye n mam please

[@mukeshkaduru8409]

Can't bind to 'ngModel' since it isn't a known property of 'input'.
9 im getting this error. please help me out this. even after i imported in module.ts
~~~~~~~~~~~~~~~~~

[@NishaSingla]

I hope you have imported FormsModule from angular/forms package and then importa in &NgModule({})

[@tejatechviews]

@@NishaSingla solved thank you

[@mukeshkaduru8409]

@@NishaSingla thank you nisha