Angular 5 - How to trigger event when user clicks outside targeted elements

Question

I need to be able to register when a user clicks outside targeted elements. To do this I have created a custom attribute directive shown below.

ClickOutsideTargets Directive

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

@Directive({
  selector: '[clickOutsideTargets]',
})
export class ClickOutsideTargetsDirective {

    @Input()
    public targets : HTMLElement[] = [];


    @Output() 
    clickOutsideTargets = new EventEmitter();

    constructor(){

    }


    @HostListener('document:click', ['$event.target'])
    public onClick(targetElement){

     if(!targetElement){
        return;
    }

    for(var i = 0, len = this.targets.length; i < len; i++){
        if(this.targets[i].contains(targetElement)){
            return;
        }
    }

    this.clickOutsideTargets.emit(null);

  }

}

The 'targets' array specifies the elements where the user can click without triggering an event. Whenever the user clicks outside these elements an event is emitted.

I want to be able to pass an array of targets to the directive as an input, using the following syntax which is clean and convenient. Each target is given as a template variable (#variable).

<button #buttonRef class="btn btn-primary" (click) = "activate()" (clickOutsideTargets) = "deactivate()" [targets] = "[buttonRef, containerRef]"> </button>

Issues with this approach

However, this doesn't work when-

One of the target elements exists in the template of a child component. Unless there is a way to access a child's template variables from the parent component's template.
One of the target elements is created dynamically, for example through an NgFor.

Is there a way to solve these issues? Or ideally, is there a better solution/strategy that I'm not considering.

(One really messsy solution to get the functionality is by creating a new template variable to represent the directive (using exportAs within the directive's decorator), accessing the directive within the parent component using ViewChild, accessing the target elements using ViewChild/ViewChildren and manually setting the directive's target array to the necessary elements.) This breaks the principle of lean components.

This seems to help you https://stackoverflow.com/a/51152404/3176270 — Mohammad Kermani, Feb 20 '20 at 09:30

score 6 · Answer 1 · answered Feb 13 '18 at 15:59

6

You might want to try this

In your Component

@ViewChild('myTarget') myTarget;

@HostListener('document:click', ['$event.target'])
    onClick(targetElement) {
        const clickedInside = this.myTarget.nativeElement.contains(targetElement);
        if (!clickedInside) {
            //the click was made outside of this element
        }
    }

In your html

<div #myTarget>
</div>

answered Feb 13 '18 at 15:59

Manzur Khan

2,366
4
23
44

The problem is, that when the number of targets increases I will have to define them in two places (Create a separate ViewChild property for each target & make sure they're included in the targets array within the onClick method) – Dom D Feb 13 '18 at 16:40

Angular 5 - How to trigger event when user clicks outside targeted elements

ClickOutsideTargets Directive

Issues with this approach

1 Answers1