Se implementa modal-event mediante compoente modal

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

@@ -1,14 +1,3 @@
-<button type="button" class="btn btn-primary" (click)="openModal(template)">Open modal</button>
+<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>
-<ng-template #template>
-  <div class="modal-header">
-    <h4 class="modal-title pull-left">Modal</h4>
-    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
-      <span aria-hidden="true">&times;</span>
-    </button>
-  </div>
-  <div class="modal-body">
-    This is a modal
-  </div>
-</ng-template>

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

@@ -1,6 +1,7 @@
-import { Component, ChangeDetectorRef, TemplateRef } from '@angular/core';
+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',
@@ -13,19 +14,14 @@ export class ModalEventsComponent {
   subscriptions: Subscription[] = [];
   messages: string[] = [];
 
-  constructor(private modalService: BsModalService, private changeDetection: ChangeDetectorRef) {
-  }
+  constructor(
+    private modalService: BsModalService,
+    private changeDetection: ChangeDetectorRef,
+  ) {}
 
-  openModal(template: TemplateRef<any>) {
+  openModal() {
     this.messages = [];
 
-    const combineEvents = combineLatest(
-      this.modalService.onShow,
-      this.modalService.onShown,
-      this.modalService.onHide,
-      this.modalService.onHidden
-    ).subscribe(() => this.changeDetection.markForCheck());
-
     this.subscriptions.push(
       this.modalService.onShow.subscribe((reason: string) => {
         this.messages.push(`onShow event has been fired`);
@@ -53,8 +49,15 @@ export class ModalEventsComponent {
       })
     );
 
+    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(template);
+
+    this.modalRef = this.modalService.show(ModalEventComponentComponent);
   }
 
   unsubscribe() {

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

@@ -2,6 +2,7 @@ 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: [
@@ -10,6 +11,7 @@ import { ModalModule } from 'ngx-bootstrap/modal';
   imports: [
     BrowserModule,
     ModalModule.forRoot(),
+    ModalEventComponentModule,
   ],
   exports: [
     ModalEventsComponent,