Doppelkopf-Stats-Frontend/src/app/components/profile/profile.component.ts

import {Component, ElementRef, EventEmitter, HostListener, Input, OnInit, Output} from '@angular/core';
import {User} from '../../models/user';

@Component({
	selector: 'app-profile',
	templateUrl: './profile.component.html',
	styleUrls: ['./profile.component.scss']
})
export class ProfileComponent implements OnInit {

	initialClick = true;
	@Input() user?: User;
	@Output() showProfilePopOverChange = new EventEmitter<boolean>();

	constructor(private eRef: ElementRef) {
	}

	ngOnInit(): void {
	}

	/**
	 * Used to close Profile component when user clicks outside the component
	 * @param event
	 */
	@HostListener('document:click', ['$event'])
	@HostListener('document:touchstart', ['$event'])
	handleOutsideClick(event: any) {
		if (this.initialClick) {
			this.initialClick = false;
			return;
		}

		if (!this.eRef.nativeElement.contains(event.target)) {
			this.showProfilePopOverChange.emit(false);
		}
	}

	// TODO: Close modal also when "escape" is clicked
}