Using a decorator inside an Angular input decorator

Question

How do I use an Angular Input property as a parameter for a custom decorator?

some-component.html

<some-component [key]="'someString'"></some-component>

some.component.ts

export class SomeComponent {
  @Input()
  set key(value: string) {
    @SomeCustomDecorator(value)
  }
}

Jonathan Stellwag · Accepted Answer · 2020-08-25 10:30:51Z

1

If you want for example a log decorator for all your input setters you can use the following decorator/function:

function Log(): any {
  return (target: any, propertyKey: string | symbol, propertyDescriptor: PropertyDescriptor) => {
    const key = Symbol();
    return {
      get() {
        return this[key]; 
      },
      set(newValue: any) {
        console.log('decorator: ', newValue);
        this[key] = newValue;
        if (propertyDescriptor) {
          propertyDescriptor.set(newValue);
        }
        return this;
      }
    }
  }
}

It can be used as the following:

@Input() @Log() foo;
@Input() @Log() set bar(v) {
  console.log('set bar: ', v);
}

The decorator will emit the following logs if you use the @Input() foo or @Input() bar:

decorator: "value"

Running stackblitz

answered Aug 25, 2020 at 10:30

Jonathan Stellwag

4,3055 gold badges30 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

imnew123 Over a year ago

It's not really what i'm looknig for. The value of the Key input property (someString) should be a parameter for the decorator

Jonathan Stellwag Over a year ago

In this example the value of the key input (someString) is available inside the decorator. The value is provided inside the decorator as newValue. Try to check the stackblitz. If you want to give your Decorator an custom param then declare the param in the first line. "function Log(param: any)"

Collectives™ on Stack Overflow

Using a decorator inside an Angular input decorator

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related