Attribute Directive

Type of Directives
import { Directive, ElementRef, Renderer } from '@angular/core';

@Directive({
selector: '[chcolor]'
})
export class ChangeColorDirective {

constructor(private el: ElementRef, private render: Renderer) {
this.changecolor('red');
}

private changecolor(color: string) {

this.render.setElementStyle(this.el.nativeElement, 'color', color);
}
}
  1. apply a color or clear color respectively.
import { Directive, ElementRef, Renderer, HostListener, Input } from '@angular/core';

@Directive({
selector: '[chcolor]'
})
export class ChangeColorDirective {
constructor(private el: ElementRef, private render: Renderer) { }

@HostListener('mouseenter') methodToHandleMouseEnterAction() {
this.changecolor('red');
}
@HostListener('mouseleave') methodToHandleMouseExitAction() {
this.changecolor('blue');
}
private changecolor(color: string) {

this.render.setElementStyle(this.el.nativeElement, 'color', color);
}
}

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Found API Token on js file

Catching array change in React Hooks with useEffect

Taiko — A Free and Open Source Browser Automation Tool

React Native Forms Made Easy — using Formik, Yup, and Firestore

Detect code quality and security issues in JavaScript project with SonarLint

7 Advanced JavaScript Techniques Every Developer Should Know by Now (Including Code)

JS Demystified 03— Scope

5 STUNNING REACT JS LIBRARIES

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Baskarasothy Pratheeparaj

Baskarasothy Pratheeparaj

More from Medium

Something About Application Frameworks Group Project…

Dlithe 22/04/2022 Experience

System Design Capstone Day 5

First Team Project at Masai School(Gift_Cart Website Clone by using HTML, CSS, and JavaScript).