Directivas de atributo en Angular2 (2ª parte)

En la entrada anterior vimos como crear una directiva "tooltip" en Angular2 haciendo uso de la clase Rendered. En esta entrada vamos a hacer uso de la clase Renderer2 de Angular4.

En primer lugar, vamos a cambiar en la importación el Rendered por Rendered2.
Lo reemplazaremos también en el constructor.

Al realizar estos cambios, el compilador nos devolverá un error en las propiedades setElementAttribute y setElementClass, ya que estas propiedades forman parte de la clase Rendered de Angular2 pero no de la clase Rendered2 de Angular4.

En la versión de Rendered2 en vez de setElementAttribute usaremos setAttribute (también podremos usar removeAttribute para eliminar el atributo) y en lugar de setElementClass usaremos addClass para añadir una clase css (también podemos usar removeClass para eliminar una clase existente)

Con estos cambios el código nos quedará así:

import { Directive, ElementRef, Renderer2, 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: Renderer2) {

}

ngOnInit() {

this.renderer.setAttribute(this.el.nativeElement, 'aria-label', this.texto);

this.renderer.addClass(this.el.nativeElement, 'hint--' + this.direccion);

}

}

Vamos a mejorar un poco nuestra directiva asignando un valor por defecto a la propiedad "direccion" mediante un setter.

Para ello en primer lugar declaramos una propiedad con un valor por defecto:

private direccionDefault = 'top';

y posteriormente asignamos mediante un setter a dicha propiedad o bien el valor especificado, o en caso de que no se haya especificado en la propiedad "direccion" el valor por defecto.

@Input('direccion')

set direccion(value: string) {

this.direccionDefault = value || this.direccionDefault;

}

A la hora de añadir la clase "hint" pondremos el valor de direccionDefault:

this.renderer.addClass(this.el.nativeElement, 'hint--' + this.direccionDefault);

Si en la directiva no especificamos la dirección, tomará por defecto el valor "top", y si especificamos algún valor (left, right, etc.) mostrará el "tooltip" en la dirección especificada.

El código final queda así:

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

@Directive({

selector: '[appTooltip]'

})

export class TooltipDirective implements OnInit {

@Input() texto: string;

@Input('direccion')

set direccion(value: string) {

this.direccionDefault = value || this.direccionDefault;

}

private direccionDefault = 'top';

constructor(private el: ElementRef, private renderer: Renderer2) {

}

ngOnInit() {

this.renderer.setAttribute(this.el.nativeElement, 'aria-label', this.texto);

this.renderer.addClass(this.el.nativeElement, 'hint--' + this.direccionDefault);

}

}