au-tab-panel tests

Author: jhades

au-modal/src/app/au-modal/au-modal-open-on-click.directive.ts

@@ -1,13 +1,15 @@
-import {AfterContentInit, ContentChild, Directive, Input, OnInit, TemplateRef, ViewContainerRef} from '@angular/core';
+import {AfterContentInit, ContentChild, Directive, Input, OnInit, TemplateRef, ViewContainerRef, OnDestroy} from '@angular/core';
 import {AuModalComponent} from "./au-modal.component";
 import {AuModalService} from "./modal.service";
 
 @Directive({
  selector: '[auModalOpenOnClick]'
 })
-export class AuModalOpenOnClickDirective implements OnInit {
+export class AuModalOpenOnClickDirective implements OnInit, OnDestroy {
 
 
+ elements: HTMLBaseElement[];
+
  constructor(private templateRef: TemplateRef<any>,
  private viewContainer: ViewContainerRef,
  private modalService: AuModalService) {
@@ -20,28 +22,28 @@ export class AuModalOpenOnClickDirective implements OnInit {
 
  }
 
+ ngOnDestroy() {
+ this.elements.forEach(el => el.removeEventListener('click', this.clickHandler) );
+ }
+
  @Input()
  set auModalOpenOnClick(els) {
 
- let elements: HTMLBaseElement[];
-
  if (els.length) {
- elements = els;
+ this.elements = els;
  }
  else {
- elements = [els];
+ this.elements = [els];
  }
 
- elements.forEach(el => {
-
- el.addEventListener('click', (evt) => {
- this.viewContainer.clear();
- this.viewContainer.createEmbeddedView(this.templateRef);
-
- } );
+ this.elements.forEach(el => el.addEventListener('click', this.clickHandler));
+ }
 
- })
 
- }
+ clickHandler = (() => {
+ this.viewContainer.clear();
+ this.viewContainer.createEmbeddedView(this.templateRef);
+ }).bind(this);
 
 }
+