-1

Criei essa diretiva dentro de um pasta diretivas

 app
    |_ diretivas
              |_ click-outside.directive.ts

Minha diretiva está assim:

import { Directive, Output, EventEmitter, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[clickOutside]'
})
export class ClickOutSideDirective {
  @Output () clickOutside = new EventEmitter<void>()
  constructor(private elementRref: ElementRef) { }

  @HostListener('document:click', ['$event.target'])
  public onClick( target ){  
    const clickedInside = this.elementRref.nativeElement.contains( target ) 
   console.log(clickedInside)
    if( !clickedInside ){
      this.clickOutside.emit()
    }
  }

}

Chamo assim no meu componente

   <div class="form-group has-feedback pull-right" (clickOutSide)="onClickOutside()">
      <input type="text" class="form-control" #iptSearch placeholder="Digite sua pesquisa" (input)="searchTextPendente($event.target.value)" [@campoInput]="campoState">
      <span class="fa fa-search form-control-feedback"></span>
   </div> 

No componente está assim:

onClickOutside() {
    console.log('onClickOutside');    
    this.click++;
  }

Mas não funciona... Como proceder para arrumar as diretivas apenas em uma pasta específica?

Esse é o código no StackBlitz.

Lembrando que se eu colocar fora da pasta diretiva, funciona

[EDIT]

Já consegui fazer o console.log mostrar na na classe diretiva o valor, mas se for false era pra emitir, porém não executa nada no componente onde chamo a função (clickOutSide)="onClickOutside()"

[EDIT2] Estes são meus arquivos em html, ts e diretiva

7
  • Se eu colocar fora da pasta, funciona.. mas eu gostaria de organizar 29/08/2019 às 12:15
  • Mas mostra algum erro no console?
    – LeAndrade
    29/08/2019 às 12:16
  • Não mostra erro 29/08/2019 às 12:20
  • Conssegui fazer o console o valor boolean mas no componente onde chama não estou conseguindo executar a função 29/08/2019 às 12:43
  • 1
    Vou te confessar que não entendi bem o que quer fazer com essa função da diretiva, mas, tenta seguir a partir deste exemplo aqui: stackblitz.com/edit/angular-diretiva
    – LeAndrade
    29/08/2019 às 14:09

1 Resposta 1

0

Consegui fazer funcionar, mas foi da seguinte forma:

O seletor da minha diretiva eu coloquei onClickOutSide

@Directive({
  selector: '[onClickOutside]'
})
export class ClickOutSideDirective {
  @Output () clickOutside = new EventEmitter<void>()
  constructor(private elementRref: ElementRef) { }

  @HostListener('document:click', ['$event.target'])
  public onClick( target ){  
    const clickedInside = this.elementRref.nativeElement.contains( target ) 
   console.log(clickedInside)
    if( !clickedInside ){
      this.clickOutside.emit()
    }
  }

}

E no html do meu componente eu chamei o seletor definido na minha diretiva

<div class="form-group has-feedback pull-right" onClickOutSide (clickOutSide)="onClickOutside()">
      <input type="text" class="form-control" #iptSearch placeholder="Digite sua pesquisa" (input)="searchTextPendente($event.target.value)" [@campoInput]="campoState">
      <span class="fa fa-search form-control-feedback"></span>
   </div> 

No componente.ts ficou assim:

onClickOutside() {
    console.log('onClickOutside');    
    this.click++;
  }

Desse jeito funcionou

Se alguém passar por isso.. Está ai a dica

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .