Rediscovering JavaScript: ES6, ES7 & ES8/

...

/

Introspecting the Decorated Class

Introspecting the Decorated Class

Let's introspect the decorated class and use the Babel library to transpile the Angular decorator.

We'll cover the following...

Once a class is decorated with Angular decorators like @Component, @Pipe, @Directive, and so on, Angular can read the metadata to figure out what to do with them.

In our example, where we simulated the Angular @Component decorator, we stored the properties given to the decorator into the metadata.

Verification by example

Let’s verify that the decoration actually worked.

{ 
    "presets": ["es2016"],
    "plugins": [
      "transform-decorators-legacy"
    ]
}
src/index.mjs

Explanation

  • We import SampleComponent and query for its metadata keys by calling Reflect.getMetadataKeys(); this method is added to the Reflect class by the reflect-metadata library that we imported earlier.

  • Then we obtain the metadata for the annotations property using the Reflect.getMetadata() method.

Files in src folder

Let’s summarize the effect of all the decorator-related ...