¿Qué son @HostBinding() y @HostListener() en Angular?

Para comprender @HostListener y @HostBinding, debe tener conocimientos básicos sobre las directivas en Angular. Hay tres tipos de directivas en Angular:

1. Componente
2. Attribute Directive
3. Directiva Estructural

La diferencia básica entre un componente y una directiva es que un componente tiene una plantilla, mientras que un atributo o directiva estructural no tiene una plantilla. Para entender estos dos conceptos, empecemos creando una directiva de atributos personalizada sencilla. La directiva siguiente cambia el color de fondo del elemento anfitrión:

import { Directive, ElementRef, Renderer } from '@angular/core';
 
@Directive({
    selector: '[appChbgcolor]'
})
export class ChangeBgColorDirective {
 
    constructor(private el: ElementRef, private renderer: Renderer) {
        this.ChangeBgColor('red');
    }
 
    ChangeBgColor(color: string) {
 
        this.renderer.setElementStyle(this.el.nativeElement, 'color', color);
    }
}

Para crear una directiva de atributo personalizada, necesitas crear una clase y decorarla con @Directive. En el constructor de la clase directiva, inyecta los objetos ElementRef y Renderer. Se necesitan instancias de estas dos clases para obtener la referencia del elemento anfitrión y del renderizador.

Puedes usar la directiva de atributos anterior en una plantilla de componentes, como se muestra en el listado siguiente:

<div appChbgcolor>
    <h3>{{title}}</h3>
</div>

Aquí, la clase componente que contiene el elemento anfitrión se crea de la siguiente manera:

import { Component } from '@angular/core';
 
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'Hey ng Developer ! ';
}

Ahora mismo, la directiva appChbgcolor cambiará el color del elemento anfitrión.

@HostListener() decorator

En Angular, el decorador de funciones @HostListener() permite manejar eventos del elemento anfitrión en la clase directiva.

Tomemos el siguiente requisito: cuando pasas el ratón por el elemento anfitrión, solo debe cambiar el color del elemento anfitrión. Además, cuando el ratón desaparece, el color del elemento anfitrión debe cambiar a su color predeterminado. Para ello, necesitas gestionar los eventos que se generan en el elemento anfitrión en la clase directiva. En Angular, se hace esto usando@HostListener().

Para entender@HostListener() de una manera mejor, considera otro escenario sencillo: al hacer clic en el elemento anfitrión, quieres mostrar una ventana de alerta. Para hacer esto en la clase directiva, añade @HostListener() y pásale el 'click' del evento a ella. Además, asocia una función para activar una alerta como se muestra en la lista siguiente:

@HostListener('click') onClick() {
    window.alert('Host Element Clicked');
}

En Angular, el decorador de funciones @HostListener() facilita muchísimo gestionar los eventos generados en el elemento anfitrión dentro de la clase directiva. Volvamos a nuestro requisito que dice que debes cambiar el color a rojo solo cuando el ratón está en el paso, y cuando desaparece, el color del elemento anfitrión debe cambiar a negro. Para ello, necesitas gestionar los eventos mouseenter y mouseexit del elemento host en la clase directiva. Para lograrlo, modifica la clase directiva appChbgcolor como se muestra a continuación:

import { Directive, ElementRef, Renderer, HostListener } from '@angular/core';
 
@Directive({
    selector: '[appChbgcolor]'
})
export class ChangeBgColorDirective {
 
    constructor(private el: ElementRef, private renderer: Renderer) {
        // this.ChangeBgColor('red');
    }
 
    @HostListener('mouseover') onMouseOver() {
        this.ChangeBgColor('red');
    }
 
    @HostListener('click') onClick() {
        window.alert('Host Element Clicked');
    }
    @HostListener('mouseleave') onMouseLeave() {
        this.ChangeBgColor('black');
    }
 
    ChangeBgColor(color: string) {
 
        this.renderer.setElementStyle(this.el.nativeElement, 'color', color);
    }
}

En la clase directiva, gestionamos los eventos mouseenter y mouseexit. Como ves, estamos usando @HostListener() para gestionar estos eventos de los elementos anfitriones y asignarles una función.

Así que, usemos @HostListener() function decorator para manejar eventos del elemento anfitrión en la clase directiva.

@HostBinding() decorator

En Angular, el decorador de funciones @HostBinding() permite establecer las propiedades del elemento anfitrión desde la clase directiva.

Supongamos que quieres cambiar las propiedades de estilo como altura, ancho, color, margen, borde, etc.  o cualquier otra propiedad interna del elemento anfitrión en la clase directiva. Aquí, tendrías que usar la función decoradora @HostBinding() para acceder a estas propiedades en el elemento anfitrión y asignarle un valor en la clase directiva.

El decorador @HostBinding() toma un parámetro, el nombre de la propiedad del elemento anfitrión que queremos asignar en la directiva.

En nuestro ejemplo, nuestro elemento host es un elemento div HTML. Si quieres establecer propiedades de borde del elemento anfitrión, puedes hacerlo usando el decorador @HostBinding() como se muestra a continuación:

@HostBinding('style.border') border: string;
 
@HostListener('mouseover') onMouseOver() {
    this.border = '5px solid green';
}

Usando este código, al pasar el cursor con el ratón, el borde del elemento anfitrión se establecerá en un ancho verde sólido de 5 píxeles.  Por lo tanto, usando @HostBinding decorador, puedes establecer las propiedades del elemento anfitrión en la clase directiva.

¿Te ha gustado este post?

¡Y ahí lo tienes! Si te ha gustado esta publicación, compártela. Además, si no has echado un vistazo a Infragistics Ignite UI for Angular Components, ¡asegúrate de hacerlo! Tienen 30+ componentes de Angular basados en materiales para ayudarte a programar aplicaciones web rápidas más rápido.