What is Angular Component Decorator?. The Complete Angular Developer Course 2023 [Videos].

In this article, I am going to discuss the Angular Component Decorator in Detail. Please read our previous article where we discussed the basics of Angular Components with some examples. At the end of this article, you will understand the Component Decorator and the different properties of component decorator in detail.

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 runtime. If you are a dot net developer then you can compare this with the attribute in C# and if you are a java developer then you can compare this with annotations in Java.

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:

In order to understand what metadata properties are provided by the component decorator, please have a look at the following image.

Let us understand each of the above metadata.

1. changeDetection â€“ change the detection strategy used by this component.
2. templateUrl â€“ URL in an external file that contains a template for the view.
3. template â€“ template defined inline template for the view.
4. viewProviders â€“ list of providers available for this component and the view of their children.
5. animations â€“ animations list of this component.
6. moduleId â€“ Module ID ES / CommonJS of the file in which this component is defined.
7. encapsulation â€“ strategy of style encapsulation used by this component.
8. styleUrls â€“ URL list for style sheets that will be applied to the view of this component.
9. interpolation â€“ custom interpolation markers used in the template of this component.
10. styles â€“ styles defined online that will be applied to the view of this component.
11. preserveWhitespaces â€“ Using this property, we can remove all whitespaces from the template.
12. entryComponents â€“ entryComponents is the list of components that are dynamically inserted into the view of this component.

We will discuss each of these metadata properties in detail, as we progress through this course.