1

Creé una directiva custom en angular, y quiero compartir un valor entre mi directiva y mi archivo typescript, este es un ejemplo de mis 2 archivos:

<!-- Mi html --> 
<div>
  <input type="radio" name="colors" (click)="color='lightgreen'">Green
  <input type="radio" name="colors" (click)="color='yellow'">Yellow
  <input type="radio" name="colors" (click)="color='cyan'">Cyan
</div>
<p [appHighlight]="color">Highlight me!</p>
<p *ngIf="color">True</p>

<p [appHighlight]="color" defaultColor="violet">
  Highlight me too!
</p>

 <!-- mi typescript --> 
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  color: boolean;
}

<!-- mi directiva custom -->
/* tslint:disable:member-ordering */
import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private el: ElementRef) {}
  @Input() color: boolean;
  @Input() defaultColor: boolean;

  @Input('appHighlight') highlightColor: string;

  @HostListener('mouseenter')
  onMouseEnter() {
    console.log(this.color);
  }

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

  private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

Al cambiar el valor booleano a true o false, mi *ngIf lo evalúa y me muestra el <p *ngIf="color">True</p> debidamente.

Pero al cambiar el valor en mi directiva *ngIf no lo evalúa, cómo puedo comunicar el valor de mi directiva con mi .ts?

1 respuesta 1

1

Para que tu directiva pueda no solo recibir sino también enviar valores tenés que usar @Output.

Si te fijás en tu código tenés @Input para cosas que van a entrar en la directiva, @Output sirve para sacar.

En tu caso tendrías que definir tu variable de salida como un EventEmitter, y cuando querrás emitir un valor usas el método emit.

  @Output() colorOut = new EventEmitter();

  @HostListener('mouseleave')
  onMouseLeave() {
    this.highlight(null);
    this.colorOut.emit(null);
  }

Y en tu componente, en la plantilla HTML debes usar el evento de salida, el valor emitido estará en $event:

<p [appHighlight]="color" (colorOut)="color = $event">Highlight me!</p>
3
  • Gracias @Nery, sirvió de mucha ayuda... el 1 ago. 2018 a las 20:42
  • @Nery Ortez , disculpa, una directiva se podría usar para aplicar una lógica (que no tenga que ver con la manipulación del DOM) a un componente? la idea es, suscribirme al evento navigationEnd del router desde al app.component.html que es donde tengo el <router-outlet> , hacer unas operaciones, y luego hacer algo como esto <router-outelet [customDirective]> </router-outelet> , entonces cada componente que se cargue, tendrá la lógica aplicada de la directiva, es eso posible ?
    – JulianProg
    el 14 oct. 2020 a las 19:57
  • @julianprog No se si entiendo la pregunta. Pero puedes abrir una pregunta en SO, para dar más detalle de lo que cabe en un comentario
    – Nery Ortez
    el 15 oct. 2020 a las 20:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.