In Angular for which arrtributes we have to use parentheses and for which we have to use bracket

Question

I am a bit confused about using parentheses and brackets on attributes in Angular.

<form [formGroup]="vform" (ngSubmit)="onSubmit(vform.value)">
  <input type="text" name="uname" placeholder="User Name" formControlName="uname">
  <input type="text" name="fname" placeholder="Full Name" formControlName="fname">
  <input type="submit" [disabled]="!vform.valid" value="Submit">
</form>

where we have to use parentheses and brackets, for ngSubmit we used parentheses and for disabled we used brackets. so I'm confusing for what attributes we use those? — Jason Brody, Jun 04 '17 at 12:06
https://angular.io/docs/ts/latest/guide/template-syntax.html — cartant, Jun 04 '17 at 12:09
The documentation is quite clear on this issue. Please read it. — , Jun 04 '17 at 12:14

score 3 · Accepted Answer · answered Jun 04 '17 at 12:15

3

Use parentheses for binding to events like (click)="clickHandler()"

Use square brackets for binding to properties like [disabled]="true"

Use both (referred to as football in a box) for two-way binding like [(ngModel)]="attr"

answered Jun 04 '17 at 12:15

CodeWarrior

2,721
3
18
18

(click) its for view to component.(one way) [disabled] its for component to view(one way) [(ngModel)] its 2 way binding – Nambi N Rajan Jun 03 '19 at 16:06

score 2 · Answer 2 · answered Jun 04 '17 at 12:09

Where ever you are passing a property down to the component/element, you'd use brackets like :

Say I'm passing size="20" to the div element

<div size="20"></div> // passing a value , not a VARIABLE 

<div [size]="sizeVariable"></div> // passing a variable to be bound to

To give you a broader view, imagine when using normal style tag, you're passing some properties ( in this case styles like colour and ... ) to the element :

<div style="color:red">

Where as when using parantesese , you're subscribing to the event that is coming up from the element :

<div (click)="doSomething()">

is similar to :

<div onClick="doSomething">

and is somewhat similar to

 $('#yourElement').on('click',doSomething)

score 1 · Answer 3 · answered Jun 04 '17 at 12:11

[] is for binding from a value.It allows to pass objects.

<div [allowed]="allowed"></div>

() is for binding an event handler to be called when a DOM event is fired

<date-comp [title]="childTitle" (notify)="onNotification($event)"></date-comp>

Refer What is the difference between parentheses, brackets and asterisks in Angular2?

score 0 · Answer 4 · answered Jun 04 '17 at 12:17

0

Parantheses is used for function calling while brackets used to pass or set an attribute. For more go through angular documentation @ www.angular.io

answered Jun 04 '17 at 12:17

Kamlesh Jha

164
1
11

In Angular for which arrtributes we have to use parentheses and for which we have to use bracket

4 Answers4