How can i prevent opening the window on outside click?

I wanted to build custom autocomplete. I found this youtube tutorial The complete solution for this tutorial is here - (You don't need to watch whole 12 minutes video )

So he is using dropdown.directive.ts to detect when the user click outside to close the window under the input

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

    selector: '[clickOutside]',
export class ClickOutsideDirective {
    @Output() public clickOutside = new EventEmitter();
    constructor(private _elementRef: ElementRef) {


    @HostListener('document:click', ['$'])
    public onClick(targetElement) {
        const isClickedInside = this._elementRef.nativeElement.contains(targetElement);
        if (!isClickedInside) {

but there is a bug.If the window is closed - and the user clicks outside then the window is opened. How can i solve this with this clickOutside directive here ?

Read more here:

Content Attribution

This content was originally published by sdsd at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: