#18 Two way Data Binding | Angular Components & Directives | A Complete Angular Course

In this lecture, you will learn what is two way data binding and how to implement two way data binding in Angular. In two-way data binding, data flows from component class to view template and vice-versa at the same time.
ASP.NET Core GitHub Repo: github.com/manojjha86/ASP.NET...
NODE JS Course GitHub Repo: github.com/manojjha86/NODE-JS
ANGULAR 16 Course GitHub Repo: github.com/manojjha86/angular...

[@marcosvaldeni629]

Brilliant tutorial on Two-Way Data Binding in Angular! 🔗 Your step-by-step approach and real-world examples made it easy to grasp. 👏👏🚀🚀

[@dr_920]

In the video, the updateSearchText() function becomes unnecessary once ngModel is implemented. The crucial element in the example is the searchText property within the searchComponent class. When ngModel is utilized, it facilitates data flow from the searchText property to the view template (component -> view-template) and vice versa. Whenever a user inputs data into the input box, ngModel updates the searchText (view-template -> component).
For data flow from component to view-template only, employ either string interpolation or property binding.
For data flow from view-template to component only, event binding is appropriate.
If bidirectional data flow is necessary, you can either manually implement both directions (as demonstrated in the video with the updateSearchText() method) or simply use ngModel. The latter is a ready-made solution for two-way binding provided by Angular.
This is my understanding of the concept. Please correct me if any part of this explanation is inaccurate. I hope this clarification is helpful for anyone new or confused about this topic.

[@haitamelgharras]

It's my first time learning angular and I'm wondering if the ng model is using the update function how he know it hhh, after that I tried to delete it and it's working hhh. I think that we need to implement it manually if we need to change the value based on some conditions or something like that ...

[@SushilGuptaa]

Yes, updateSearchText() function is written before implementing ngModel .If u used ngModel u can remove

[@user-uw2vo8gm9e]

totally satifying and understandable I love when you remind how we use without ngModel before explaining TY

[@MuhammadUsman-ok5vs]

Awesome Explanation

[@sohamajgaonkar3119]

Superb!!!

[@ltzrdgamer5714]

Super Bro God Bless You

[@jhernanba]

in 15:40 code; is it possible to remove method "updateSearchText"?

[@sherlocksummer6284]

Thank you for the video

[@nomankhalid936]

good

[@samuelonowuko110]

Not clear enough. Kindly shed more light. Thanks. 1. How did the input box get the value of Mens Watch, in the first place when you didn't bind it with [value]="searchText" 2. How did the ngModel identify the method to call? Or is it used for input only?

[@user-yt5kn2pj5x]

sir , In Ngmodel, how its identify which method should be called.

[@Laendor]

NgModel refers to the property, so you don't refer anymore to the method.

[@anishtanvar2302]

so, what is the difference between Event binding & Two way data binding, because both do the same work?

[@dr_920]

In Angular, there are different ways to facilitate the interaction between the components and the DOM, and binding is the mechanism that allows you to define how this interaction occurs. Below, I’ll discuss the differences between property binding, string interpolation, event binding, and two-way binding.
### 1. **Property Binding**:
- **Purpose**: It allows you to set the property of an element to the value of a template expression.
- **Syntax**: It uses square brackets `[]` to denote the target property.
```html

```
- **Explanation**: In the example, `imageURL` is a property in your component's class, and it sets the `src` attribute of the `img` element in the HTML.
### 2. **String Interpolation**:
- **Purpose**: Primarily used to incorporate calculated strings or variables from the component into the text content between HTML tags.
- **Syntax**: It uses double curly braces `{{}}`.
```html
{{ name }}
```
- **Explanation**: `name` is a property in your component's class, and it’s rendered as text content within the `p` element.
### 3. **Event Binding**:
- **Purpose**: It allows you to respond to events like user input, mouse movements, keystrokes, etc.
- **Syntax**: It uses parentheses `()`.
```html
Click Me
```
- **Explanation**: `handleClick()` is a method in your component’s class, which will be called when the button is clicked.
### 4. **Two-way Binding**:
- **Purpose**: It combines property and event binding to allow for data flow in both directions (from the component to the DOM and vice versa).
- **Syntax**: It uses a combination of square brackets and parentheses `[()]` also known as ‘banana in a box’ syntax.
```html

```
- **Explanation**: `name` is a property in your component’s class. It will be updated when the input changes and vice versa.
### Comparison:
- **Direction**:
- Property Binding and String Interpolation are one-way bindings from the component to the view.
- Event Binding is one-way from the view to the component.
- Two-way Binding allows data to flow in both directions.

- **Usage**:
- Use Property Binding to bind a property of a DOM element to a component property.
- Use String Interpolation for displaying dynamic data on the HTML template.
- Use Event Binding to handle events raised from the DOM elements.
- Use Two-way Binding when you want to share data between your component class and template.
### Conclusion:
Understanding these binding techniques is crucial for working effectively with Angular, as they offer different tools for different scenarios of data flow and interaction within your application.
From chatgpt.

[@debarghyaacharjee4650]

To anyone facing "Failed to execute 'setAttribute' on 'Element': '[(ngModel)' is not a valid attribute name. " error just ng serve again after restarting the code editor

[@sunitajainapur4255]

[(ngModel)]="searchText" i have an error "Property 'ɵunwrapWritableSignal' does not exist on type 'typeof' "

[@sunitajainapur4255]

plz tell me solution for this

[@ilyashitchens649]

You can resolve this issue by changing your angular Version. I advise you to get back to Angular 16.0.2 which is the version the teacher use

[@aruntripathi400]

Question : I have used [(ngModel)] in the same way but in the browser console it was giving me this error -- " InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': '[(ngModel)' is not a valid attribute name. "
what will be the reason

[@mithlajmt6380]

[(ngModel)] u got a typo

[@Laendor]

You forgot to close the square parenthesis in [(NgModel)] declaration

[@Karthik22ng]

Sir, Please increase the font size or zoom the screen.

[@prasantadutta]

Watch it on a computer

[@lijolukose6965]

Font size is perfectly fine.