Angular Decorators

Decorators are design patterns used to isolate the modification or decoration of a class without modifying the source code.

In AngularJS, decorators are functions that allow a service, directive, or filter to be modified before it is used.

There are four main types of angular decorators:

  • Class decorators, such as @Component and @NgModule
  • Property decorators for properties inside classes, such as @Input and @Output
  • Method decorators for methods inside classes, such as @HostListener
  • Parameter decorators for parameters inside class constructors, such as @Inject

Each decorator has a unique role. Let's see some examples to expand the types on the list above.

Classroom decorator

Angular provides us with some class decorators. They allow us to tell Angular a particular class is a component or a module, e.g., And the decorator allows us to define this effect without putting any code inside the class.

An @Component and @NgModel decorator used with classes:

It is a component or a module where no code is needed in the class to tell Angular. We need to decorate it, and Angular will do the rest.

Property Decorator

These are the second most common decorators you'll see. They allow us to decorate some properties within our classes.

Imagine we have a property in our class that we want to be an InputBinding.

We have to define this property in our class for TypeScript without the decorator, and tell Angular that we have a property we want to be an input.

With the decorator, we can simply place the @Input() decorator above the property - which AngularJS compiler will create an input binding with the property name and link them.

We would pass the input binding via a component property binding:

We had a different machine using a scope or bindToController with Directives, and bindings within the new component method:

You see above that we have two different properties to maintain. However, a single property instance property is decorated, which is easy to change, maintain and track as our codebase grows.

How to use a decorator?

There are two ways to register decorators

  • Provide $. decorator and
  • Modulus. decorator

Each provides access to the $delegate, which is an immediate service/directive/filter, before being passed to the service that needs it.

$provide.decorator

The decorator function allows access to the $delegate of the service once when it is instantiated.

After the $log service is instantiated, the decorator is fired. In the decorator function, a $delegate object is injected to provide access to the service matching the selector in the decorator. The $delegate will be the service you are decorating.

The function's return value passed to the decorator is the service, directive, or filter being decorated.

$delegate can be either modified or replaced entirely.

Completely Replace the $delegate

Whatever is returned by the decorator function will replace that which is being decorated.

For example, a missing return statement will wipe out the entire object being decorated.

Decorators have different rules for different services. It is because services are registered in different ways. Services are selected by name appending "Filter" or "Directive" selected to the name's end. The type of service dictates the $delegate provided.

Service TypeSelector$delegate
ServiceserviceNameThe objector function returned by the service.
DirectivedirectiveName + 'Directive'An Array1
FilterfilterName + 'Filter'The function returned by the filter

1. Multiple directives will registered to the same selector

Developers should be mindful of how and why they modify $delegate for the service. Not only must there be expectations for the consumer, but some functionality does not occur after decoration but during the creation/registration of the native service.

For example, pushing an instruction such as an instruction object to an instruction $delegate can lead to unexpected behavior.

In addition, great care must be taken when decorating core services, directives, or filters, as this can unexpectedly or adversely affect the framework's functionality.

Modulus. decorator

This function is the same as $provide. It is exposed through the module API except for the decorator function. It allows you to separate your decorator pattern from your module config block.

The decorator function runs during the configuration phase of the app with $provided. Decorator module. The decorator is defined before the decorated service.

You can implement multiple decorators, it is worth mentioning that the decorator application always follows the order of declaration:

If a service is decorated by both $provide.decorator and module.decorator , the decorators are applied in the order:

the service has been declared multiple times, a decorator will decorate the service that has been declared last:-

Example Applications

The below sections provide examples of each service decorator, a directive decorator, and a filter decorator.

Service Decorator Example

This example shows how we can replace the $log service with our own to display log messages.

script.jsindex.htmlstyle.cssprotractor.js

Directive Decorator Example

The Failed interpolated expressions in ng-href attributes will easily unnoticed. We can decorate ngHref to warn us of those conditions.

script.jsindex.htmlprotractor.js

Filter Decorator Example

We have created an application that uses the default format for many of our Date filters. We need all of our default dates to be 'shortDate' instead of 'mediumDate'.

script.jsindex.htmlprotractor.js

Decorators are a core concept when developed with Angular. The internal codebase makes extensive use of decorators.


Next TopicAngular Routing




Latest Courses