angularangular6angular-elements

angular 6 element boolean input parameter


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!


Solution

  • 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";
    }