What is the difference between a Decorator and Directive in angular?

Question

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.

Answer 1

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,

• https://angular.io/guide/attribute-directives

• https://www.sitepoint.com/practical-guide-angular-directives/

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...

• https://angular-2-training-book.rangle.io/features/typescript/decorators

• https://codecraft.tv/courses/angular/es6-typescript/decorators/

Answer 2

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>