fr(cdk/coercion): coercion decorators
See original GitHub issueFeature Description
Instead of repetitive
@Input()
set disabled(disabled: boolean) {
this._disabled = coerceBooleanProperty(disabled);
}
get disabled() {
return this._disabled;
}
private _disabled = false;
We could write:
@Input()
@CoerceBoolean()
disabled = false;
Use Case
Describe the use case(s) that the proposed feature would enable.
I think the coercion methods the CDK provides are super useful as they are for anyone writing serious libraries. I do however find myself writing the same setters and getters over and over again, and in conjunction with strictTemplates
and ngAcceptInputType_*
this get’s a bit cumbersome.
So I am wondering now if maybe we could get some decorators in place instead? Are there any serious downsides to it that I fail to see at the moment?
A first POC CoerceBoolean
decorator:
function CoerceBoolean() {
return function(target: object, propertyKey: string, descriptor?: PropertyDescriptor) {
let _value = false;
return Object.defineProperty(target, propertyKey, {
set(value: BooleanInput) {
_value = coerceBooleanProperty(value);
descriptor?.set?.(_value);
},
get() {
return descriptor?.get?.() ?? _value;
},
configurable: descriptor?.configurable,
enumerable: descriptor?.enumerable,
});
};
}
Issue Analytics
- State:
- Created 4 years ago
- Reactions:1
- Comments:5 (4 by maintainers)
Top Results From Across the Web
Why I use decorators for coersion in Angular | by Denis Loh
When you write components you will typically come across the requirement of providing input fields, which shall be used as an attribute flag ......
Read more >Property type coercion in Angular using decorators
Write custom decorator functions that coerce the types of your Angular components' inputs.
Read more >coerce-property - npm
coerce-property. Utility decorator functions for coercing Angular component @Inputs into specific types. Uses Angular CDK coercions.
Read more >Coercion - Angular Material
Utility functions for coercing @Input s into specific types. ... NumberInput, coerceNumberProperty, coerceElement, } from '@angular/cdk/coercion'; ...
Read more >node.js - @angular/cdk and @angular/form build errors after ...
\node_modules\@angular\cdk\coercion\array.d.ts(10,77): error TS1011: Build:An element access ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Correct. View Engine does not strip decorators away at all. Ivy only strips Angular-known decorators away. Angular build-optimizer only strips known Angular decorators either.
So that definitely could work. If I recall correctly though, there were implications in terms of tree-shaking. I think we can track this as an upstream issue as the components team believes in this being something that should be addressed at framework level.
This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.