Angular profile image Angular

[Pro-Tip] Angular Input syntax

twitter logo ・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!

twitter logo DISCUSS (3)
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.

 
Classic DEV Post from Feb 15

What was your win this week?

Got to all your meetings on time? Started a new project? Fixed a tricky bug?

Angular profile image
One framework. Mobile and desktop.

Want to contribute to open source and help make the Angular community stronger?

All the angular code is freely available on GitHub.

You're welcome to jump in!