angular directives

 

1.Attribute directives let us change how things are rendered in the DOM

We can create an attribute directive to manipulate the DOM tree.

2.Structural directives let us change the DOM 

layout by adding or removing DOM elements.

ng generate directive hover

attribute:

ng generate directive directivename

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

@Directive({

  selector: '[appChange]'

})

export class ChangeDirective {

  constructor(private el: ElementRef) {

    this.el.nativeElement.style.cssText="color:red;font-size:20px;background-color:blue";

    

   }

}

in html template:

<p appChange> we are angular student</p>

telerik.com/blogs/angular-basics-angular-custom-directive

import { Directive, Input, TemplateRef, ViewContainerRef } from "@angular/core";

@Directive({

  selector: "[appIf]",

})

export class IfDirective {

  private hasView = false;

  constructor(

    private templateRef: TemplateRef<any>,

    private viewContainer: ViewContainerRef

  ) {}

  @Input() set appIf(condition: boolean) {

    if (condition && !this.hasView) {

      this.viewContainer.createEmbeddedView(this.templateRef);

      this.hasView = true;

    } else if (!condition && this.hasView) {

      this.viewContainer.clear();

      this.hasView = false;

    }

  }

}

..

<button (click)="condition = !condition">toggle</button>

  <p *appIf="condition">hello world</p>