There are several important concepts in  Angular, and Decorators are an important concept to learn when you are working with version 2 and above of Angular. Through this post we will learn about decorators, its types and how it is being used in real time applications.

Decorators are an important concept in TypeScript and since Angular uses Typescript widely, decorators become an important part of Angular as well.

**What are Decorators? **

Decorators are functions that are invoked with a prefixed @ symbol, and are immediately followed by a class, method or property. They allow a service, directive or filter to be changed before being used. Basically, a decorator provides configuration metadata that determines how the component, class or a function should be processed, instantiated and used at runtime.

Angular defines a number of decorators that attach specific kinds of metadata to classes, so that the system knows what those classes mean and how they should work.

There are various types of in-built decorators. Let’s look at each type of decorator in detail.

**Types of Decorators: **

There are four types of decorators and each type further has its own subset of decorators.

**Class Decorators  **

This is the first type of decorator which tells us about a particular class’s intent and helps answer questions like whether the class is a component or a module.

There are various Class decorators in Angular, and among them @Component and @NgModule are widely used.

Let’s see the structure of class decorators via a code snippet.

Explanation:

The below code snippet uses @Component, which is a type of class decorator provided by Angular.

#angular