Boolean Input Properties should accept true/false strings

This issue has been created 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-04
Star Count 84139
Watcher Count 3064
Fork Count 22243
Issue Count 1206

YOU MAY BE INTERESTED

Issue Title Created Date Comment Count Updated Date
bikeshed: consider naming the permission multiscreen instead of window-placement 3 2021-04-08 2022-09-11
convert currency codes 2 2021-12-24 2022-07-19
Can CNI be defined in Deployment and StatefulSet also? 0 2021-08-02 2022-07-24
HX711 doesn't change value when weight it added; random spikes 8 2019-10-27 2022-08-16
Getting 403 error on vps 3 2021-09-11 2022-05-24
Throw custom error if song has no lyrics 1 2021-10-26 2022-05-24
Add warning/error or handle ROOT-incompatible variable/column names 5 2021-10-06 2022-08-16
Image that comes up during Google Search should be logo 0 2022-03-03 2022-07-01
Arrow library is not externalized 1 2020-12-15 2022-10-01
List organizations 1 2022-01-04 2022-01-02
Support for OAuth 2.0 protocol 2 2021-01-23 2022-07-29
Tracking issue for upstream thread 1 2020-02-03 2022-01-02
Set up build / deploy for testing 0 2021-11-30 2022-01-02
Spellforce platinum edition crash on save 11 2022-07-10 2022-09-21
[Issue] Auto-mapping plane or mesh to a texture is backwards 0 2022-02-02 2022-09-25
VsVim for Mac: Vim commands not enabled when editing T4 templates 8 2020-04-12 2022-09-30
ce_command module gives error: 1 2021-10-29 2022-09-15
Unable to login when configured with Apache2 HTTP Server 11 2022-08-04 2022-09-30
TAKE CARE (!!!), that script is VERY VERY DANGEROUS!!!!!!!!!!!!! 3 2021-04-16 2022-10-01
OvenMediaEngine failed to pull RTSP stream 34 2021-10-18 2022-10-04
NordVPN is not starting at all 2 2021-12-07 2022-08-22
Crypto Futures support 6 2021-10-21 2022-09-25
memory leak first time opening large maildir creating hcache 2 2022-06-22 2022-09-30
Null salt? 5 2021-09-17 2022-01-16
Message Bubbles - Polls - Web 0 2021-11-30 2022-10-04
Postman - body Content-Type: application/x-www-form-urlencoded 3 2022-02-01 2022-09-13
v-for vxe-column 渲染表头会挤到一起 2 2022-09-19 2022-10-04
Bump jest-puppeteer from 5.0.4 to 6.0.0 0 2021-09-24 2022-01-28
In CMS version 3.10 the complete help is broken because there is no 3.10 help 5 2021-08-29 2021-12-29
[REQUIREMENT]Ruby client: replace httpclient with faraday 1 2022-04-25 2022-09-13
Matomo plugin? 2 2021-07-18 2022-01-16
System does a watch dog reset and outputs a stack Exception (28) after iterating void loop() 100 times, irrespective of any delays added. 3 2020-01-08 2022-09-08
go.mongodb.org/mongo-driver │ CVE-2021-20329 │ MEDIUM Vulnerability - upgrade to 1.5.1 4 2022-06-29 2022-09-26
Make it possible to disable IPv6 test 0 2021-05-21 2022-08-08
osmangaziedas.com.tr 0 2022-01-24 2022-09-20
Godot is unable to switch processes when Windows Terminal is the default console host 1 2021-11-08 2022-07-31
PHP 8 crash: TypeError: strtotime(): Argument #1 ($datetime) must be of type string, null given in vendor/magento/module-security/Model/AdminSessionInfo.php:136 7 2022-07-28 2022-08-29
Magento 2.4.4 does not support .webp upload 12 2022-07-28 2022-09-29
Clarify child theme requirements 0 2020-02-02 2022-08-07
Entries of Zdnet.fr feed are (almost) never updated 3 2021-03-05 2022-08-09
implement clipboard handling 1 2022-03-04 2022-09-19
File explorer prompt causes extra lines to appear in console. 1 2022-03-04 2022-07-27
Update to Zeebe 1.0 8 2021-05-16 2022-01-16
建议自定义字段也能配置config 0 2021-06-07 2021-12-31
SQL: `select * trades` should be parse error 14 2022-07-04 2022-09-30
chore: Bump node-fetch from 2.6.0 to 2.6.1 1 2020-09-13 2021-11-27
Bump black from 21.5b1 to 21.5b2 in /scrape 1 2021-06-07 2022-09-03
Protobuf + Kafka as a source - 0.10.x fails to ingest a source with unknown message key error. Version 0.9.0 can ingest this sucessfully 0 2021-12-01 2022-07-16
Install error 1 2020-06-20 2022-01-17
Why TextField is not updated with setState 3 2021-10-18 2022-09-18