How to useAttribute Directives in Angular

Create a new directive using the following command

ng generate directive attribute-directive

Folders Structure:

Attribute Directive Structure

Code Example:

HTML

<!-- app.component.html -->

<div appAttributeDirective [colorName]="'yellow'" [opacity]=0.4>
    Hover over me to see the magic!
 </div>

JavaScript

//attribute-directive.directive.ts

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

@Directive({
    selector: '[appAttributeDirective]'
})
export class AttributeDirectiveDirective {

    constructor(private elementRef: ElementRef) { }

    @Input() colorName!: string;
    @Input() opacity!: number;

    @HostListener('mouseenter') onMouseEnter() {
        this.highlight(this.colorName, this.opacity);
    }

    @HostListener('mouseleave') onMouseLeave() {
        this.highlight('', 1);
    }

    private highlight(color: string, opacity: number) {
        this.elementRef.nativeElement.style.opacity = opacity;
        this.elementRef.nativeElement.style.backgroundColor = color;
    }

}

Output:

Browser

How to pass multiple parameter to @Directives in Angular ?

Angular directives are TypeScript classes decorated with the @Directive decorator. These are powerful tools for manipulating the DOM and adding behavior to elements. They can modify the behavior or appearance of DOM elements within an Angular application.

Directives can be broadly categorized into three types:

Component Directives: These are directives with a template and can be used as standalone components.
Attribute Directives: These change the appearance or behavior of an element, component, or another directive.
Structural Directives: These change the DOM layout by adding or removing elements.

We will discuss the following approaches to pass multiple parameter to @directives in Angular: