Boolean parameters in LWC

Boolean parameters in LWC

In LWC you can pass parameters values from parent to child, but do you know how to pass a boolean parameter correctly?

import { LightningElement, api } from 'lwc';

export default class MyComponent extends LightningElement {
    @api booleanParameter = false;

    connectedCallback() {
        console.log(this.booleanParameter);
    }
}

<template>
    <c-my-component boolean-parameter="false"></c-my-component>
    <c-my-component boolean-parameter="true"></c-my-component>
</template>

If you’ll try to set boolean parameter in this way, you’ll actually set it as string, either “false” or “true”. You can cast it to boolean later, but why not doing it in right way from the beginning?

<template>
    <c-my-component></c-my-component>
    <c-my-component boolean-parameter></c-my-component>
</template>

In first component we’ve skipped boolean-parameter - in that way our component will use the default value, which is false. In second component simple adding boolean-parameter as attribute (without value) will be parsed as boolean true value.