recording

Author: Your Name

au-modal/src/app/app.module.ts

@@ -19,7 +19,7 @@ import {AuModalModule} from "./au-modal/au-modal.module";
  HttpModule,
  AuInputModule,
  AuTabPanelModule,
- AuModalModule
+ AuModalModule.forRoot()
 
  ],
  providers: [],

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

@@ -1,19 +1,24 @@
-import {AfterContentInit, ContentChild, Directive, Input, TemplateRef, ViewContainerRef} from '@angular/core';
+import {AfterContentInit, ContentChild, Directive, Input, OnInit, TemplateRef, ViewContainerRef} from '@angular/core';
 import {AuModalComponent} from "./au-modal.component";
+import {AuModalService} from "./modal.service";
 
 @Directive({
  selector: '[auModalOpenOnClick]'
 })
-export class AuModalOpenOnClickDirective {
-
-
+export class AuModalOpenOnClickDirective implements OnInit {
 
 
  constructor(private templateRef: TemplateRef<any>,
- private viewContainer: ViewContainerRef) {
+ private viewContainer: ViewContainerRef,
+ private modalService: AuModalService) {
 
  }
 
+ ngOnInit() {
+
+ this.modalService.close$.subscribe(() => this.viewContainer.clear());
+
+ }
 
  @Input()
  set auModalOpenOnClick(els) {

au-modal/src/app/au-modal/au-modal.component.html

@@ -1,6 +1,6 @@
 <div class="modal-overlay" (click)="closeModal()">
 
- <div class="modal-body">
+ <div class="modal-body" (click)="cancelClick($event)">
 
 
  <ng-container *ngIf="body else projectContent">

au-modal/src/app/au-modal/au-modal.component.ts

@@ -1,4 +1,5 @@
 import {Component, Input, OnInit, TemplateRef} from '@angular/core';
+import {AuModalService} from "./modal.service";
 
 @Component({
  selector: 'au-modal',
@@ -10,14 +11,19 @@ export class AuModalComponent implements OnInit {
  @Input()
  body: TemplateRef<any>;
 
- constructor() {
+ constructor(private modalService: AuModalService) {
  }
 
  ngOnInit() {
  }
 
  closeModal() {
+ this.modalService.close();
+ }
 
+ cancelClick(evt: KeyboardEvent) {
+ evt.preventDefault();
+ evt.stopPropagation();
  }
 
 }

au-modal/src/app/au-modal/au-modal.module.ts

@@ -6,6 +6,7 @@ import {ModuleWithProviders, NgModule} from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { AuModalComponent } from './au-modal.component';
 import { AuModalOpenOnClickDirective } from './au-modal-open-on-click.directive';
+import {AuModalService} from "./modal.service";
 
 
 
@@ -20,7 +21,12 @@ export class AuModalModule {
 
 
 
-
+ static forRoot(): ModuleWithProviders{
+ return {
+ ngModule: AuModalModule,
+ providers: [AuModalService]
+ }
+ }
 
 
 

au-modal/src/app/au-modal/modal.service.ts

@@ -0,0 +1,19 @@
+import {Injectable} from '@angular/core';
+import {Observable} from "rxjs/Observable";
+import {Subject} from "rxjs/Subject";
+
+@Injectable()
+export class AuModalService {
+
+ private subject = new Subject();
+
+ close$: Observable<any> = this.subject.asObservable();
+
+ constructor() {
+
+ }
+
+ close() {
+ this.subject.next();
+ }
+}