I'm building out an angular element and passing some input params to it. I can pass some string input params just fine (ikrId and environment work perfectly) but struggling to pass a boolean value to the showTitle input property through an angular element (passing the showTitle property to the component from a parent angular component works just fine).
Here's component snippet:
export class MyComponent implements OnInit, OnDestroy {
@Input() ikrId: string;
@Input('environment') environment: IkrEnvironment = 'PROD';
@Input('showTitle') showTitle = true;
Here is how I'm using it in plain old html:
<my-element environment="DEV" ikr-id="889fb69f-71a5-4881-8528-0b43a07599f0" show-title="false"></my-element>
But show title is not getting passed into my component, it's always true.
What am I missing here?
Thanks!
You could define the showTitle
property as a getter/setter, and convert the string value to a boolean in the setter:
private _showTitle = true;
@Input('showTitle')
get showTitle(): boolean {
return this._showTitle;
}
set showTitle(value: boolean) {
this._showTitle = "" + value !== "false";
}