Why was a constructive decision made to use different brackets?

Question

I just started learning Angular2 and wondered why the developers decided to use various different wrappers in html? For instance:

[(ngModel)]="some.property" (click)="someMethod()" [src]="some.property" 

I am sure that there is a good logical reason behind this, and I know that they are used for different purposes, but at first glance it seems an inconsistent and unnecessary obstacle to overcome.

Answer 1

Each syntax has its own purpose.

1) Event Binding

This is a one-way binding to the internal on the external component. Called as event . The external component will call someMethod when the click event is fired from the internal component or from the current tag .

 (click)="someMethod()" 

Example: here button the click handler calls the onClickMe() function

 @Component({ selector: 'click-me', template: ` <button (click)="onClickMe()">Click me!</button> {{clickMessage}}` }) export class ClickMeComponent { clickMessage = ''; onClickMe() { this.clickMessage = 'You are my hero!'; } } 

2) One-way data binding

This is a one-way connection with the external to the internal . This will pass some.property to the src property in the internal component or tag .

 [src]="some.property" 

Example. Here we bind the value of the name property to the innerText property

 <h1 [innerText]="name"></h1> 

or

 <h1>{{ name }}</h1> 

3) Two-way data binding

And this is a two-way binding from internal to external and vice versa . This will do two things.

 [(ngModel)]="some.property" 

Example: here the input value will be updated when username updated. And also, when we enter another value in the input, the username will be updated. So, here you get two-way data bindings. And under the hood with [(ngModel)], it creates one-way and event bindings. These are the lines

 <input [(ngModel)]="name"> <p>Hello {{ name }}!</p> 

are equal

 <input [value]="name" (input)="name = $event.target.value"> <p>Hello {{ name }}!</p> 

For deep knowledge you can find in the documentation

Answer 2

this applies to visibility and control of the binding. square brackets are tied from parent to child.

regular parentheses bind the child to the parent using event callbacks

both have two-way binding.

In angular1, I think there was much less control over directional snap.

You can contact the controller to view, etc. But I just use the example of a parent child component to simplify.

Answer 3

It makes sense to use different brackets.

You mentioned these three types.

• Property Binding []
• Event Binding ()
• Two-way data binding [()]

Property binding is used to bind properties to an html element. That way you can use this for every single property in the html element. It is also used by Angular directives, which you can use from the framework or create yourself.

 <img [src]="anImageUrlInTheComponent"> <!-- or --> <a [routerLink]="'/dashboard'">Dashboard</a> 

Event binding is used to bind events like click , mouseover or onSubmit , etc. You can also create your own events on a component using EventEmitters, but that is another matter.

 <button (click)="doSomething()">Do Something</button> <!-- or --> <form (onSubmit)="submitForm()"> <!-- form content --> </form> 

The latter is a two-way data binding used, for example, in NgModel. I recommend reading this article on two-way data binding.

Hope this helps: D