En esta entrada veremos que son las
directivas de atributo en Angular2, como podemos usarlas, y crearemos una directiva para mostrar un "tooltip" en un elemento HTML.
Vamos allá...
Una
directiva de atributo puede cambiar el comportamiento o la apariencia de un elemento del DOM o de un componente, y se parecen en cierto modo a los atributos de HTML
Vamos a verlo con un sencillo ejemplo. Crearemos una directiva para mostrar un tooltip en cualquier elemento HTML. Para crear nuestra directiva "tooltip" vamos a usar la librería css
hint
Esta librería contiene las css necesarias para crear un tooltip únicamente con css, sin nada de código de script.
Haciendo uso de esta librería vamos a crear una directiva que haga básicamente lo mismo que ya hace hint. (es un ejemplo didáctico que nos servirá para ver que es una directiva y como podemos crearlas en Angular2).
Para crear una directiva (que llamaremos tooltip) con
angular cli, tecleamos desde nuestra consola la intrucción
ng generate directive tooltip o bien la versión reducida, es decir,
ng g d tooltip
El código de la directiva que hemos creado con
angular cli tiene el siguiente aspecto:
import { Directive } from '@angular/core';
@Directive({
selector: '[appTooltip]'
})
export class TooltipDirective {
constructor() {
}
}
Vamos a importar
ElementRef para seleccionar el elemento que será modificado y
Renderer para visualizar el resultado de la modificación. Además, como veremos más adelante, vamos a querer que la propiedad que nos indica la posición del tooltip (top, bottom, left, right, etc.) sea indicada en el elemento html, así como el texto a mostrar en el tooltip. Es decir, nuestra directiva que la vamos a incluir en el app.component.html, tendrá un aspecto similar a:
<a href="#" appTooltip [texto]="'Prueba'" [direccion]="'top'">
Enlace con tooltip
</a>
En el ejemplo de uso anterior, la directiva appTooltip, mostrará un texto en una posicion especificada. Para mostrar tanto el [texto] como la [direccion] usaremos el decorador "input" (que se encuentra en @angular/core) de Angular
Por tanto tendremos algo como:
import { Directive, ElementRef, Renderer, Input, OnInit } from '@angular/core';
@Directive({
selector: '[appTooltip]'
})
export class TooltipDirective implements OnInit {
@Input() direccion: string;
@Input() texto: string;
constructor(private el: ElementRef, private renderer: Renderer) {
}
ngOnInit() {}
}
Para mostrar un tooltip con hint, tenemos que usar la clase "hint--direccion" (por ejemplo, hint--top) y el texto a mostrar lo pondremos en el atributo aria-label del elemento HTML. Es decir, el uso seria algo similar a <.... aria-label="Thank you!" class="hint--bottom">hover over me.</...>
Por tanto, necesitamos por un lado asignar la clase 'hint' que hemos especificado con el Input
direccion y por otro lado crear el atributo
aria-label que contendrá el
texto del tooltip.
Esto lo conseguimos mediante las siguientes intrucciones, que pondremos dentro del ngOnInit:
ngOnInit() {
this.renderer.setElementAttribute(this.el.nativeElement, 'aria-label', this.texto);
this.renderer.setElementClass(this.el.nativeElement, 'hint--' + this.direccion, true);
}
La propiedad renderer tiene entre otros los metodos
setElementAttribute que establece el atributo especificado con el valor indicado (en nuestro caso el atributo 'aria-label' con el valor que pasamos en la variable "texto"), y otro metodo
setElementClass para indicar la clase que queremos crear en el elemento obtenido mediante la instrucción
el.nativeElement
La clase que crearemos será el resultado de concatenar "hint--" con el valor que indiquemos en "direccion", de tal manera que quedarán clases al estilo de "hint--top", "hint--left" etc.
El resultado después de lanzar el servidor con ng serve será similar al siguiente pantallazo:
En siguientes entradas veremos como podemos asignar valores por defecto a la dirección, y el uso de "
renderer2" en Angular4.
Código fuente del ejemplo:
https://github.com/jorgetrigueros/ng4-ejemplo-directiva
