feat(ui-features): add the modals page

src/app/pages/ui-features/modals/modal/modal.component.html

@@ -0,0 +1,14 @@
+<div class="modal-content">
+  <div class="modal-header">
+    <h4 class="modal-title">{{ modalHeader }}</h4>
+    <button class="close" aria-label="Close" (click)="closeModal()">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+  <div class="modal-body">
+    {{ modalContent }}
+  </div>
+  <div class="modal-footer">
+    <button class="btn btn-primary confirm-btn" (click)="closeModal()">Save changes</button>
+  </div>
+</div>

src/app/pages/ui-features/modals/modal/modal.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'ngx-modal',
+  templateUrl: './modal.component.html'
+})
+export class NgxModalComponent implements OnInit {
+
+  modalHeader: string;
+  modalContent: string = `Lorem ipsum dolor sit amet,
+    consectetuer adipiscing elit, sed diam nonummy
+    nibh euismod tincidunt ut laoreet dolore magna aliquam
+    erat volutpat. Ut wisi enim ad minim veniam, quis
+    nostrud exerci tation ullamcorper suscipit lobortis
+    nisl ut aliquip ex ea commodo consequat.`;
+
+  constructor(private activeModal: NgbActiveModal) { }
+
+  ngOnInit() { }
+
+  closeModal() {
+    this.activeModal.close();
+  }
+
+}

src/app/pages/ui-features/modals/modals.component.html

@@ -0,0 +1,12 @@
+<div class="row">
+  <div class="col-md-12">
+    <nga-card>
+      <nga-card-header>Modals</nga-card-header>
+      <nga-card-body>
+        <button class="btn btn-success" (click)="showLargeModal()">Large modal</button>
+        <button class="btn btn-warning" (click)="showSmallModal()">Small modal</button>
+        <button class="btn btn-primary" (click)="showStaticModal()">Static modal</button>
+      </nga-card-body>
+    </nga-card>
+  </div>
+</div>

src/app/pages/ui-features/modals/modals.component.scss

@@ -0,0 +1,9 @@
+:host {
+  display: block;
+
+  nga-card-body {
+    button {
+      margin-right: 10px;
+    }
+  }
+}

src/app/pages/ui-features/modals/modals.component.ts

@@ -1,15 +1,39 @@
 import { Component, OnInit } from '@angular/core';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+
+import { NgxModalComponent } from './modal/modal.component';
 
 @Component({
   selector: 'ngx-modals',
-  template: `
+  styleUrls: ['./modals.component.scss'],
-    <p>modals works!</p>
+  templateUrl: './modals.component.html',
-  `,
 })
 export class NgxModalsComponent implements OnInit {
 
-  constructor() { }
+  constructor(private modalService: NgbModal) { }
 
   ngOnInit() { }
 
+  showLargeModal() {
+    const activeModal = this.modalService.open(NgxModalComponent, { size: 'lg' });
+
+    activeModal.componentInstance.modalHeader = 'Large Modal';
+  }
+  showSmallModal() {
+    const activeModal = this.modalService.open(NgxModalComponent, { size: 'sm' });
+
+    activeModal.componentInstance.modalHeader = 'Small Modal';
+  }
+
+  showStaticModal() {
+    const activeModal = this.modalService.open(NgxModalComponent, {
+      size: 'sm',
+      backdrop: 'static'
+    });
+
+    activeModal.componentInstance.modalHeader = 'Static modal';
+    activeModal.componentInstance.modalContent = `This is static modal, backdrop click
+                                                    will not close it. Click × or confirmation button to close modal.`;
+  }
+
 }

src/app/pages/ui-features/ui-features-routing.module.ts

@@ -40,19 +40,3 @@ const routes: Routes = [
   exports: [RouterModule],
 })
 export class NgxUiFeaturesRoutingModule { }
-
-export const routedComponents = [
-  NgxUiFeaturesComponent,
-  NgxButtonsComponent,
-  NgxGridComponent,
-  NgxIconsComponent,
-  NgxModalsComponent,
-  NgxFlatButtonsComponent,
-  NgxRaisedButtonsComponent,
-  NgxSizedButtonsComponent,
-  NgxDisabledButtonsComponent,
-  NgxIconButtonsComponent,
-  NgxDropdownButtonsComponent,
-  NgxLargeButtonsComponent,
-  NgxGroupButtonsComponent,
-];

src/app/pages/ui-features/ui-features.module.ts

@@ -2,7 +2,38 @@ import { NgModule } from '@angular/core';
 
 import { NgxSharedModule } from '../../@shared/shared.module';
 
-import { NgxUiFeaturesRoutingModule, routedComponents } from './ui-features-routing.module';
+import { NgxUiFeaturesRoutingModule } from './ui-features-routing.module';
+import { NgxUiFeaturesComponent } from './ui-features.component';
+import { NgxButtonsComponent } from './buttons/buttons.component';
+import { NgxGridComponent } from './grid/grid.component';
+import { NgxModalsComponent } from './modals/modals.component';
+import { NgxIconsComponent } from './icons/icons.component';
+import { NgxFlatButtonsComponent } from './buttons/flat/flat.component';
+import { NgxRaisedButtonsComponent } from './buttons/raised/raised.component';
+import { NgxSizedButtonsComponent } from './buttons/sized/sized.component';
+import { NgxDisabledButtonsComponent } from './buttons/disabled/disabled.component';
+import { NgxIconButtonsComponent } from './buttons/icon/icon.component';
+import { NgxDropdownButtonsComponent } from './buttons/dropdown/dropdown.component';
+import { NgxGroupButtonsComponent } from './buttons/group/group.component';
+import { NgxLargeButtonsComponent } from './buttons/large/large.component';
+import { NgxModalComponent } from './modals/modal/modal.component';
+
+export const NGX_UI_FEATURES_COMPONENTS = [
+  NgxUiFeaturesComponent,
+  NgxButtonsComponent,
+  NgxGridComponent,
+  NgxIconsComponent,
+  NgxModalsComponent,
+  NgxFlatButtonsComponent,
+  NgxRaisedButtonsComponent,
+  NgxSizedButtonsComponent,
+  NgxDisabledButtonsComponent,
+  NgxIconButtonsComponent,
+  NgxDropdownButtonsComponent,
+  NgxLargeButtonsComponent,
+  NgxGroupButtonsComponent,
+  NgxModalComponent,
+];
 
 @NgModule({
   imports: [
@@ -10,7 +41,10 @@ import { NgxUiFeaturesRoutingModule, routedComponents } from './ui-features-rout
     NgxUiFeaturesRoutingModule,
   ],
   declarations: [
-    ...routedComponents,
+    ...NGX_UI_FEATURES_COMPONENTS,
+  ],
+  entryComponents: [
+    NgxModalComponent,
   ],
 })
 export class NgxUiFeaturesModule { }