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

In this Video, I am going to discuss the Angular Component Decorator in Detail. Please read our previous Video where we discussed the basics of Angular Components with some examples. At the end of this Video, 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.

Metadata Properties of Component Decorator in Angular

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. 

See All

Comments (391 Comments)

Submit Your Comment

See All Posts

Related Posts

Angular / Blog

What is Angular?

Angular is an open-source front-end development platform developed by Google that makes it easy to build Mobile and Desktop web applications. Angular now comes with the latest features such as templates, dependency injection, Forms, Pipes, HTTP Service, component, Directives, etc. which are basically needed to build a complex and sophisticated application that lives on the web, mobile, or the desktop.
7-Feb-2022 /35 /391

Angular / Blog

What is Angular 2 (or any higher version) Framework?

In this article, I am going to give a brief introduction to Angular Framework. At the end of this article, you will understand the following pointers in detail.
7-Feb-2022 /35 /391

Angular / Blog

What is Angular Versions and Versioning in Detail?

In this article, I am going to discuss Angular Versions and Versioning in detail. Please read our previous article where we gave a brief introduction to the angular framework. At the end of this article, you will understand the different angular versions and in each version what are the new features introduced as well as what improves. Till now Google has released 7 versions of angular, they are as follows:
7-Feb-2022 /35 /391