What is the correct syntax for setting a custom boolean property in angular2

Question

I would like to set a boolean property on an angular2 component.

Given the following (that is incorrect) ...

.dart

@Component
....
@Input()
bool hasColour = false;

.html

...
<span [class.blue-colour] = 'hasColour'></span>
...

<colour-component hasColour></colour-component>

... how can I fix the above to be able to use hasColour to bind a class?

Thanks

Michael Kang · Accepted Answer · 2016-02-15 06:50:26Z

2

Bind to the hasColour input property:

<colour-component [hasColour]="true"></colour-component>

answered Feb 15, 2016 at 6:50

Michael Kang

53k16 gold badges108 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

st_clair_clarke Over a year ago

I thought the presence of the property was enough to say it is true, like the required property. Why don't I have to put [required] = 'true', but just required?

Michael Kang Over a year ago

When you bind to an Input property, you need to use the proper binding convention ([property]="value"). If you are specifying an attribute directive (like required), then the binding convention is not necessary.

st_clair_clarke Over a year ago

Thanks for the explanation. The solution does work too!

Collectives™ on Stack Overflow

What is the correct syntax for setting a custom boolean property in angular2

.dart

.html

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

.dart

.html

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related