Use custom folder directive

Asked

Viewed 72 times

-2

I created this directive inside a directive folder

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

My directive is like this:

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()
    }
  }

}

I call it that in my component

   <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>

In the component is like this:

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

But it doesn’t work... How to proceed to tidy directives only in a specific folder?

That one is the code on Stackblitz.

Remembering that if I put out the folder diretiva, works

[EDIT]

I was able to make the console.log show in the directive class the value, but if it is false it was to send, but it does not execute anything in the component where I call the function (clickOutSide)="onClickOutside()"

[EDIT2] These are my files in html, ts and directive

javascript angular typescript angular2-directives

  • If I put out the folder, it works.. but I’d like to organize

  • But shows some error in the console?

  • Shows no error

  • Conssegui make the console the value Boolean but in the component where calls I am not able to perform the function

  • 1

    I’ll confess that I don’t quite understand what you want to do with this directive function, but try to follow from this example here: https://stackblitz.com/edit/angular-directive

  • I tried, Stackblitz works, but in my project, Emit doesn’t work

  • This is my git project: the html, the ts and the directive

Show 2 more comments

1 answer

0


I managed to make it work, but it was like this:

The seletor of my directive I put 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()
    }
  }

}

And in the html of my component I called the selector set in my directive

<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>

The.ts component was like this:

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

That way it worked

If anyone goes through it. Here’s the tip

Browser other questions tagged javascript angular typescript angular2-directives

You are not signed in. Login or sign up in order to post.