Directives overview

There are three kinds of directives in Angular:

• Components directives :- directives with a template.
• Structural directives :- change the DOM layout by adding and removing DOM elements.
• Attribute directives :- change the appearance or behavior of an element, component, or another directive.

1.Components directives
These form the main class having details of how the component should be processed, instantiated and used at runtime.


2.Structural directives
A structure directive basically deals with manipulating the dom elements. Structural directives have a * sign before the directive. For example, *ngIf and *ngFor.

ngIF

<div *ngIf="hero" class="name">{{hero.name}}</div>

<ng-template [ngIf]="hero">
  <div class="name">{{hero.name}}</div>
</ng-template>

<div *ngIf="condition; then thenBlock else elseBlock"></div>
<ng-template #thenBlock>Content to render when condition is true.</ng-template>
<ng-template #elseBlock>Content to render when condition is false.</ng-template>

ngFor

<div *ngFor="let hero of heroes; let i=index; let odd=odd; trackBy: trackById [class.odd]="odd">
  ({{i}}) {{hero.name}}
</div>

<ng-template ngFor let-hero [ngForOf]="heroes" let-i="index" let-odd="odd" [ngForTrackBy]="trackById">
  <div [class.odd]="odd">({{i}}) {{hero.name}}</div>
</ng-template>

ngSwitch

<container-element [ngSwitch]="switch_expression">
      <some-element *ngSwitchCase="match_expression_1">...</some-element>
      <some-element *ngSwitchCase="match_expression_2">...</some-element>
      <some-other-element *ngSwitchCase="match_expression_3">...</some-other-element>
      <ng-container *ngSwitchCase="match_expression_3">
        <!-- use a ng-container to group multiple root nodes -->
        <inner-element></inner-element>
        <inner-other-element></inner-other-element>
      </ng-container>
      <some-element *ngSwitchDefault>...</some-element>
    </container-element>

3.Attribute directives // @Directive
Attribute directives deal with changing the look and behavior of the dom element. You can create your own directives as explained in the below section

<p appHighlight>Highlight me!</p>

<p [appHighlight]="color">Highlight me!</p>

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

@Directive({
   selector: '['appHighlight]'
})
export class ChangeTextDirective {
   
   @Input('appHighlight') highlightColor: string;

   constructor(Element: ElementRef) {
      console.log(Element);
      Element.nativeElement.innerText = "Text is changed Directive.";
      Element.nativeElement.style.backgroundColor = 'yellow';
   }
   @HostListener('mouseenter') onMouseEnter() {
     this.highlight('yellow');
   }
  @HostListener('mouseleave') onMouseLeave() {
     this.highlight(null);
  }
   private highlight(color: string) {
      this.el.nativeElement.style.backgroundColor = color;
  }
}