DIRECTIVE : Angular directive definition, component v/s directive, Type and create custom directive

Angular templates are dynamic. When Angular renders them, it transforms the DOM according to the instructions given by directives.

 

A directive is a class with a @Directive() decorator.

Component v/s Directive

A component is technically a directive. However, components are so distinctive and central to Angular applications that Angular defines the @Component() decorator, which extends the @Directive() decorator with template-oriented features.

A great way to do this is with directives. I think the difference between a directive and a component is pretty hard to understand conceptually. The best way I’ve heard it explained is that you would use a directive when you want to modify the behaviour of an existing DOM (Document Object Model) element, and you would create a component when you want a completely new DOM element. Otherwise, a component and a directive are pretty much the same thing, a component is just a directive with its own template.

   

TYPE 

1 structural : Structural directives alter layout by adding, removing, and replacing elements in the DOM. 

                  *ngFor, *ngIf

2 attribute  : Attribute directives alter the appearance or behavior of an existing element.

                  ngStyle, ngClass

Custome Directive:

    

<p appHighlight>Highlight me!</p>

import { Directive, ElementRef } from '@angular/core';

@Directive({

selector: '[appHighlight]'

})

export class HighlightDirective {

constructor(el: ElementRef) {

el.nativeElement.style.backgroundColor = 'yellow';

}

}