Boolean Input Properties should accept true/false strings

This issue has been tracked since 2022-09-22.

Which @angular/* package(s) are relevant/related to the feature request?

common

Description

Let's assume we have a component with a few boolean input properties. At the moment we need to use square brackets to pass static true or false values to it.

<my-component [ripple]="true" [state]="false" [block]="true" [titleVisible]="true"></my-component>

Proposed solution

Instead, it would be much more convenient if a string to boolean conversion is performed by default for boolean input properties:

<my-component ripple="true" state="false" block="true" titleVisible="true"></my-component>

And it would be even better if existent boolean input properties without a value were assumed to be true by default:

<my-component ripple state="false" block titleVisible></my-component>

Alternatives considered

I tried to do this myself on a larger project. I created a BooleanLike type and used a pipe to convert it to boolean. However, this is not maintainable. New developers in the project are not aware that this type exists. It is only project specific. Because of that, the pipe is often forgotten and strange behavior occurs.

my-component.component.ts

@Input() public titleVisible: BooleanLike = false;

my-component.component.html

<div *ngIf="titleVisible | booleanLikeToBoolean" class="title">My title</div>

boolean-like-to-boolean.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
import { BooleanLike } from '../../../../utils/interfaces';

@Pipe({
  name: 'booleanLikeToBoolean',
})
export class BooleanLikeToBooleanPipe implements PipeTransform {
  public transform(value: BooleanLike) {
    return value === true || value === 'true' || value === '';
  }
}
pkozlowski-opensource wrote this answer on 2022-09-22

Duplicate of #8968

More Details About Repo
Owner Name angular
Repo Name angular
Full Name angular/angular
Language TypeScript
Created Date 2014-09-18
Updated Date 2022-10-05
Star Count 84147
Watcher Count 3063
Fork Count 22247
Issue Count 1201

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date