what is annotation angular

Hi, I'm Nicholas Johnson!

software engineer / trainer / AI enthusiast

What's the difference between annotations and decorators in Angular?

TL;DR: Annotations and decorators are two competing and incompatible ways to compile the @ symbols that we often see attached to Angular components. Annotations create an “annotations” array. Decorators are functions that receive the decorated object and can make any changes to it they like.

Traceur gives us annotations. TypeScript gives us decorators. Angular supports both.

One of the humps you’ll likely run into when learning about Angular is this initially non-obvious distinction between Annotations and Decorators. The two, although sharing a syntax, are actually almost entirely different and represent two superficially similar, but actually radically different ways of thinking about how the little @ symbols should work in Angular and future JavaScript.

Annotations and Decorators are two very different language features competing for the @ symbol. Although the syntax is identical, they are not the same; the difference is not even subtle. Read on to find out more.

What they look like:

You will have noticed that an Angular component is often written like this:

This is obviously not JavaScript, but it can be compiled to JavaScript using Traceur (annotations) or TypeScript (decorators). The two compilers will treat this annotation very differently. Let’s look at what we get.

Annotations (as used in Traceur and AtScript (now defunct) )

Annotations are a hardcoded language feature. When I annotate a class (really just a newable function), the compiler creates an attribute on that class called “annotations”, stores an array in it, then tries to instantiate an object with the same name as the annotation, passing the metadata into the constructor. The annotated object can then make any use of this ‘annotations’ array that it likes.

Google’s Traceur compiler includes annotations as an experimental feature. If we run the above code through Traceur, we get the following:

Have a play with this code in the Traceur REPL here.

The key thing to notice here is this bit:

Paraphrasing somewhat, Traceur is actually generating something like this:

An annotations property is being defined on MyComponent, which is populated with a newly instantiated Component object. This is what annotations do. They just create this array. You are then free to do what you like with the array. Angular inspects it to decide how to treat the component.

Decorators are different (better?). A decorator is a function that receives the object to be decorated. It is then free to modify the object in any way it likes.

Decorators are implemented by the TypeScript compiler. TypeScript compiles the MyComponent code like this:

Have a play with this code in the TypeScript playground here.

The key part is here (to paraphrase):

Our component calls __decorate , which is defined automatically whenever we decorate something. Our component passes __decorate an array of decorators, and itself. The decorators are just functions. Each decorator function will receive the object, and can modify it in any way you see fit.

It follows that we can easily use decorators to implement annotations, but we can also do anything else we like. We might add attributes, modify attributes, run conditional code, even create and return a completely new object.

Relect.decorate

If you have sharp eyes, you may have noticed that TypeScript tries to shell out to a native Reflect.decorate, before running all the decorators. It turns out that Relect.decorate is in the draft ES7 specification. A polyfill is defined in the angular2-polyfills.js file.

Annotations create an ‘annotations’ array. When the compiler encounters an annotation, it:

• Creates an ‘annotations’ attribute on the annotated object and puts an array in it.
• Instantiates a new object using a constructor with the same name at the annotation, passes the annotated metadata to this new object constructor, and stores the generated object in the annotations array.

Your code can make use of your annotations in any way you see fit.

Google’s Traceur uses annotations.

Decorators are functions that receive the object under construction. Being functions they can modify the object in any way they like, adding or modifying any attributes you see fit to change.

MicroSoft’s TypeScript uses decorators.

Performance implications

Annotations, being harcoded, are much simpler for an optimising compiler to deal with, and for a code hinter to parse. They potentially offer more performant code, at the expense of a great deal of fun and flexibility. They are solid, staid, enterprise, (boring?)

Decorators, allow for arbitrary object changes (or even changes beyond the object). They are thus much harder for a compiler to reason about and optimise for. It is harder to provide code hinting for decorators, because you can’t know for sure what they will do. They might even do something naughty like an eval, or modify the object differently depending on the time of day. They allow for all sorts of fun features, like metaprogramming. They are much more - what I would call - JavaScripty.

Decorators and Annotations in Angular

Both Decorators and Annotations are supported by Angular. This is a legacy thing because Angular 2 swapped from AtScript to TypeScript while it was still in development.

• Compiling with Traceur? You have annotations .
• Handcoding ES5 or ES6 with the annotations style? You have annotations .
• Compiling with TypeScript? You have decorators .
• Handcoding ES5 or ES6 with the Lucid API (my favourite)? You have decorators .

The main difference you will notice is your imports. Because annotations and decorators are different, you will need to import different objects.

If you are using decorators, your imports will look like normal TypeScript imports:

If you are using annotations then you’ll have to import the annotation version of the core angular components

Otherwise, your Angular code will remain unchanged.

Which should you use?

Decorators are the default, and the most fun, but also offer more flexibility, and therefore more scope for screw-ups. If you work in a bank, or you don’t trust your co-workers, use annotations. Otherwise, you should probably use decorators.

Further reading

• Decorators & metadata reflection in TypeScript: From Novice to Expert

Pascal Precht

The difference between Annotations and Decorators

Last year, the Angular team announced it’s ECMAScript language extension AtScript, which adds types and annotations to the language in order to enable better tooling, debugging and overall development experience. Half a year later at ng-conf, the team announced that AtScript becomes TypeScript, which supports annotations and another feature called “decorators”.

But how do those annotations actually work? And what are decorators then? This article details the translation of annotations and how they differ from decorators.

Annotations

Let’s start off with annotations. As mentioned, the Angular team announced AtScript as their language extension to JavaScript. AtScript comes with features like Type Annotations , Field Annotations and MetaData Annotations . We’re going to focus on metadata annotations. Let’s take a look at the following Angular component to get an idea of what metadata annotations can look like:

We have a class Tabs that is basically empty. The class has one annotation @Component . If we’d remove all annotations, what would be left is just an empty class that doesn’t have any special meaning right? So it seems that @Component add some metadata to the class in order to give it a specific meaning. This is what annotations are all about. They are a declarative way to add metadata to code.

@Component is an annotation that tells Angular, that the class, which the annotation is attached to, is a component.

Okay, even if that seems to be quite clear, there are a few questions coming up:

• Where do those annotations come from? This is nothing that JavaScript gives us out of the box right?
• Who defined this annotations called @Component ?
• If this is part of AtScript, what does that translate to, so we can use it in today’s browsers?

Let’s answer these one by one. Where do those annotations come from? To answer that question, we need to complete the code sample. @Component is something we need to import from the Angular framework like this:

This pretty much answers our first question. Both annotations are provided by the framework. Let’s take a look at what the implementation of those annotations look like:

We can see that ComponentMetadata is in fact an implementation detail of the Angular framework. This answers our second question.

