0

I am from vue/react background and learning Angular. I came across two syntaxeses of @Input so I am confused what do they mean e.g.

<app-component color="red" [background]="yellow"></app-component>

I understand color="red" but why do we pass [] around some props? what is the reason

localhost
  • 822
  • 2
  • 20
  • 51
  • This might be useful https://stackoverflow.com/questions/43633452/when-to-use-square-brackets-in-directives-inputs-and-when-not – wadie Aug 11 '22 at 12:39

1 Answers1

2

When you use the square brackets ([background]="yellow"), you are binding the value of the yellow variable (which should exist in your component). So, Angular looks for the value of the yellow variable, and inserts that value for you.

On the other hand, if you don't use the square brackets (color="red"), there isn't any variable interpolation (i.e. Angular doesn't look for a red variable in your component); you're simply giving the "color" HTML attribute the string "red".

Here's the relevant documentation you can browse to understand this better.

Angel SO
  • 81
  • 7