Como detectar cliques externos em aplicativos angulares

Aprenda como usar o decorador HostListener para detectar cliques fora de um elemento em seu aplicativo Angular. Uma solução simples e eficaz para cenários comuns de UI.

Pré-requisitos

• Conhecimento básico de Angular 2 ou superior
• Código do Visual Studio
• Nó e NPM instalados
• Inicialização

Crie um projeto Angular

Crie um projeto Angular usando o seguinte comando.

ng new angapp

Agora instale o Bootstrap usando o seguinte comando,

npm install bootstrap --save

Agora abra o arquivo estilos.css e adicione a referência do arquivo Bootstrap. Para adicionar uma referência no arquivo estilos.css adicione esta linha.

@import '~bootstrap/dist/css/bootstrap.min.css';

Agora crie um novo componente usando o seguinte comando,

ng g c actionmenu

Agora abra o arquivo actionmenu.component.html e adicione o seguinte código.

<div class="sidebar {{show}} panel-group" clickOutside (clickOutside)="works()">
    <div class=" panel panel-default" >
        <div>
            <div class="panel-body">Panel Body</div>
            <div class="panel-footer">Panel Footer</div>
        </div>
    </div>
</div>

Agora abra o arquivo actionmenu.component.ts e adicione o seguinte código.

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-actionmenu',
  templateUrl: './actionmenu.component.html',
  styleUrls: ['./actionmenu.component.css']
})
export class ActionmenuComponent {
  @Input() show: boolean=true;

  works() {
    this.show = !this.show;
  }
}

Agora abra o arquivo actionmenu.component.css e adicione o seguinte código.

.sidebar {
    display: none;
}

.true {
    display: block;
}

.false {
    display: none;
}

Agora abra o arquivo app.component.html e adicione o seguinte código.

<div class="container" style="margin-top:10px;margin-bottom: 24px;">
  <div class="col-sm-12 btn btn-info">
    How to detect clicks outside in Angular  Application
  </div>
</div>
<div class="container">
  <button type="button" class="btn btn-success" (click)="show = !show">Primary</button>
  <app-actionmenu [show]="show"></app-actionmenu>
</div>

Agora abra o arquivo app.component.ts e adicione o seguinte código.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular App';
  show:boolean= false;
}

Agora crie uma nova diretiva usando o seguinte comando e o código a seguir nesta diretiva.

ng g directive clickOutside

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

@Directive({
    selector: '[clickOutside]'
})

export class ClickOutsideDirective {

    constructor(private elementRef: ElementRef) {}

    @Output() clickOutside: EventEmitter<any> = new EventEmitter();

    @HostListener('document: click', ['$event.target']) onMouseEnter(targetElement:any) {
        const clickInside = this.elementRef.nativeElement.contains(targetElement);
        if (!clickInside) {
            this.clickOutside.emit(null);
        }
    }
}

Agora abra app.module.ts e o código a seguir.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ActionmenuComponent } from './actionmenu/actionmenu.component';
import { ClickOutsideDirective } from './click-outside.directive';
@NgModule({
  declarations: [
    AppComponent,
    ActionmenuComponent,ClickOutsideDirective
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Agora execute o aplicativo usando npm start e verifique o resultado.

Clique no botão e depois clique fora de qualquer lugar do componente.

#angular