Proposal: one-time boolean bindings

🚀 feature request

Relevant Package

This feature request is for @angular/core and @angular/compiler? I am not very familiar with the infrastructure.

Description

First of all, I am not referring to the AngularJS one-time bindings (:: prefix) in any capacity. This request is a logical extension of the one-time string bindings which already exist in the new Angular.

<!-- Regular binding -->
<mat-icon [fontIcon]="someIconVariable"></mat-icon>

<!-- One-time binding to literal string -->
<mat-icon fontIcon="cloud-upload"></mat-icon>

I have found the above feature of Angular to be exceptionally nice (along with many others!) and could not care less that we no longer have explicit one-time bindings to variables as they made it easy to introduce bugs and the performance gains pale in comparison to those netted by AOT compilation anyways.

However, a common pattern in AngularJS material, as well as many of my own components, is to support empty attributes for boolean properties, which would be the same as binding to a literal true. I believe empty attributes are not technically valid XML, but it is a common practice in HTML where the presence of an attribute makes it truthy and the absence of the attribute makes it falsy, such as putting required on an <input>.

With my proposed change, the following two examples would be equivalent.

<!-- This works -->
<user-card [userID]="selectedUserID" [showAdminControls]="true"></user-card>

<!-- This would be nice :^) -->
<user-card [userID]="selectedUserID" showAdminControls></user-card>

With this feature, you can either bind a boolean to the input as usual or just include the attribute without a binding, causing Angular to set the property to true and then leave it alone, just as the existing one-time string literal bindings work.

Describe the solution you’d like

Sorry, but I am not familiar with the Angular source code, so I have no idea how this would be implemented. The best I can do for now is to write a pretty issue and hope it garners some attention.

Describe alternatives you’ve considered

To implement this on my components, I basically just set the initial value of the property to whether the attribute is present and empty.

// ...
export class UserCardComponent {
    // ...
    @Input() showAdminControls = hasEmptyAttr(this.host.nativeElement, "showAdminControls");
    // ...
}

This approach is tedious and requires the programmer to keep the property/attribute names in sync. AFAIK the template compiler always reports unrecognized properties it finds in the HTML but a typo in the string in the hasEmptyAttr(...) call would result in a subtle bug.

[samclaus]

@thefliik Yes, that is what I am suggesting. Setting it to an empty string is rather useless.

[angular-robot[bot]]

Thank you for submitting your feature request! Looks like during the polling process it didn’t collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular’s scope, we’d encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.