But wait. It’s just yet another class? How can just a simple class change the way how other classes behave? And why are we able to use those classes as annotations by just prefixing them with an @ sign? Well, actually we can’t. Annotations are not available in browser’s of today, which means we need to transpile it to something that does run in current browsers.

Even though we have a couple of transpilers we can choose from. Babel, Traceur, TypeScript, … It turns out there’s only one that actually implements annotations as we know them from AtScript: Traceur. Taking the component code from above, this is what it translates to using Traceur:

In the end, a class is just a function, which is also just an object, and all annotations end up as instance calls on the annotations property of the class. When I said “all” annotations end up there, I actually lied a bit. We can have parameter annotations as well and whose will be assigned to a class’ parameters property. So if we have code like this:

This would translate to something like this:

The reason why this translate to a nested array, is because a parameter can have more than one annotation.

Okay, so now we know what those metadata annotations are and what they translate to, but we still don’t know how something like @Component makes a normal class actually a component in Angular. It turns out that Angular itself takes care of that. Annotations are really just metadata added to code. That’s why @Component is a very specific implementation detail of Angular. In fact, there are a couple of other annotations that the framework comes with. But also only the framework knows what to do with that information.

Another very interesting learning is that Angular expects the metadata on annotations and parameters properties of classes. If Traceur would not translate them to those particular properties, Angular wouldn’t know from where to get the metadata. Which makes AtScript Annotations just a very specific implementation of what annotations could actually be.

Wouldn’t it be nicer if you as a consumer could decide where your metadata is attached to in your code? Yes! And this is where decorators come into play.

Decorators are a proposed standard for ECMAScript 2016 by Yehuda Katz, to annotate and modify classes and properties at design time. This sounds pretty much like what annotations do right? Well… sort of. Let’s take a look at what a decorator looks like:

Wait. This looks exactly like an AtScript annotation! That’s right. But it isn’t. From a consumer perspective, a decorator indeed looks like the thing that we know as “AtScript Annotation”. There is a significant difference though. We are in charge of what our decorator does to our code. Taking the code above, a corresponding decorator implementation for @decoratorExpression could look like this:

Right. A decorator is just a function that gives you access to the target that needs to be decorated. Get the idea? Instead of having a transpiler that decides where your annotations go, we are in charge of defining what a specific decoration/annotation does.

This, of course, also enables us to implement a decorator that adds metadata to our code the same way AtScript annotations do (I keep referring to “AtScript annotations” because what they do, is really an AtScript specific thing). Or in other words: with decorators, we can build annotations.

There’s a lot more to explore about decorators, but that is out of the scope of this article. I recommend checking out Yehuda’s proposal to learn more about the feature.

Does TypeScript support Annotations or Decorators?

As you might know, the Angular team announced earlier this year that they’re going to drop the term “AtScript” in favour of TypeScript, since both languages seem to solve the same problems. In addition, there were announcements that TypeScript will support annotations and decorators once version 1.5 alpha is out.

It turns out that it actually doesn’t. TypeScript supports decorators, but doesn’t know about Angular specific annotations. Which makes sense, because they are an implementation detail of Angular. That also means that either we as consumers, or the framework needs to provide those decorators in order to make the code compile. Only the latter really makes sense. Luckily, generators for both, annotation and parameter decorators, have landed in the Angular code base lately. So what the framework behind the scenes does is, it comes with metadata annotation implementations, which are then passed to the decorator generator to make decorators out of them. That’s also why we have to write the following code when transpiling with traceur:

As we can see, we’re actually importing the metadata rather than the decorator. This is simply just because traceur doesn’t understand decorators, but does understand @Component annotations. Which is why we’re also importing them with these namespaces respectively.

“AtScript Annotations” and decorators are nearly the same thing. From a consumer perspective we have exactly the same syntax. The only thing that differs is that we don’t have control over how AtScript annotations are added as metadata to our code. Whereas decorators are rather an interface to build something that ends up as annotation. Over a long term, however, we can just focus on decorators, since those are a real proposed standard. AtScript is deprecated, and TypeScript implements decorators.

I hope this article made some things clear though.

Angular Book

TypeScript introduces decorators feature, metadata expressions similar to Java annotation tags or C# and Swift attributes. ECMAScript does not yet have native support for annotating classes and class members (the feature is in the proposal state), so decorators is an experimental TypeScript feature.

Decorators have a traditional notation of @expression where expression is the name of the function that should be invoked at runtime.

This function receives decorated target as a parameter and can be attached to:

• class declaration

Class Decorators

Class decorators are attached to class declarations. At runtime, the function that backs the decorator gets applied to the class constructor. That allows decorators inspecting, modifying or even replacing class instances if needed.

Here's a simple example of the LogClass decorator that outputs some log information every time being invoked:

Now you can use newly created decorator with different classes:

When a new instance of TextWidget class is created, the @LogClass attribute will be automatically invoked:

The class decorator should produce the following output:

Decorators with parameters

It is also possible passing values to decorators. You can achieve this with a feature known as decorator factories . A decorator factory is a function returning an expression that is called at runtime:

Let's create another simple decorator with log output that accepts additional prefix and suffix settings:

It can now be tested with the TextWidget class created earlier:

You have marked TextWidget class with the LogClassWithParams decorator having a prefix and suffix properties set to BEGIN: and :END values. The console output, in this case, should be:

Multiple decorators

You are not limited to a single decorator per class. TypeScript allows declaring as much class and member decorators as needed:

Note that decorators are called from right to left, or in this case from bottom to top. It means that first decorator that gets executed is:

and the last decorator is going to be

Method Decorators

Method decorators are attached to class methods and can be used to inspect, modify or completely replace method definition of the class. At runtime, these decorators receive following values as parameters: target instance, member name and member descriptor.

Let's create a decorator to inspect those parameters:

Below is an example of this decorator applied to a render method of TextWidget class:

The console output in this case will be as following:

You can use decorator factories also with method decorators to support additional parameters.

This decorator can now be applied to methods. You can attach multiple decorators to a single method:

Note that decorators are called from right to left, or in this case from bottom to top. If you run the code the output should be as follows:

Accessor Decorators

Accessor decorators are attached to property getters or setters and can be used to inspect, modify or completely replace accessor definition of the property. At runtime, these decorators receive following values as parameters: target instance, member name and member descriptor.

Note that you can attach accessor decorator to either getter or setter but not both. This restriction exists because on the low level decorators deal with Property Descriptors that contain both get and set accessors.

Let's create a decorator to inspect parameters:

Now the decorator can be applied to the following TextWidget class:

Once invoked the decorator should produce the following output:

Same as with class and method decorators you can use decorator factories feature to pass parameters to your accessor decorator.

