1 of 26

Discover the power

of custom decorators

in Angular

@maartentibau

2 of 26

special

Koen Vanderlinden

@maartentibau

3 of 26

Hello!

I’m maarten

@maartentibau

4 of 26

Freelance

Software engineer

@maartentibau

5 of 26

Angular Trainer

@

@maartentibau

6 of 26

Core team member

NG-BE

@maartentibau

7 of 26

I love stickers !!

�#stickerguy

@maartentibau

8 of 26

What is a decorator ?

A Decorator is a special kind of declaration that can be attached to a class declaration, method, accessor, property, or parameter.

Decorators use the form @expression, where expression must evaluate to a function that will be called at runtime with information about the decorated declaration.

@maartentibau

source: https://www.typescriptlang.org/docs/handbook/decorators.html

9 of 26

types of decorators available in typescript

Class

@maartentibau

10 of 26

types of decorators available in typescript

Class

Method

@maartentibau

11 of 26

method decorator

class decorator

@maartentibau

source: https://www.thoughtram.io

12 of 26

types of decorators available in typescript

Class

Property

Method

@maartentibau

13 of 26

types of decorators available in typescript

Class

Property

Method

Param

@maartentibau

14 of 26

types of decorators available in typescript

Class

Property

Method

Param

@maartentibau

Accessor

15 of 26

parameter decorator

property decorator

@maartentibau

accessor decorator

source: https://www.typescriptlang.org/docs/handbook/decorators.html / https://www.thoughtram.io

16 of 26

how use custom decorators ?

@maartentibau

source: https://www.typescriptlang.org/docs/handbook/decorators.html

17 of 26

how use custom decorators ?

@maartentibau

18 of 26

Got you covered

Angular cli

@maartentibau

19 of 26

evaluation & execution process

@maartentibau

source: https://www.typescriptlang.org/docs/handbook/decorators.html

20 of 26

decorator factory

@maartentibau

source: https://www.typescriptlang.org/docs/handbook/decorators.html

21 of 26

target, propertykey, descriptor

@maartentibau

Either the constructor function of the class for a static member, or the prototype of the class for an instance member decorator

The name of the member

Property Descriptor

for the member

source: https://www.typescriptlang.org/docs/handbook/decorators.html

22 of 26

It’s just

A function !

@maartentibau

23 of 26

Property Descriptor

“Every object property is more than just a name and value pair. Each property is having property descriptor that helps to see all the attributes of that property.”

@maartentibau

source: https://codeburst.io/javascript-object-property-attributes-ac012be317e2

24 of 26

Property Descriptor

@maartentibau

25 of 26

@maartentibau

26 of 26

Thank you!!

Tak!!

tack själv!!

Kiitos!!

Takk skal du ha!!

Þakka þér fyrir!!

@maartentibau

template: https://www.slidescarnival.com/jachimo-free-presentation-template/1393