attribute directive syntax with and without square bracket []

Question

The attribute directives are supposed to use selectors with selector:'[myDirective]' syntax and then used in templates like <p myDirective ></p>'. I also see that ngClass is an attribute directive and usage is like [ngClass]="'class1 class2'". I want to know when is square bracket used and when it is not. Is it related to some relation between directive selector and property binding with the same name ?

Answer 1

Square brackets are used when an expression need to be evaluated. ngClass can be used without brackets. Below code will treat class1 and class2 as normal string.

ngClass="class1 class2"

Answer 2

I think it depends on what kind of entity your are working with. In selectors you can, if you working on a component either write:

selector:'[myComponent]'  => <div myComponent></div>

or

selector:'myComponent'   => <myComponent></myComponent>

When it comes attribute binding, you could write

<div [title]="theTitleProperty"></div>

which will bind the html title attribute to the value of the components property theTitleProperty. (alt div title="{{theTitleProperty}}") while

<div title="theTitleProperty"></div>

will give the title the value 'theTitleProperty''

an alternative to ngClass could be

<div [class]="theClassProperty"></div>

And then its the @Inputs to a component. Any component might have an @Input you can use it with both bracket or not If you have a component with @Input() aText:string; you could use it like this:

<my-component [aText]="myTextProperty"></div>

And it would send the control property myTextProperty to the components @Input But if you write like this

<my-component aText="myTextProperty"></div> 

It would send myTextProperty into the component.

Hope it helps a little