TypeScript allows using more than one decorator given you attach it to the same property accessor:

The console output should be as shown below, note the right-to-left execution order:

In case you declare decorator for both accessors TypeScript generates an error at compile time:

Property Decorators

Property decorators are attached to class properties. At runtime, property decorator receives the following arguments:

• target object
• property name

Due to technical limitations, it is not currently possible observing or modifying property initializers. That is why property decorators do not get Property Descriptor value at runtime and can be used mainly to observe a property with a particular name has been defined for a class.

Here's a simple property decorator to display parameters it gets at runtime:

The output in this case should be as following:

Parameter Decorators

Parameter decorators are attached to function parameters. At runtime, every parameter decorator function is called with the following arguments:

• parameter name
• parameter position index

Due to technical limitations, it is possible only detecting that a particular parameter has been declared on a function.

Let's inspect runtime arguments with this simple parameter decorator:

You can now use this decorator with a class constructor and method parameters:

Parameter decorators are also executed in right-to-left order. So you should see console outputs for positionY and then positionX :

Get 73% off the Angular Master bundle

See the bundle then add to cart and your discount is applied.

Write Angular like a pro.

Follow the ultimate Angular roadmap.

Ultimate Courses

A deep dive on Angular decorators

by Todd Motto

Jan 26, 2017

11 mins read

Learn Angular the right way.

The most complete guide to learning Angular ever built. Trusted by 82,951 students .

with Todd Motto

Decorators are a core concept when developing with Angular (versions 2 and above). There’s also an official TC39 proposal , currently at Stage-2, so expect decorators to become a core language feature soon in JavaScript as well.

Back to Angular, the internal codebase uses decorators extensively and in this post we’re going to look at the different types of decorators, the code they compile to and how they work.

Table of contents

Class Decorators

Property decorators, method decorators, parameter decorators, decorator functions, passing data to a decorator, storing metadata, chaining decorators, how decorators are applied.

When I was first introduced to TypeScript and decorators, I wondered why we needed them at all, but once you dig a little deeper you can understand the benefits to creating decorators (not only for use in Angular).

AngularJS didn’t use decorators, opting for a different registration method - such as defining a component for example with the .component() method. So why has Angular chose to use them? Let’s explore.

Angular Decorators

Before we look at creating a custom decorator and why/how Angular uses them, let’s look at the different types of decorators that Angular offers. There are four main types:

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

Each decorator has a unique role, let’s jump to some examples to expand on the list above.

Angular offers us a few class decorators. These are the top-level decorators that we use to express intent for classes. They allow us to tell Angular that a particular class is a component, or module, for example. And the decorator allows us to define this intent without having to actually put any code inside the class.

A @Component and @NgModule decorator example with classes:

Notice how both classes by themselves are effectively the same. No code is needed within the class to tell Angular that it is a component or a module. All we need to do is decorate it, and Angular will do the rest.

These are probably the second most common decorators that you’ll come across. They allow us to decorate specific properties within our classes - an extremely powerful mechanism.

Let’s take a look at @Input() . Imagine that we have a property within our class that we want to be an input binding.

Without decorators, we’d have to define this property in our class anyway for TypeScript to know about it, and then somewhere else tell Angular that we’ve got a property that we want to be an input.

With decorators, we can simply put the @Input() decorator above the property - which Angular’s compiler will automatically create an input binding from the property name and link them.

We’d then pass the input binding via a component property binding:

The property decorator and “magic” happens within the ExampleComponent definition.

In AngularJS 1.x (I’m going to use TypeScript here also, just to declare a property on a class), we had a different mechanism using scope or bindToController with Directives, and bindings within the new component method :

You can see above that we have two separate properties to maintain should we expand, refactor or change our component’s API - bindings and the property name inside the class. However, in Angular there is a single property exampleProperty which is decorated, which is easier to change, maintain and track as our codebase grows.

Directives, simple right? Wrong! On the outside they look simple, but even skilled Angular devs haven’t grasped every concept in this eBook.

That went smoothly, check your email.

Method decorators are very similar to property decorators but are used for methods instead. This let’s us decorate specific methods within our class with functionality. A good example of this is @HostListener . This allows us to tell Angular that when an event on our host happens, we want the decorated method to be called with the event.

Parameter decorators are quite interesting. You may have come across these when injecting primitives into a constructor, where you need to manually tell Angular to inject a particular provider.

For a deep dig into Dependency Injection (DI), tokens, @Inject and @Injectable , check out my previous article .

Parameter decorators allow us to decorate parameters in our class constructors. An example of this is @Inject that lets us tell Angular what we want that parameter to be initiated with:

Due to the metadata that TypeScript exposes for us we don’t actually have to do this for our providers. We can just allow TypeScript and Angular to do the hard work for us by specifying the provider to be injected as the parameter type :

Now that we’ve covered the types of decorators we can use, let’s dig into what they actually are doing - and why we need them.

Creating a decorator

It makes things a lot easier if we understand what a decorator is actually doing before we look into how Angular uses them under the hood. To do this, we can create a quick example decorator.

Decorators are actually just functions, it’s as simple as that, and are called with whatever they are decorating. A method decorator will be called with the value of the method it’s decorating, and a class decorator will be called with the class to be decorated.

Let’s quickly make a decorator that we can use on a class to demonstrate this a little further. This decorator is just going to simply log the class to the console:

Here, we have created Console (using the uppercase naming convention Angular uses) and are specifying a single argument called target . The target will in fact be the class that we decorate, which means we can now decorate any class with our decorator and see it outputted in the console:

Want to see it in action? Check out the live demo .

When we use the decorators in Angular we pass in some form of configuration, specific to the decorator.

For example, when we use @Component we pass through an object, and with @HostListener we pass through a string as the first argument (the event name, such as 'click' ) and optionally an array of strings for further variables (such as $event ) to be passed through to the decorated method.

Let’s change our code above to execute the Console function with a value to match how we use the Angular decorators.

If we ran this code now, we’d only get 'Hey!' outputted to the console. That’s because our decorator hasn’t returned a function for the class to be given to. The output of @Console('Hey!') is void .

We would need to adapt our Console decorator to return a function closure for the class to be given to. That way we can both receive a value from the decorator (in our case, the string Hey! ) and also the class that it’s applied to:

You can see the changes here .

This is the basis for how the decorators in Angular work. They first of all take a configuration value and then receive the class/method/property to apply the decoration to. Now that we have a brief understanding of what a decorator actually does, we’re going to walk through how Angular creates and uses it’s own decorators.

What Angular decorators actually do

Every type of decorator shares the same core functionality. From a purely decorative point of view, @Component and @Directive both work in the same way, as do @Input and @Output . Angular does this by using a factory for each type of decorator.

