Access Meta-Annotation inside Class (TypeScript)

by

With the new angular version, you should use the native Reflect object. No IE11 support though:

const annotations = Reflect.getOwnPropertyDescriptor(MyModule, '__annotations__').value;

Read Jeff Fairley’s answer below on what to do with the data after that


You can see an annotation/decorator as a normal function call. To this function the ‘Class/Function’ object (not instance) gets send in the first parameter, and the parameters (metadata) in the second argument.

However it depends on the implementation of that function if something gets added for instance to the prototype of the class (bad practice/exposing property). The TypeScript compiler and Angular2 do things differently though.

They use the __decorate and __metadata functions, which are generated by the TypeScript compiler. The data gets added with the Object.defineProperty() function. The package responsible for this is Reflect. (which under the hood uses the Object.defineProperty() function in combination with a WeakMap).

The function Reflect.defineMetadata() is used to set the annotations, and to obtain them the obvious Reflect.getMetadata().

TLDR;

  • To get the annotations from a class/component in angular2, you have
    to use:

    Reflect.getMetadata('annotations', ComponentClass); //@Component({}), @Pipe({}), ...

  • To get the annotations from the constructor paramaters in angular2, you have to use:

    Reflect.getMetadata('parameters', ComponentClass); //@Inject()

  • To get the annotations from a property in a class in angular2, you
    have to use:

    Reflect.getMetadata('propMetadata', ComponentClass); //@HostBinding(), @Input(), ...

More Related Contents:

  1. Expression ___ has changed after it was checked
  2. Angular 2 @ViewChild annotation returns undefined
  3. Angular 2 – Return data directly from an Observable
  4. How to return value from function which has Observable subscription inside?
  5. How do I actually deploy an Angular 2 + Typescript + systemjs app?
  6. Define global constants
  7. How to use moment.js library in angular 2 typescript app?
  8. Chaining RxJS Observables from http data in Angular2 with TypeScript
  9. How can I declare a global variable in Angular 2 / Typescript? [closed]
  10. When I refresh my website I get a 404. This is with Angular2 and firebase
  11. Extending component decorator with base class decorator
  12. How can I listen for keypress event on the whole page?
  13. How do you deploy Angular apps?
  14. How to avoid imports with very long relative paths in Angular 2?
  15. Angular2 – Http POST request parameters
  16. Angular 2 View will not update after variable change in subscribe
  17. Select based on enum in Angular2
  18. Angular2 handling http response
  19. Angular 2 2.0.0-rc.1 Property ‘map’ does not exist on type ‘Observable’ not the same as issue report
  20. angular2 bootstrap with data from ajax call(s)
  21. Integrating Material Design Lite with Angular2
  22. How to use select/option/NgFor on an array of objects in Angular2 [duplicate]
  23. RxJs get value from observable
  24. How to create an Observable from static data similar to http one in Angular?
  25. RxJs Array of Observable to Observable of Array
  26. Angular2 HTTP GET – Cast response into full object
  27. How to implement Custom Async Validator in Angular2/4/5
  28. Import gapi.auth2 in angular 2 typescript
  29. What exactly $event object do in Angular 2?
  30. How to deal with http status codes other than 200 in Angular 2

Leave a Comment