Header add

In this article we will discuss what is angular Component Decorator and different properties of Component Decorator. If you miss our previous article then please go through link Angular Component.

What is the Component Decorator in Angular?

Whenever you want to make a class as a component, then you need to decorate that class with @Component decorator.

The @Component decorator in angular provides metadata to a component that determines how to process, instantiate and use the component at run time. The Component Decorator in Angular accepts one object and using that object you can configure the required metadata information to create and display the component in real-time.

Metadata Properties of Component Decorator:

The below are the details list of metadata properties provided by the component decorator.
  • changeDetection – change the detection strategy used by this component.
  • templateUrl – URL in an external file that contains a template for the view.
  • template – template defined inline template for the view.
  • viewProviders – list of providers available for this component and the view of their children.
  • animations – animation’s list of this component.
  • moduleId – Module ID ES / CommonJS of the file in which this component is defined.
  • encapsulation – strategy of style encapsulation used by this component.
  • styleUrls – URL list for style sheets that will be applied to the view of this component.
  • interpolation – custom interpolation markers used in the template of this component.
  • styles – styles defined online that will be applied to the view of this component.
  • preserveWhitespaces – Using this property, we can remove all whitespaces from the template.
  • entryComponents – entryComponents is the list of components that are dynamically inserted into the view of this component.

Code Snippet 

The easiest way, if you want to reproduce something similar is to
 Install the reflect-metadata.
npm install --save reflect-metadata
Create the decorator function
import 'reflect-metadata';
interface MyComponentMetadata {
  template?: string;
  selector?: string;
function MyComponent(metadata: MyComponentMetadata) {
  return function(ctor: Function) {
    // add metadata to constructor
    Reflect.defineMetadata('annotations', metadata, ctor);
Use it
  selector: 'component',
  template: '<hello></hello>'
class HelloComponent {
Now when you need to get the metadata, just do
let metadata = Reflect.getMetadata('annotations', HelloComponent);
The purpose of the metadata is to provide information for Angular to know what to do with the class. So the decorator doesn't really need to be anything more than just a metadata provider. Angular decides what to do with the metadata, not the decorator function.

In this tutorial we discussed Angular Component Decorator. If have any question related to this topic then give your feedback.

You May Also Like...

Post a Comment

Previous Post Next Post