pero_complete_code

without event unbiding

by Eugen Sunic

JavaScript

______________________________________________________
MODAL.TS
------------------------------------------------------
import {
  Component, ElementRef, Input, OnInit, OnDestroy, HostBinding, Output, EventEmitter,
  HostListener, Inject, ViewChild
} from '@angular/core';
import {trigger, state, style, transition, animate, keyframes} from '@angular/animations';
import {DOCUMENT} from "@angular/common";
import {FeatureModalService} from './feature-modal.service'
@Component({
  moduleId: module.id.toString(),
  selector: 'modal',
  templateUrl: "modal.tpl.html",
  styles: [],
  animations: [
    trigger('modalBackground', [
      state('shown', style({
        opacity: 0.5,
      })),
      state('hidden', style({
        opacity: 0
      })),
      transition('* => *', animate('.5s'))
    ]),
    trigger('modalContent', [
      state('shown', style({
        top: "5%"
        //opacity: 1,
      })),
      state('hidden', style({
        top: "-100%"
        //opacity: 0
      })),
      transition('* => *', animate('.5s ease-in-out'))
    ])
  ]
})

export class ModalComponent implements OnInit, OnDestroy {
  @Input() showModal: boolean = false;
  @Input() closableModal: boolean = true;
  @Output() visibleChange: EventEmitter<boolean> = new EventEmitter<boolean>();
  @ViewChild('ova') ova;
  firstEntrance:boolean=true;

 @HostListener('document:click', ['$event'])
   onModalOpen(event: MouseEvent): void {
    if (this.showModal){
        if (!this.ova.nativeElement.contains(event.target) ) {
            if (!this.firstEntrance)
                this.close();
        }
        this.firstEntrance=false;
  }
}
  private element: any;
  public modalStatus: string = "hidden";

 constructor(private el: ElementRef, @Inject(DOCUMENT) private document: any, private ft:FeatureModalService) {
  }

 ngOnInit(): void {
    // close modal on background click
    /*this.element.on('click', function (e: any) {
      var target = e.target;
      if...