Let’s look at the most common decorator in Angular, the @Component .

We’re not going to dive into the actual code that Angular uses to create these decorators because we only need to understand them on a higher level.

The whole point of a decorator is to store metadata about a class, method or property as we’ve already explored. When you configure a component for example, you’re providing metadata for that class that tells Angular that we have a component, and that component has a specific configuration.

Each decorator has a base configuration that you can provide for it, with some defaults applied for you. When the decorator is created using the relevant factory, the default configuration is passed through. For instance, let’s take a look at the possible configuration that you can use when creating a component:

There are a lot of different options here, and you’ll notice that only one has a default value - changeDetection . This is specified when the decorator is created so we don’t need to add it whenever we create a component. You may have applied this line of code to modify the change strategy:

An annotation instance is created when you use a decorator. This merges the default configuration for that decorator (for instance the object you see above) with the configuration that you have specified, for example:

Would create an annotation instance with the properties of:

Once this annotation instance has been created it is then stored so Angular can access it.

If a decorator is used on a class for the first time, it creates a new array and pushes the annotation instance into it. If this isn’t the first decorator that has been used on the class, it pushes it into the existing annotation array. This allows decorators to be chained together and all stored in one place.

For example, in Angular you could do this for a property inside a class:

At the same time, Angular also uses the reflect API (commonly polyfilled using reflect-metadata ) to store these annotations, using the class as an array. This means that it can then later on fetch all of the annotations for a specific class just by being pointed to the class.

So we know now how and why Angular uses decorators, but how are they actually applied to a class?

As mentioned, decorators aren’t native to JavaScript just yet - TypeScript currently provides the functionality for us. This means that we can check the compiled code to see what actually happens when we use a decorator.

Take a standard, ES6 class -

TypeScript will then convert this over to a function for us:

Now, if we decorate our class, we can see where the decorators are then actually applied.

TypeScript then outputs:

This gives us some actual context as to how our decorators are applied.

The __decorate call is a helper function that would be outputted at the top of our compiled file. All that this does is apply our decorators to our class, (calling ConsoleGroup('ExampleClass') with ExampleClass as the argument).

Demystifying decorators is one step into understanding some more of the Angular “magic” and how Angular uses them. They give Angular the ability to store metadata for classes and streamline our workflow simultaneously.

Related blogs 🚀

Angular's @if and @else control flow explained.

Angular templates just got the best upgrade in years: control flow blocks.

Dec 4, 2023

Binding Angular Route Params to Component @Input

ActivatedRoute just left the chat. Say hello to router input bindings straight to your components.

Nov 23, 2023

Angulars NgIf, Else, Then - Explained

Angular’s NgIf directive doesn’t need to be complicated, yet you’re here because it kind of is. So let’s take it back to basics and uncover NgIf, E...

Oct 18, 2023

Using ngStyle in Angular for dynamic styling

In this tutorial you’ll learn how to dynamically apply CSS styles in Angular via ngStyle, but we’ll also cover the style property binding for full ...

Mar 13, 2023

Passing data into Angular components with @Input

Angular components are the building blocks of applications, and component communication via one-way data flow is the key to writing clean Angular a...

Mar 11, 2023

Get the Current Route or URL with the Angular Router

In this post you’ll learn how to get the current route, or URL, with the Angular router.

Mar 4, 2023

Free eBooks:

You've got mail! Enjoy.

Cookies are used to analyze traffic and optimize experience.

A newer version of this site just became available. Please refresh this page to activate it.

• ES6 JavaScript & TypeScript

Simple No-Argument Decorator

Decorators with arguments.

We’ve seen in the quickstart that in Angular we can decorate a class with extra info using the  @ syntax, like so:

This is a new feature that will probably make it into the  ES7 version of JavaScript, it’s not available right now however even in the ES6 version.

However the functionality is available in TypeScript, so we can already make use it.

It allows us to  decorate classes and functions, similar to annotations in Java and decorators in Python.

Specific Angular implementations might be more complex and harder to read and understand but the concept is actually quite simple.

I’m going to explain by creating a decorator called @course for our Person class

@course is just a  function , like so:

The first argument to the course function is the  target .

This is the  thing the decorator is attached to, so for a class it’s going to be the  function constructor for that class, the  under-the-hood implementation of a class.

Knowing this we can actually dynamically add a function to our Person class by using the  Object.defineProperty function,

The details of the Object.defineProperty function are beyond the scope of this chapter. We use it to add a function called course onto the class it decorates and for now this function just returns the string “Angular 2”.

We can now call asim.course() and this prints out "Angular 2" :

But how do we pass arguments to our decorator, like the way the  @Component decorator works?

We create a function that returns a decorator, like so:

We pass a  config object to the outer Student function.

Then use that config in the returned inner decorator function.

Now we can use this decorator like so:

Decorators are a new feature of TypeScript and used throughout the Angular code, but they are nothing to be scared of.

With decorators we can configure and customise our classes at design time.

They are just functions that can be used to add meta-data, properties or functions to the thing they are attached to.

A collection of useful decorators, for use in your projects or just to read and learn, can be found here: https://github.com/jayphelps/core-decorators.js

Caught a mistake or want to contribute to the book? Edit this page on GitHub!

Advanced JavaScript

This unique course teaches you advanced JavaScript knowledge through a series of interview questions. Bring your JavaScript to the 2021's today .

Level up your JavaScript now!

• AngularJS Tutorial
• AngularJS Directives
• AngularJS Functions
• AngularJS Filters
• AngularJS Examples
• AngularJS Interview Questions
• Angular ngx Bootstrap
• AngularJS Cheat Sheet
• AngularJS PrimeNG
• Web Technology
• What are Directives in AngularJS ?
• What are Decorators in TypeScript ?
• What are templates in AngularJS ?
• HostListener Decorators in Angular 17
• Attribute Directives in Angular
• What are decorators and how are they used in JavaScript ?
• What is the factory function in Angular ?
• What is Angular Expression ?
• What is a custom directive in Angular?
• What is View in AngularJS ?
• What is Angular ?
• Design Patterns in Angular
• Purpose of NgModule Decorator in Angular
• Built-in directives in Angular
• Angular PrimeNG Tree Events
• Constructor vs ngOnInit in Angular
• Angular PrimeNG Inplace Methods
• call() decorator in Python
• Decorators in Python

What are decorators in Angular?

In Angular decorators are important for defining and configuring various application elements , providing an easy way to enhance the classes with additional functionality and provide metadata. In this article, we’ll take a detailed look at the concept of Decorators in Angular.

Table of Content

What are Decorators in Angular?

Types of decorators in angular, uses of decorators in angular.

