import { Component, OnInit, Input, Output, EventEmitter, Directive, ElementRef, HostListener } from '@angular/core'; import { ButtonSettings } from './models/button-settingsl'; import { TranslatorService } from '../../services/translator/translator.service'; @Component({ selector: 'app-button', templateUrl: './button.component.html', styleUrls: ['./button.component.scss'], }) export class ButtonComponent implements OnInit { @Input() strong: boolean; @Input() class: any = ''; @Input() icon: string; @Input() title: string; @Output() trigger = new EventEmitter(); @Input() settings: ButtonSettings; public direction: string; public style: any; @Input() disabled = false; constructor( public ts: TranslatorService ) { } ngOnInit() { this.direction = TranslatorService.getCurrentLanguageName(); if (this.settings) { this.style = { 'border-top-left-radius': this.isEnabled(this.settings.topLeft), 'border-top-right-radius': this.isEnabled(this.settings.topRight), 'border-bottom-right-radius': this.isEnabled(this.settings.bottomRight), 'border-bottom-left-radius': this.isEnabled(this.settings.bottomLeft) }; } /* const element = document.getElementById('modal'); element.addEventListener('click', e => { e.stopImmediatePropagation(); }); */ } private isEnabled(enabled: boolean): string { return enabled ? '6px' : '0px'; } public onClicked() { console.log(this.disabled); if (!this.disabled) { this.trigger.emit(); } } } @Directive({ selector: '[modal]' }) export class Modal implements OnInit { constructor(private elRef: ElementRef) { } ngOnInit() { console.log(' on initialization'); //this.elRef.nativeElement.addEventListener('mouseenter', this.onMouseEnter); } ngOnDestroy() { // this.elRef.nativeElement.removeEventListener('mouseenter', this.onMouseEnter); } onMouseEnter() { // alert("Don't touch my bacon!") } @HostListener('click', ['$event']) onClick(event: any) { // alert('click'); // event.preventPropagation(); } }