added auto-closing on emoji-picker

src/app/components/create-status/create-status.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, Input, Output, EventEmitter, ElementRef, ViewChild, ViewContainerRef } from '@angular/core';
+import { Component, OnInit, OnDestroy, Input, Output, EventEmitter, ElementRef, ViewChild, ViewContainerRef, ComponentRef } from '@angular/core';
 import { HttpErrorResponse } from '@angular/common/http';
 import { Store } from '@ngxs/store';
 import { Subscription, Observable } from 'rxjs';
@@ -639,7 +639,17 @@ export class CreateStatusComponent implements OnInit, OnDestroy {
         // const filePreviewPortal = ;
         //overlayRef.attach(new ComponentPortal(EmojiPickerComponent, this.viewContainerRef));
         // overlayRef.attach(new ComponentPortal(EmojiPickerComponent));
-        this.overlayRef.attach(new ComponentPortal(EmojiPickerComponent));
+
+        
+        let comp = new ComponentPortal(EmojiPickerComponent);       
+        //this.overlayRef.attach(comp);
+
+        const compRef: ComponentRef<EmojiPickerComponent> = this.overlayRef.attach(comp);
+        compRef.instance.closedEvent.subscribe(() => {
+            this.overlayRef.dispose();
+        })
+
+
         // overlayRef.backdropClick().subscribe(() => {
         //     console.warn('wut?');
         //     overlayRef.dispose();

src/app/components/create-status/emoji-picker/emoji-picker.component.ts

@@ -1,15 +1,29 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, HostListener, ElementRef, Output, EventEmitter } from '@angular/core';
 
 @Component({
-  selector: 'app-emoji-picker',
-  templateUrl: './emoji-picker.component.html',
-  styleUrls: ['./emoji-picker.component.scss']
+    selector: 'app-emoji-picker',
+    templateUrl: './emoji-picker.component.html',
+    styleUrls: ['./emoji-picker.component.scss']
 })
 export class EmojiPickerComponent implements OnInit {
+    private init = false;
 
-  constructor() { }
+    @Output('closed') public closedEvent = new EventEmitter();
 
-  ngOnInit() {
-  }
+    constructor(private eRef: ElementRef) { }
 
+    @HostListener('document:click', ['$event'])
+    clickout(event) {
+        if (!this.init) return;
+
+        if (!this.eRef.nativeElement.contains(event.target)) {          
+            this.closedEvent.emit(null);
+        }
+    }
+
+    ngOnInit() {
+        setTimeout(() => {
+            this.init = true;
+        }, 0);
+    }
 }