In Angular, decorators are functions that are used to modify the behavior of classes and their members . They provide a way to add metadata or apply transformations to code elements. In Angular, decorators are extensively used to define components, services, directives, pipes, modules, and more.

In Angular, there are four main types of decorators-

• Class Decorators: Class decorators are applied to classes to modify their behavior or metadata. The examples include @Component, @Directive and @NgModule.
• Property Decorators: Property decorators are applied to the class properties and are commonly used to modify the properties within the classes. For example, @Input decorator makes a property as an input binding, allowing it to bound to the external data.
• Method Decorators: Method decorators are applied to the class methods and modify their behavior or add additional functionalities. For example, @HostListener allows us to listen for events on a method.
• Parameter Decorators: The Parameter decorators are used for parameters inside class constructors. The parameter decorators provide additional information about constructor parameters. For example, The @Inject decorator allows to specify dependencies for dependency injection.
• Component Configuration: Use @Component to define the metadata of Angular components, including template, styles, and selector.
• Service Definition: Mark a class with @Injectable to make it injectable as a service throughout the application.
• Directive Behavior: Implement @Directive to attach custom behavior to elements in the DOM.
• Pipe Transformation: Utilize @Pipe to define custom data transformation logic for templates.
• Module Organization: Use @NgModule to structure Angular modules and manage dependencies.
• Input and Output Handling: Use @Input and @Output to pass data between parent and child components.
• View Management: Utilize @ViewChild and @ViewChildren to access child components or elements in the view.

1. @Component Decorator:

In this example we’ll a look at the @Component decorator to define a simple angular component. This decorator provides metadata such as component’s selector, template and styles. The @Component decorator informs the Angular’s compiler how to process the Component.

Step 1: Create a new Angular project using the following command.

Step 2: move to the project directory using the below command.

Step 3: Create a new component ‘GreetingComponent’ using the below command.

Folder Structure:

Dependencies:

Step 4: Apply the below changes to the Greeting component.

Step 5: Apply and save all the changes and run the application using the following command.

output for example 1

2. Creating a Custom Decorator:

In this example, we’ll create a custom ‘@Log’ decorator that logs method invocations along with the parameters and the return values.

Step 1: Create a TypeScript class using the following command.

Step 2: Create a example component to use the decorator using the following command.

Step 3: Update the following files with these codes.

Step 4: Apply and save all the changes and run the application using the following command.

output for example 2

Please Login to comment...

Similar reads.

• AngularJS-Basics
• Web Technologies

Improve your Coding Skills with Practice

What kind of Experience do you want to share?

Angular Decorators

Back to: Angular Tutorials For Beginners and Professionals

Angular Decorators in Detail

In this article, I am going to discuss Angular Decorators in Detail. Please read our previous article where we discussed Modules in Angular Application. At the end of this article, you will understand what exactly Angular Decorators are and the different decorators available and their use in angular application.

What are Angular Decorators?

Decorators are the features of Typescript and are implemented as functions. The name of the decorator starts with @ symbol following by brackets and arguments. That means in angular whenever you find something which is prefixed by @ symbol, then you need to consider it as a decorator.

The decorator provides metadata to angular classes, property, value, method, etc. and decorators are going to be invoked at runtime.

Understanding Decorators:

If you open the app.module.ts file, then you will find AppModule which is the root module of the angular application. Further, if you notice, this AppModule is nothing but it’s a class. Now the question is why we call this class a Module? This is because this class is decorated with @NgModule decorator as shown in the below image. Here, the @NgModule decorator provides the necessary metadata to make the AppModule class as a module.

Note: If you want to create a module in angular, then you must decorate your class with @NgModule decorator. Once a class is decorated with @NgModule decorator, then only the class works as a module.

Commonly used Decorators:

There are many built-in decorators are available in angular. Some of them are as follows:

• @NgModule to define a module.
• @Component to define components.
• @Injectable to define services.
• @Input and @Output to define properties, etc.

We already discussed the need and use of NgModule decorator and as we progress in this course, we will discuss the rest of the decorators. In fact, in the next article, we will discuss Angular Component and in that article, I will show you the use of @Component decorator.

Note: All the above built-in decorators are imported from @angular/core library and so before using the above decorator, you first need to import the decorators from @angular/core library. For example, if you want to use the component decorator, then first you need to import the component decorator as shown below.

import { Component } from ‘@angular/core’;

Types of Decorators in Angular:

In Angular, the Decorators are classified into 4 types. They are as follows:

• Class Decorators: @Component and @NgModule
• Property Decorators: @Input and @Output (These two decorators are used inside a class)
• Method Decorators: @HostListener (This decorator is used for methods inside a class like a click, mouse hover, etc.)
• Parameter Decorators: @Inject (This decorator is used inside class constructor).

Note: In Angular, each decorator has a unique role.

We will discuss each of the above decorators in detail as we progress in this course. In the next article, I am going to discuss Angular Components in detail. Here, in this article, I try to give an overview of Angular Decorators . I hope you enjoy this article and got an overview of Angular Decorators.

About the Author: Pranaya Rout

Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.

5 thoughts on “Angular Decorators”

Great explanation. Thanks!

great explanation…..loved it

got it , explained it well , Dhanyawaad

Great explanation..Thanks alot ,I loved it too much.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Advisory boards aren’t only for executives. Join the LogRocket Content Advisory Board today →

• Product Management
• Solve User-Reported Issues
• Find Issues Faster
• Optimize Conversion and Adoption
• Start Monitoring for Free

Understanding the ViewChild and ViewChildren decorators in Angular 10

The @ViewChild and @ViewChildren decorators in Angular provide access to child elements in the view DOM by setting up view queries. A view query is a requested reference to a child element within a component view which contains metadata of the element. The scope of these decorators is limited to the component view and its embedded child views. These decorators are especially helpful in instances where being able to access and modify elements within the view in conventional ways is not possible.

For example, if a library ships with a component or directive with a public non-input or non-output property you’d like to change, these decorators would allow you to access and modify them. These decorators are also helpful in exposing providers configured in child components to inject dependencies ( like services, configuration values, etc. ) that the main component may not have access to.

In this article, we will cover how to use the @ViewChild and @ViewChildren decorators, what their properties do, and how to specify their properties.

View queries and AfterViewInit lifecycle hook

The AfterViewInit lifecycle hook is called when the component view and its child views are completely initialized. So for immediate modifications or assignments, the best place to access view queries would be in the ngAfterViewInit callback because the view queries are already resolved and set. Trying to access them before ngAfterViewInit responds may generate undefined values. However, the @ViewChild decorator provides a static property that can be set to resolve a view query before change detection runs. We’ll cover how to use this property below.

