No sólo podemos utilizar las directivas que Angular tiene por defecto, sino que podemos crear las nuestras. Vamos a crear una directiva llamada "resaltado". Para ello, introducimos por consola el comando: "ng g d directives/resaltado":
Como podemos comprobar, el comando crea la carpeta "directives" y dentro el fichero "resaltado.directive.ts". Además, modifica el fichero "app.module.ts" con las importaciones necesarias:
Ahora vamos a utilizar la directiva. En el fichero "app.component.html" creamos un párrafo al que le introducimos la nueva directiva (mediante el selector que aparece en la clase "appResaltado", como siempre) y le pasamos un parámetro de tipo string llamado "orange" (el color naranja):
Ahora modificamos la clase de la directiva como sigue:
Como se puede ver, hay bastantes modificaciones. Vamos a verlas una a una:
Primero añadimos 3 importaciones en la primera línea. Estas importaciones son:
ElementRef: Esta importación permite hacer referencia al elemento html al que le hemos puesto la directiva, para poder utilizarlo y manipularlo.
HostListener: Esta importación sirve para añadir y utilizar manejadores de eventos, como hacer click o pasar el ratón por encima del elemento, que es el que vamos a utilizar.
Input: Esta importación sirve para que la directiva pueda recibir parámetros desde el html, como el parámetro "orange" que le estamos pasando nosotros.
Después, dentro de la clase, añadimos la línea:
@Input("appResaltado") nuevoColor:string;
Esta línea nos permite guardar en la variable "nuevoColor", el parámetro que le pasemos a la directiva por html.
Modificamos el constructor de la clase como sigue:
constructor(private el:ElementRef) {
el.nativeElement.style.backgroundColor = "yellow";
}
Aquí, como parámetro del constructor, estamos inyectando el elemento html al que hace referencia la directiva, guardándolo en una variable "el".
Dentro del constructor, coloreamos el fondo del elemento de amarillo.
Añadimos el manejador de eventos:
@HostListener('mouseenter') mouseEntro() {
this.resaltar(this.nuevoColor || 'yellow');
}
Esta función se lanza cuando pasamos el ratón por encima del elemento. Dentro llama a la función "resaltar" (que veremos luego) y le pasamos la variable "nuevoColor" (el color pasado por parámetro) o el color amarillo por defecto.
Añadimos el manejador de eventos:
@HostListener('mouseleave') mouseSalio() {
this.resaltar(null);
}
Esta función se lanza cuando sacamos el ratón del elemento. Dentro llama a la función "resaltar" pasando nulo como parámetro.
Por último añadimos la función "resaltar":
private resaltar(color:string) {
this.el.nativeElement.style.backgroundColor = color;
}
Esta función lo único que hace es cambiar el color de fondo del elemento con el color que recibe por parámetro, quitando el color si se recibe el parámetro nulo.
En resumen, lo que hace la directiva es, poner el color de fondo del elemento a amarillo por defecto, cambiarlo a naranja cuando se pasa el ratón por encima, y dejarlo sin color cuando se saca el ratón del elemento.
Levantamos la aplicación y lo probamos.
Al entrar, el color de fondo aparece en amarillo:
Al pasar el ratón por encima, se cambia a naranja:
Y al sacar el ratón, se elimina el color:
Y eso es todo.
No hay comentarios:
Publicar un comentario