Pass true or false to component?

Can you pass true or false directly into a component from a template?

passing “true” would pass the string value, not the boolean.

passing true would be interpreted as a variable or property defined in the component, and since it’s not defined, would pass in a bad value to the component.

^ the last paragraph is incorrect

The guides don’t address passing booleans directly. It seems silly to define a property named true in the controller just so that you can pass true in the template.

Is there another way, or is this actually it?,js,output

bool=true or bool=false is the way to go. Apparently {{false}} doesn’t work even if you have a controller with “false”: “hullo”.

1 Like

since that’s exactly what i’m doing, I must be doing something else wrong,…

we can pass arguments to component as bool = true/false, but when it goes to child component it will be converted automatically to string. so in child component this.bool results in this.bool = “true”/“false”

if you are not sure check the variable inside ember inspector

This isn’t really true in classic or glimmer components. A boolean might be coerced to a string when rendering or consuming the value in a context that expects a string, but otherwise you’ll get exactly what you pass. For example:

// parent component template
<ChildComponent @isActive={{true}} />

// child component js
  get showActiveBadge() {
    return this.args.isActive; // will return boolean `true`, not string

I am new to ember. I am learning ember 3.8.

Is there any chance that what you said might be version specific because I checked twice before commenting and it was passing the boolean values as strings

edit: got it. I was passing it as


instead of