The ViewChild decorator

This decorator takes three properties, a selector , a read , and a static property. The read and static properties are optional. These properties are specified like this:

Supported ViewChild selectors

The selector property specifies what child element within the component view is to be queried. According to the @ViewChild documentation, five kinds of selectors are supported. These are:

1) Classes with @Component or @Directive decorators

In this first example, MenuItemComponent is a queried from the MenuComponent view:

Here’s an example with a directive:

2)  A template reference variable as a string. Template reference variables are commonly used within templates but in this instance, it is used to configure a view query:

3) A provider defined in the child component tree of the current component. In this example, the SampleService is specified as a provider token for the FirstChildComponentClass . Since <first-child> is an element in the ParentComponent we can access the SampleService from it using the SampleService class as a token:

4) A provider defined through a string token. Although this is stated in the documentation , getting a provider through this method returns undefined values. This is a regression in Ivy which is enabled by default in Angular 9. A fix for this has been made but as of the publication of this article, it has not been included in any release. To get this to work, you’ll need to disable Ivy in the tsconfig.json file and use ViewEngine instead:

Here’s how you can use a provider defined through a string token as a selector:

However, if you’d like to use this type of selector with Ivy, you can use the read property to acquire a view query:

5) A TemplateRef . It’s possible to access embedded templates using the @ViewChild decorator, which can then be used to instantiate embedded views with ViewContainerRef :

For a better understanding of how to use these view queries once configured, check out these live examples for each of these kinds of selectors. They illustrate how you can use view queries to access and modify embedded views.

Using the read property

The read property lets you select various tokens from the elements you query. These tokens could be provider tokens used for dependency injection or in some cases, be the type of view query. This is an optional property.

In the example below, the FirstChildComponent has a provider configuration with all kinds of dependency tokens like a class, string tokens, and an injection token. These tokens in conjunction with the read property can expose these dependencies to parent components that embed the FirstChildComponent . All these dependencies have been accessed in the ParentComponent using the ViewChild decorator and the read property specifying each of the corresponding tokens.

It’s also possible to specify the type the view query should be, using the read property. In the same example, the fcElementRef and fcComponent properties are both queries of FirstChildComponent but are of different types based on what the read property was specified as:

Using the static property

The static property takes a boolean value and is optional. By default, it is false. If it is true, the view query is resolved before the complete competent view and data-bound properties are fully initialized. If set to false, the view query is resolved after the component view and data-bound properties are completely initialized.

In this example, the paragraph element is queried using both true and false static properties and the values logged for each in the ngOnInit and ngAfterViewInit callbacks:

This is what will be logged:

In the ngOnInit callback, none of the interpolated values have been initialized but with { static: true} , the staticName view query is already resolved but the nonStaticName is undefined. However, after the AfterViewInit event, all the view queries have been resolved.

You can view these live examples that better illustrate how to use the read and static properties with the @ViewChild decorator.

ViewChildren

The @ViewChildren decorator works similarly to the @ViewChild decorator but instead of configuring a single view query, it gets a query list. From the component view DOM, it retrieves a QueryList of child elements. This list is updated when any changes are made to the child elements. The @ViewChildren decorator takes two properties, a selector and a read property. These properties work in the same way as in the @ViewChild decorator. Any child elements that match will be part of the list. Here’s an example:

The length of allLabels will be three as all the <item-label> will be selected. The QueryList has a number of methods you could use to manipulate the view queries.

For a more expansive illustration of how to use the @ViewChildren decorator and specify the read property, check out this example .

The @ViewChild and @ViewChildren decorators are excellent utilities for querying child elements in views. Understanding how to use them gives you more options for customizing component views. If you’d like to see more about how to use them, check out these examples .

Experience your Angular apps exactly how a user does

Debugging Angular applications can be difficult, especially when users experience issues that are difficult to reproduce. If you’re interested in monitoring and tracking Angular state and actions for all of your users in production, try LogRocket .

LogRocket is like a DVR for web and mobile apps, recording literally everything that happens on your site including network requests, JavaScript errors, and much more. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred.

The LogRocket NgRx plugin logs Angular state and actions to the LogRocket console, giving you context around what led to an error, and what state the application was in when an issue occurred.

Modernize how you debug your Angular apps — start monitoring for free .

Share this:

• Click to share on Twitter (Opens in new window)
• Click to share on Reddit (Opens in new window)
• Click to share on LinkedIn (Opens in new window)
• Click to share on Facebook (Opens in new window)

Stop guessing about your digital experience with LogRocket

Recent posts:.

An advanced guide to Vitest testing and mocking

Use Vitest to write tests with practical examples and strategies, covering setting up workflows, mocking, and advanced testing techniques.

Optimizing rendering in Vue

This guide covers methods for enhancing rendering speed in Vue.js apps using functions and techniques like `v-once`, `v-for`, `v-if`, and `v-show`.

Using Google Magika to build an AI-powered file type detector

Magika offers extremely accurate file type identification, using deep learning to address the limitations of traditional methods.

Unistyles vs. Tamagui for cross-platform React Native styles

Unistyles and Tamagui both help address the challenges of creating consistent and responsive styles across different devices.

One Reply to "Understanding the ViewChild and ViewChildren decorators in Angular 10"

In one word : Wow. This tutorial has 1) In-depth explanation of all the possibilities 2) Examples I was writing notes as I read through the article. An explanation by a Pro

Leave a Reply Cancel reply

What Is Metadata In Angular?

Charlotte Miller

Updated on: June 7, 2024

Are you curious to know what is metadata in angular ? You have come to the right place as I am going to tell you everything about  metadata in angular  in a very simple explanation. Without further discussion let’s begin to know what is metadata in angular ?

Angular, a popular JavaScript framework, is renowned for its powerful features and robust architecture that simplifies web development. One of the critical elements in Angular is “metadata.” In this blog, we’ll delve into what metadata in Angular is, why it is essential, and how it plays a pivotal role in building dynamic and interactive web applications.

In Angular, metadata refers to the configuration information that decorators provide. Decorators are functions that modify JavaScript classes, allowing you to add metadata to various program elements. Metadata provides Angular with essential information about the application, such as how components, directives, and services should behave. Metadata is often specified using TypeScript decorators like @Component, @Directive, and @Injectable.

Why Is Metadata Essential In Angular?

Metadata in Angular is critical for several reasons:

