DEV Community

Bartosz Pietrucha for Angular

Posted on

[Pro-Tip] Angular Input syntax

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!

Top comments (3)

Collapse
 
peterdavidcarter profile image
Peter David Carter • Edited

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.

Collapse
 
yonnyviz profile image
Yonny Vizcaya

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.

Collapse
 
bartosz_io profile image
Bartosz Pietrucha

🎉🎉🎉