When building reusable components, using boolean properties, such as checked, disabled, readonly, etc., is extremely common. This ends up looking like this:

class CoolCheckbox {
  private _checked: boolean;

  @Input()
  get checked() {
    return this._checked;
  }

  set checked(v: boolean) {
    // Is "checked" if *any* value is present other than `false` or `"false"`.
    this._checked = value != null && `${value}` !== 'false';
  }
}

This is a lot of boilerplate to create a simple boolean bound property, and something that needs to be done for every boolean @Input. The same problem also applies to number inputs.

A simple approach for TypeScript users might be to create their own decorator, something like

@Input() @BooleanField() checked: boolean;

Unfortunately, this is incompatible with using the offline-compiler, as the presence of user-defined decorators prevents tree-shaking. As such, this seems to be something that should really be built into the framework itself. This could look something like:

class CoolCheckbox {
  @BooleanInput() checked: boolean;
}

@pkozlowski-opensource has encountered the same friction for ngBootstrap.

cc @tbosch @mhevery