• Component Configuration : Metadata is used to define and configure components. It specifies the template, styles, selector, and other characteristics of a component, allowing Angular to understand how to create, render, and manipulate it.
• Module Configuration : Metadata plays a central role in configuring Angular modules. Modules are an essential part of structuring an Angular application , and metadata specifies which components, directives, and services belong to a particular module.
• Dependency Injection : Metadata is used to define services and their dependencies. Dependency injection is a core concept in Angular, and metadata provides information about how services should be created and provided.
• Custom Directives and Pipes : Metadata is crucial for creating custom directives and pipes. It defines the behavior and usage of these custom constructs, allowing developers to extend Angular’s functionality.
• Lazy Loading : Metadata is used to implement lazy loading, a technique that loads parts of an application only when they are needed. This helps improve performance by reducing the initial load time.

Example Of Metadata In Angular

Let’s consider an example of metadata in Angular by examining a component decorator:

import { Component } from ‘@angular/core’;

@Component({

  selector: ‘app-example’,

  templateUrl: ‘./example.component.html’,

  styleUrls: [‘./example.component.css’]

export class ExampleComponent {

  // Component logic here

In this example, the @Component decorator provides metadata that tells Angular how to handle the ExampleComponent. It specifies the component’s selector, template, and styles. Angular uses this metadata to render the component and make it available for use within the application.

Metadata in Angular is a fundamental concept that shapes the behavior and structure of your application. It provides essential configuration information that tells Angular how components, modules, and services should behave. Understanding metadata and how to use decorators to provide it is a key skill for developing dynamic, interactive, and efficient web applications with Angular. It’s the foundation upon which Angular’s powerful features and capabilities are built, making it a crucial aspect of web development with this framework.

What Is Mean By Metadata In Angular?

Metadata is used to decorate the class so that it can configure the expected behavior of a class. Decorators are the core concept when developing with Angular (versions 2 and above). The user can use metadata to a class to tell Angular app that AppComponent is the component.

What Is Metadata In Angular Interview Questions?

Metadata is used to decorate a class so that it can configure the expected behavior of the class. Following are the different parts for metadata. Annotations − These are decorators at the class level. This is an array and an example having both the @Component and @Routes decorator.

How To Create Metadata In Angular?

To build an Angular component, you need to use the component decorator on a class. The component decorator comes from the core scope package in Angular. So we can add an import statement for the component decorator from the Angular core scope package at the top of this file.

What Is Component Metadata?

Component Metadata. The component class provides specific metadata for components by extending the ManagedObject class. The UIComponent class provides additional metadata for the configuration of user interfaces or the navigation between views.

I Have Covered All The Following Queries And Topics In The Above Article

What Is Metadata In Angular With Example

Decorators In Angular

Directives In Angular

Component Metadata In Angular

Types Of Decorators In Angular

Modules In Angular

Services In Angular

Annotations In Angular

What Is Metadata In Angular

What is meta tag in Angular

most recent

What Is Normality?

The allure of green pear diamond:

What Is JIPMER Exam?

What Is Floating Charge?

What Is Mist Spray?

What Is Subscribed Capital?

• EJ2 Angular
• image editor

Syncfusion HelpBot

Annotation in the Angular Image Editor component

27 Apr 2024 24 minutes to read

The Angular Image Editor allows adding annotations to the image, including text, freehand drawings, and shapes like rectangles, ellipses, arrows, paths, and lines. This gives the flexibility to mark up the image with notes, sketches, and other visual elements as needed. These annotation tools can help to communicate and share ideas more effectively.

Text annotation

The text annotation feature in the Image Editor provides the capability to add and customize labels, captions, and other text elements directly onto the image. With this feature, you can easily insert text at specific locations within the image and customize various aspects of the text to meet your requirements.

You have control over the customization options including text content, font family, font style and font size for the text annotation.

The drawText method in the Angular Image Editor allows you to insert a text annotation into the image with specific customization options. This method accepts the following parameters:

x: Specifies the x-coordinate of the text, determining its horizontal position within the image.

y: Specifies the y-coordinate of the text, determining its vertical position within the image.

text: Specifies the actual text content to be added to the image.

fontFamily: Specifies the font family of the text, allowing you to choose a specific typeface or style for the text.

fontSize: Specifies the font size of the text, determining its relative size within the image.

bold: Specifies whether the text should be displayed in bold style. Set to true for bold text, and false for regular text.

italic: Specifies whether the text should be displayed in italic style. Set to true for italic text, and false for regular text.

color: Specifies the font color of the text, allowing you to define the desired color using appropriate color values or names.

isSelected: Specifies to show the text in the selected state.

By utilizing the drawText method with these parameters, you can precisely position and customize text annotations within the image. This provides the flexibility to add labels, captions, or other text elements with specific font styles, sizes, and colors, enhancing the visual presentation and clarity of the image.

Here is an example of adding a text in a button click using drawText method.

• app.component.ts

Multiline text

The drawText method in the Angular Image Editor component is commonly used to insert text annotations into an image. If the provided text parameter contains a newline character (\n), the text will be automatically split into multiple lines, with each line appearing on a separate line in the annotation.

Here is an example of adding a multiline text in a button click using drawText method.

Delete a text

deleteShape method in the Angular Image Editor allows you to remove a text annotation from the image editor. To use this method, you need to pass the shapeId of the annotation as a parameter.

The shapeId is a unique identifier assigned to each text annotation within the image editor. It serves as a reference to a specific annotation, enabling targeted deletion of the desired text element. By specifying the shapeId associated with the text annotation you want to remove, you can effectively delete it from the image editor.

To retrieve the inserted text annotations, you can utilize the getShapeSetting method, which provides a collection of annotations represented by ShapeSettings . This method allows you to access and work with the annotations that have been inserted into the image.

Here is an example of deleting a text in a button click using deleteShape method.

Customize font family and text color

The shapeChanging event in the Image Editor component is triggered when a text annotation is being modified or changed through the toolbar interaction. This event provides an opportunity to make alterations to the text’s color and font family by adjusting the relevant properties.

By leveraging the shapeChanging event, you can enhance the customization options for text annotations and provide a more tailored and interactive experience within the Image Editor component.

Here is an example of changing the text’s color and its font family using the shapeChanging event.

Add Additional font family

The fontFamily property in the Image Editor control provides the flexibility to incorporate supplementary font families, expanding your options for text styling and ensuring a broader range of fonts can be utilized within your design or content. The font value will be determined by the ‘id’ property.

By leveraging the fontFamily property, you can elevate the scope of customization for text annotations, enriching the user experience within the Image Editor control. This enhancement offers a more personalized and dynamic interaction, empowering users to tailor their text styles for a truly engaging editing experience.

Freehand drawing

The Freehand Draw annotation tool in the Angular Image Editor component is a versatile feature that allows users to draw and sketch directly on the image using mouse or touch input. This tool provides a flexible and creative way to add freehand drawings or annotations to the image.

The freehandDraw method is used to enable or disable the freehand drawing option in the Angular Image Editor component.

Here is an example of using the freeHandDraw method in a button click event.

Adjust the stroke width and color

The shapeChanging event in the Angular Image Editor component is triggered when a freehand annotation is being modified or changed through the toolbar interaction. This event provides an opportunity to make alterations to the freehand annotation’s color and stroke width by adjusting the relevant properties.

By leveraging the shapeChanging event, you can enhance the customization options for freehand annotations and provide a more tailored and interactive experience within the Image Editor component.

Here is an example of changing the freehand draw stroke width and color using the shapeChanging event.

Delete a freehand drawing

The deleteShape method in the Angular Image Editor allows you to remove a freehand annotation from the image editor. To use this method, you need to pass the shapeId of the annotation as a parameter.

The shapeId is a unique identifier assigned to each freehand annotation within the image editor. It serves as a reference to a specific annotation, enabling targeted deletion of the desired annotation. By specifying the shapeId associated with the freehand annotation you want to remove, you can effectively delete it from the image editor.

To retrieve the inserted freehand annotations, you can utilize the getShapeSetting method, which provides a collection of annotations represented by ShapeSettings . This method allows you to access and work with the annotations that have been inserted into the image.

Here is an example of deleting a freehand annotation in a button click using deleteShape method.

Shape annotation

The Image Editor component provides the ability to add shape annotations to an image. These shape annotations include rectangles, ellipses, arrows, paths, and lines, allowing you to highlight, emphasize, or mark specific areas or elements within the image.

Add a rectangle /ellipse / line / arrow / path

The drawRectangle method is used to insert a rectangle to the Angular Image Editor component. Rectangle annotations are valuable tools for highlighting, emphasizing, or marking specific areas of an image to draw attention or provide additional context.

The drawRectangle method in the Angular Image Editor component takes seven parameters to define the properties of the rectangle annotation:

x: Specifies the x-coordinate of the top-left corner of the rectangle.

y: Specifies the y-coordinate of the top-left corner of the rectangle.

width: Specifies the width of the rectangle.

height: Specifies the height of the rectangle.

strokeWidth: Specifies the stroke width of the rectangle’s border.

strokeColor: Specifies the stroke color of the rectangle’s border.

fillColor: Specifies the fill color of the rectangle.

degree: Specifies the degree to rotate the rectangle.

isSelected: Specifies to show the rectangle in the selected state.

The drawEllipse method is used to insert a ellipse to the Angular Image Editor component. Ellipse annotations are valuable for highlighting, emphasizing, or marking specific areas of an image.

The drawEllipse method in the Image Editor component takes seven parameters to define the properties of the ellipse annotation:

x: Specifies the x-coordinate of the center of the ellipse.

y: Specifies the y-coordinate of the center of the ellipse.

radiusX: Specifies the horizontal radius (radiusX) of the ellipse.

radiusY: Specifies the vertical radius (radiusY) of the ellipse.

strokeWidth: Specifies the width of the ellipse’s stroke (border).

strokeColor: Specifies the color of the ellipse’s stroke (border).

fillColor: Specifies the fill color of the ellipse.

degree: Specifies the degree to rotate the ellipse.

isSelected: Specifies to show the ellipse in the selected state.

The drawLine method is used to insert a line to the Angular Image Editor component. Line annotations are valuable for highlighting, emphasizing, or marking specific areas of an image.

The drawLine method in the Angular Image Editor component takes seven parameters to define the properties of the ellipse annotation:

startX - Specifies the x-coordinate of the start point.

startY - Specifies the y-coordinate of the start point.

endX - Specifies the x-coordinate of the end point.

endY - Specifies the y-coordinate of the end point.

strokeWidth - Specifies the stroke width of the line.

strokeColor - Specifies the stroke color of the line.

isSelected: Specifies to show the line in the selected state.

The drawArrow method is used to insert a arrow to the Angular Image Editor component. Arrow annotations are valuable for highlighting, emphasizing, or marking specific areas of an image.

The drawArrow method in the Angular Image Editor component takes seven parameters to define the properties of the ellipse annotation:

strokeWidth - Specifies the stroke width of the arrow.

strokeColor - Specifies the stroke color of the arrow.

arrowStart - Specifies the arrowhead as ImageEditorArrowHeadType at the start of arrow.

arrowEnd - Specifies the arrowhead as ImageEditorArrowHeadType at the end of the arrow.

isSelected: Specifies to show the arrow in the selected state.

The drawPath method is used to insert a path to the Angular Image Editor component. Path annotations are valuable for highlighting, emphasizing, or marking specific areas of an image.

The drawPath method in the Angular Image Editor component takes three parameters to define the properties of the ellipse annotation:

points - Specifies collection of x and y coordinates as ImageEditorPoint to draw a path.

strokeWidth - Specifies the stroke width of the path.

strokeColor - Specifies the stroke color of the path.

isSelected: Specifies to show the path in the selected state.

Here is an example of inserting rectangle, ellipse, arrow, path, and line in a button click event.

Delete a shape

The deleteShape method in the Angular Image Editor allows you to remove a shape annotation from the image editor. To use this method, you need to pass the shapeId of the annotation as a parameter.

The shapeId is a unique identifier assigned to each shape annotation within the image editor. It serves as a reference to a specific annotation, enabling targeted deletion of the desired annotation. By specifying the shapeId associated with the shape annotation you want to remove, you can effectively delete it from the image editor.

To retrieve the inserted shape annotations, you can utilize the getShapeSetting method, which provides a collection of annotations represented by ShapeSettings . This method allows you to access and work with the annotations that have been inserted into the image.

Here is an example of deleting rectangle, ellipse, arrow, path, and line in a button click event.

Image annotation

The image annotation feature in the Image Editor provides the capability to add and customize images directly onto the image. With this feature, you can easily insert image or icons at specific locations within the image and customize various aspects of the image to meet your requirements. You have control over the customization options including rotate, flip, transparency for the image annotation.

Add an image annotation.

The drawImage method serves the purpose of inserting an image into the Image Editor control, allowing for image annotations to be added. These image annotations can be used for various purposes, such as adding logos, watermarks, or decorative elements to the image.

The drawImage method in the Image Editor control takes six parameters to define the properties of the rectangle annotation:

data: Specified the image data or url of the image to be inserted.

x: Specifies the x-coordinate of the top-left corner of the image.

y: Specifies the y-coordinate of the top-left corner of the image.

width: Specifies the width of the image.

height: Specifies the height of the image.

isAspectRatio: Specifies whether the image is rendered with aspect ratio or not.

degree: Specifies the degree to rotate the image.

opacity: Specifies the value for the image.

isSelected: Specifies to show the image in the selected state.

In the following example, you can use the drawImage method in the button click event.