When to use square brackets [ ] in directives @Inputs and when not?

I'm confused a little.

See this simple directive:

@Directive({
selector: '[myDirective]'
})
export class MyDirective {

private text: string;
private enabled: boolean;

@Input() myDirective:string;

@Input('myText')
set myText(val: string) {
this.text = val;
}

@Input('myEnabled')
set myEnabled(val: boolean) {
this.enabled = val;
}

ngOnInit() {

console.log("myDirective string: " + this.myDirective);
console.log("myText string: " + this.text);
console.log("myEnabled boolean: " + this.enabled);
}
}


if my html will look like this:

<div [myDirective]="myDefaultText" [myEnabled]="true" [myText]="abc"></div>


The output will be:

myDirective string: myDefaultText real value // good
myEnabled boolean: true // good
myText string: undefined // Why?


If I REMOVE the [] from myText:

<div [myDirective]="myDefaultText" [myEnabled]="true" myText="abc"></div>


The output will be:

myDirective string: myDefaultText real value // good
myEnabled boolean: true // good
myText string: abc // GOOD


I can also remove the [] from myEnabled and it will work too. So here is my confusion - when I need to use square brackets [] and when not, while I want the user who is going to use myDirective will never need to wonder if or if not, I think the square brackets [] should always be there. Aren't they?

Continue reading...