question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

fr(cdk/coercion): coercion decorators

See original GitHub issue

Feature 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:closed
  • Created 4 years ago
  • Reactions:1
  • Comments:5 (4 by maintainers)

github_iconTop GitHub Comments

2reactions
devversioncommented, May 29, 2020

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.

0reactions
angular-automatic-lock-bot[bot]commented, Jul 7, 2020

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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found