0

I'm working with Angular material and I'm facing the following problem.

In the example here, you can change the background using this code:

<mat-tab-group [backgroundColor]="backgroundColorToggle.value">

but for me, it didn't work. Btw I'm not using the variable but just a string:

<mat-tab-group [backgroundColor]="primary">

In the end, I tried the following and it worked:

<mat-tab-group backgroundColor="primary">

In my own component, as an input parameter (@Input()) I can use both: <app-my-component [input]=..> and <app-my-component input=..>

So what the difference between [input]="value" and input="value" and why in my component both worked and in Angular material it didn't.

Community
  • 1
  • 1
NikNik
  • 2,191
  • 2
  • 15
  • 34
  • that is called property binding when using `[bColor]="color"` and here, `color` must have component property.. if we simply want to pass string into then, we do not have to use property binding syntax just use `bColor="blue"` here, blue is simple string. – Developer Feb 21 '20 at 09:56
  • Check this post https://stackoverflow.com/questions/43633452/when-to-use-square-brackets-in-directives-inputs-and-when-not – Fahd Lihidheb Feb 21 '20 at 10:03
  • Thank you all for helping. I do agree that there are similar questions that could help me to understand – NikNik Feb 24 '20 at 07:32

3 Answers3

2

backgroundColor is a input property which expects a string. Square Bracket expects a property.

Therefore the syntax will be:

<mat-tab-group [backgroundColor]="'primary'">

or,

<mat-tab-group backgroundColor="primary">

or,

.ts

primary = 'primary';

.html

<mat-tab-group [backgroundColor]="primary">
Adrita Sharma
  • 21,581
  • 10
  • 69
  • 79
1

Using square brackets binds an attribute to a public property in your component.

This example would attempt to apply the value of the primary property in your component:

component.html

<mat-tab-group [backgroundColor]="primary">
</mat-tab-group>

component.ts

primary: string = 'red';

Whereas doing the same without square brackets sets the attribute to the literal value in the HTML.

<mat-tab-group backgroundColor="red">
</mat-tab-group>

These two examples are equivalent

Kurt Hamilton
  • 12,490
  • 1
  • 24
  • 40
1

Square brackets imply binding, whereas omitting them does an attribute assignment (there's more to it, which I'll cover later). If you're doing a binding, the value in quotes has to be a JavaScript expression.

This line:

<mat-tab-group backgroundColor="primary">

simply assigns the value "primary" to the attribute backgroundColor. If the value "primary" doesn't exist, it depends on the component what to do with it.

This line:

<mat-tab-group [backgroundColor]="primary">

is a binding to a field named primary. It implies that in order to assign the attribute value, Angular will look for a field named primary, read its value and assign that instead. If the field named primary does not exist, it will assign a value of undefined. For example, if you have this:

primary = 'red';

then the second statement (with binding) will actually assign the value of "red" to your attribute, whereas the first statement (no binding) will still assign a value of "primary".

There are three additional things to note:

  1. You can also do a binding by omitting the square brackets and using double braces instead, e.g. <mat-tab-group backgroundColor="{{primary}}">. The two are exactly equivalent, but the square bracket style is more familiar to everyone and you should always use it unless you have a good reason.
  2. Because the binding accepts a JavaScript expression, you can supply more than a simple field, e.g. <mat-tab-group [backgroundColor]="primary || secondary">, will assign the value from the secondary field if primary is undefined. Also, <mat-tab-group [backgroundColor]="shade + 'blue'"> will evaluate the field shade and add the value "blue" to it, yielding "lightblue" or "darkblue" depending on the value of shade.
  3. If the property you're assigning to is boolean, then it becomes really easy to mess it up. <my-comp active="true"> assigns a the text "true" to the active property, whereas <my-comp [active]="true"> assigns the boolean value true. This may be an important distinction in your code, or may not. And since the two look so similar, I have personally missed that mistake for months. There are probably still a few lurking around somewhere.
Cobus Kruger
  • 8,338
  • 3
  • 61
  • 106