Angular 2: Is usage of Parentheses / Square brackets mandatory?

In the Angular 2 previews released so far, the syntax of the markup has been modified from ng- prefixes to square parentheses and square brackets.

Whereas before one would have:

<input ng-model="userName" />
<button ng-click="btnClick()">Run</button>

The new syntax is:

<input [value]="userName" />
<button (click)="btnClick()">Run</button>

Does anybody know if this syntax is/will be mandatory, and without alternatives?

We currently have an application in which the HTML is generated through XSLT, and [ and ( are not valid attributes – thereby being unable to generate Angular 2 JS syntax.

Leave a Reply

3 Comment threads
0 Thread replies
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
newest oldest most voted
Notify of

It’s not mandatory – see here.

Please checkout the directives section (near the middle of the page):
the “Decorator Directive” is still there, which means with regards to your question.

There will be a fall back way for sure.

Do checkout the official demonstration as well: ng-model/click are used in that as well.


In fact, [] and () are valid HTML chars in attributes. If you generate HTML code on the server-side or use any other pre-processor that can’t handle those characters, you can always use the equivalent canonical syntax. [] is a shorthand for bind-*, hence [propertyName] == bind-property-name () is a shorthand for on-*, hence (eventName) == on-event-name This syntax is used mainly because of two reasons (and actually mandatory): Escaping – Element attributes need to be escaped. If you have an image tag with a dynamic src like this: <img src="{{imageSource}}"> this would result in a 404 error, because the… Read more »


Let me try an example that will clear your thoughts.

Consider the code:

get test() {
    return true;

If you use the following code, the “[visible]” attribute receives “test” as a value.

<input tybe="button" [visible]="test" /> 

But if you use:

<input type="button" (visible)="test"

It receives the value of “test” method.

In other words [] binds the property and () binds the event.
Please, someone correct me if I’m doing wrong.

More details here and here

I hope it helps.