Feature/modal-events (#3)

* Implementación de modal-event mediante template

* Se implementa modal-event mediante compoente modal

src/app/app.component.html

@@ -4,5 +4,6 @@ <h1>NGX - Modals</h1>
     <!-- <app-modal-template></app-modal-template> -->
     <!-- <app-modal-component></app-modal-component> -->
     <!-- <app-modal-nested></app-modal-nested> -->
-    <app-modal-scrolling></app-modal-scrolling>
+    <!-- <app-modal-scrolling></app-modal-scrolling> -->
+    <app-modal-events></app-modal-events>
 </div>

src/app/app.module.ts

@@ -6,6 +6,7 @@ import { ModalTemplateModule } from './components/modal-template/modal-template.
 import { ModalComponentModule } from './components/modal-component/modal-component.module';
 import { ModalNestedModule } from './components/modal-nested/modal-nested.module';
 import { ModalScrollingModule } from './components/modal-scrolling/modal-scrolling.module';
+import { ModalEventsModule } from './components/modal-events/modal-events.module';
 
 @NgModule({
   declarations: [
@@ -17,6 +18,7 @@ import { ModalScrollingModule } from './components/modal-scrolling/modal-scrolli
     ModalComponentModule,
     ModalNestedModule,
     ModalScrollingModule,
+    ModalEventsModule,
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/components/modal-events/components/modal-event-component/modal-event-component.component.html

@@ -0,0 +1,9 @@
+<div class="modal-header">
+  <h4 class="modal-title pull-left">Modal</h4>
+  <button type="button" class="close pull-right" aria-label="Close" (click)="closeModal()">
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>
+<div class="modal-body">
+  This is a modal
+</div>

src/app/components/modal-events/components/modal-event-component/modal-event-component.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ModalEventComponentComponent } from './modal-event-component.component';
+
+describe('ModalEventComponentComponent', () => {
+  let component: ModalEventComponentComponent;
+  let fixture: ComponentFixture<ModalEventComponentComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ModalEventComponentComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ModalEventComponentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/modal-events/components/modal-event-component/modal-event-component.component.ts

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { BsModalRef } from 'ngx-bootstrap/modal';
+
+@Component({
+  templateUrl: './modal-event-component.component.html',
+  styleUrls: ['./modal-event-component.component.scss']
+})
+export class ModalEventComponentComponent {
+
+  constructor(public bsModalRef: BsModalRef) { }
+
+  closeModal() {
+    this.bsModalRef.hide();
+  }
+
+}

src/app/components/modal-events/components/modal-event-component/modal-event-component.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { ModalEventComponentComponent } from './modal-event-component.component';
+import { ModalModule } from 'ngx-bootstrap/modal';
+
+@NgModule({
+  declarations: [
+    ModalEventComponentComponent
+  ],
+  imports: [
+    BrowserModule,
+    ModalModule.forRoot(),
+  ],
+  entryComponents: [
+    ModalEventComponentComponent
+  ]
+})
+export class ModalEventComponentModule {}

src/app/components/modal-events/modal-events.component.html

@@ -0,0 +1,3 @@
+<button type="button" class="btn btn-primary" (click)="openModal()">Open modal</button>
+<br><br>
+<pre class="card card-block card-header" *ngFor="let message of messages">{{message}}</pre>

src/app/components/modal-events/modal-events.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ModalEventsComponent } from './modal-events.component';
+
+describe('ModalEventsComponent', () => {
+  let component: ModalEventsComponent;
+  let fixture: ComponentFixture<ModalEventsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ModalEventsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ModalEventsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/modal-events/modal-events.component.ts

@@ -0,0 +1,70 @@
+import { Component, ChangeDetectorRef } from '@angular/core';
+import { Subscription, combineLatest } from 'rxjs';
+import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
+import { ModalEventComponentComponent } from './components/modal-event-component/modal-event-component.component';
+
+@Component({
+  selector: 'app-modal-events',
+  templateUrl: './modal-events.component.html',
+  styleUrls: ['./modal-events.component.scss']
+})
+export class ModalEventsComponent {
+
+  modalRef: BsModalRef;
+  subscriptions: Subscription[] = [];
+  messages: string[] = [];
+
+  constructor(
+    private modalService: BsModalService,
+    private changeDetection: ChangeDetectorRef,
+  ) {}
+
+  openModal() {
+    this.messages = [];
+
+    this.subscriptions.push(
+      this.modalService.onShow.subscribe((reason: string) => {
+        this.messages.push(`onShow event has been fired`);
+      })
+    );
+
+    this.subscriptions.push(
+      this.modalService.onShown.subscribe((reason: string) => {
+        this.messages.push(`onShown event has been fired`);
+      })
+    );
+
+    this.subscriptions.push(
+      this.modalService.onHide.subscribe((reason: string) => {
+        const eventReason = reason ? `, dismissed by ${reason}` : '';
+        this.messages.push(`onHide event has been fired${eventReason}`);
+      })
+    );
+
+    this.subscriptions.push(
+      this.modalService.onHidden.subscribe((reason: string) => {
+        const eventReason = reason ? `, dismissed by ${reason}` : '';
+        this.messages.push(`onHidden event has been fired${eventReason}`);
+        this.unsubscribe();
+      })
+    );
+
+    const combineEvents = combineLatest(
+      this.modalService.onShow,
+      this.modalService.onShown,
+      this.modalService.onHide,
+      this.modalService.onHidden
+    ).subscribe(() => this.changeDetection.markForCheck());
+    this.subscriptions.push(combineEvents);
+
+    this.modalRef = this.modalService.show(ModalEventComponentComponent);
+  }
+
+  unsubscribe() {
+    this.subscriptions.forEach((subscription: Subscription) => {
+      subscription.unsubscribe();
+    });
+    this.subscriptions = [];
+  }
+
+}

src/app/components/modal-events/modal-events.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { ModalEventsComponent } from './modal-events.component';
+import { ModalModule } from 'ngx-bootstrap/modal';
+import { ModalEventComponentModule } from './components/modal-event-component/modal-event-component.module';
+
+@NgModule({
+  declarations: [
+    ModalEventsComponent,
+  ],
+  imports: [
+    BrowserModule,
+    ModalModule.forRoot(),
+    ModalEventComponentModule,
+  ],
+  exports: [
+    ModalEventsComponent,
+  ]
+})
+export class ModalEventsModule { }