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.
Code Snippet
Summary
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 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
@MyComponent({
selector: 'component',
template: '<hello></hello>'
})
class HelloComponent {
}
Now when you need to get the metadata, just do
let metadata = Reflect.getMetadata('annotations', HelloComponent);Summary
In this tutorial we discussed Angular Component Decorator. If have any question related to this topic then give your feedback.
Post a Comment