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

Question

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?

Answer 1

When you use [] to bind to an @Input(), it's basically a template expression.

The same way displaying {{abc}} wouldn't display anything (unless you actually had a variable called abc).

If you have a string @Input(), and you want to bind it to a constant string, you could bind it like this: [myText]=" 'some text' ", or in short, like a normal HTML attribute: myText="some text".

The reason [myEnabled]="true" worked is because true is a valid template expression which of course evaluates to the boolean true.

Answer 2

If you write <img [src]="heroImageUrl"> it means that the right-hand side heroImageUrl is a template expression.

The simple difference between [myText]="abc" and myText="abc" is that in former you are asking angular to set the target PROPERTY myText using the template expression abc, while in the latter you setting the target property called myText using the string 'abc'.

Let's understand a little more about HTML.

In HTML you can define an element like this.

<input type="text" value="Bob"> 

input is an element whose attributes are type and value. When your browser parses this, it will create a DOM entry (an object) for this element. The DOM entry will have some properties like align, baseURI, childNodes, children etc. So, that's the difference between HTML attributes and DOM properties See reference. Sometimes the attribute and property have same names which causes confusion. For above input tag, it has the attribute value = Bob and also has a property value that will have the value of whatever you type in the text box. In summary, attribute is what you define about the tag, and property is what gets generated in the DOM tree.

In the world of Angular, the only role of attributes is to initialize element and possibly directive state. When you write a data binding, you're dealing exclusively with properties and events of the target object. HTML attributes effectively disappear.

So to summarize, in <div [myDirective]="myDefaultText" [myEnabled]="true" [myText]="abc"></div> you essentially are saying that:

1. apply the directive myDirective to my div element.
2. bind the variable myEnabled to the expression on the right. The expression says true, so the value of myEnabled is true.
3. bind the variable myText to the expression on the right. The expression says abc. Is there any abc defined? No, so the expression evaluated to undefined.