[Pro-Tip] Angular Input syntax

bartosz_io profile image Bartosz Pietrucha ・1 min read

It's time for another Angular Knowledge Pill! πŸ’Š It takes just 10 seconds to learn something new πŸ”₯ Like taking your morning vitamins πŸ˜ƒ

When you use [input]="value" then Angular interprets the value as an expression. So you can place there a variable reference from the component or even mathematic formula. When you use input="value" then the value is interpreted as a string! Take a look at the example:

Alt Text

If you would like to receive this kind of knowledge pills directly into your mailbox, subscribe at https://angular-academy.com/blog/. I will be sending them regularly! Remember, it just takes 10 seconds to learn something new!


This is where we write about all things Angular. It's meant to be a place for Angular community and people interested in Angular and the Angular ecosystem.


markdown guide

Important to note as the conventional understanding is that bracketed syntax represents a binding and non-bracketed a static value. As such you might expect foo="false" to be false, but in fact, since it's a string, TypeScript/JavaScript will interpret it as truthy. Counter-intuitively, static value booleans require the square bracket 'binding' syntax.


Great tip!. This actually happened to me long time ago, I was trying to pass a string instead of a component's property; Took me almost 30min to figure that out hehe, I guess I learned the hard way. Cheers. Thanks for sharing.