5

I am so confused about Directives and Decorators in Angular. I thought anything prefixed with @ is a Decorator and now when i read about Directives it says, Component is a Directive. What's going on? Any clarity on the matter would be helpful.

hippietrail
  • 15,848
  • 18
  • 99
  • 158
Emile Rivere
  • 107
  • 1
  • 6
  • 2
    Possible duplicate of [@Directive v/s @Component in Angular](https://stackoverflow.com/questions/32680244/directive-v-s-component-in-angular) – dcg Sep 09 '19 at 05:16
  • There a lot of tutorials out there. Your post is too broad for SO – Vega Sep 09 '19 at 05:38

4 Answers4

2

Directives

Directives are the building blocks of Angular applications.

An Angular component isn’t more than a directive with a template. When we say that components are the building blocks of Angular applications,

Decorators

Decorator that marks a class as an Angular component and provides configuration metadata that determines how the component should be processed, instantiated, and used at runtime.

Decorators are functions that are invoked with a prefixed @ symbol, and immediately followed by a class, parameter, method or property. The decorator function is supplied information about the class, parameter or method.

We can say Decorators are functions, and there are four things (class, parameter, method and property) that can be decorated, which will follows with each different function signatures.

There are some good blogs you can read them for more info...

Ganesh
  • 5,808
  • 2
  • 21
  • 41
2

Angular Directives & Decorators

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.

Here is an example decorator from the TypeScript docs called sealed:

function sealed(constructor: Function) { 
Object.seal(constructor); 
Object.seal(constructor.prototype); 
}

You will note that it takes a constructor as an argument. It can be used on a class as follows:

@sealed class Greeter { 
  greeting: string; 
  constructor(message: string) { 
    this.greeting = message; 
  } 
  greet() { 
    return “Hello, “ + this.greeting; 
  } 
}

Directives:

Angular Directive is basically a class with a @Directive decorator. A component is also a directive-with-a-template. A @Component decorator is actually a @Directive decorator extended with template-oriented features. Whenever Angular renders a directive, it changes the DOM according to the instructions given by the directive. The directive appears within an element tag similar to attributes.

The Angular Directive can be classified into two types: structural and attribute directives.

Structural directives alter layout by adding, removing, and replacing elements in DOM. Attribute directive alter the appearance or behavior of an existing element. When you include attribute directives in templates, they look like regular HTML attributes. The ngModel directive, which implements two-way data binding, is an example of an attribute directive. ngModel modifies the behavior of an existing element by setting its display property and responding to the changing events.

Notice how inside an Angular component we use the ngModel directive?

 <label for="example-ngModel">[(ngModel)]:</label>
<input [(ngModel)]="currentItem.name" id="example-ngModel">
Arun Saini
  • 6,714
  • 1
  • 19
  • 22
1

Decorators

Decorators are just the Angular functions that enhance either the class or the property or a method. They take configuration metadata as an input and process the class or the property or a method in run time. They are prefixed with @ symbol.

Two examples are @Componet() decorator and @Input() decorator.

@Componet decorator is used with TypeScript Class and they convert the class into Angular component.

@Component({
  selector: 'any-app',
  templateUrl: './template-path.html',
  stylesUrls: ['./styles.css']
})
export class AnyAppComponent {}

@Input() decorator is used with properties of the class and it lets the parent component send any data to the child component.

@Input() parentProperty: any;

Directives

Directives are just TypeScipt Class which has @Directive decorator. In simple words:

Directives = @Directive + TypeScript Class

An example is Demo Directive.

@Directive({
    selector:  '[demo]'
})
export class DemoDirective {}

This directive can be used within any HTML element using the selector name. To use directive, it can simply be incorporated into HTML elements. This is how to use:

<div demo>HELLO</div>
Nikhil Yadav
  • 1,419
  • 1
  • 13
  • 8
0

This is a very good question, with a tricky answer. In simple terms, a decorator is a TypeScript feature, a language thing, not an Angular thing. However, decorators are extensively used in Angular.

On the other hand, a directive is an Angular feature, an Angular concept, not a TypeScript thing. Now, to declare Angular directives it is needed to use TypeScript decorators, and that's the confusing part (IMHO).

As per TypeScript specification, decorators are used to modify or annotate classes, properties, methods, or parameters. Angular uses this feature extensively, for example: to create components and their metadata, to create and configure services, to inject dependencies, and many more examples, but more importantly in this case, a decorator is also used to create directives (@Directive)

Directives are classes that add or modify the behavior of DOM elements. There are three types of directives, and this classification is attending to the nature of the change they introduce in the DOM.

  • Component directives (DOM elements addition through a template)
  • Attribute directives (DOM appearance, HTML elements attributes)
  • Structural directives (DOM layout, conditional rendering)
Overlord
  • 2,740
  • 2
  • 18
  • 22