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 on

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

πŸŽ‰πŸŽ‰πŸŽ‰

This post blew up on DEV in 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!