Added ng-bootstrap modal, which sends and retrieves ids

Author: mathisGarberg

src/app/modules/home/modals/my-modal.component.html

@@ -0,0 +1,12 @@
+<div class="modal-header">
+<h4 class="modal-title">My Modal</h4>
+<button type="button" class="close" aria-label="Close" (click)="activeModal.close(this.id)">
+    <span aria-hidden="true">&times;</span>
+</button>
+</div>
+<div class="modal-body">
+<p>Hello World!</p>
+</div>
+<div class="modal-footer">
+<button type="button" class="btn btn-outline-dark" (click)="activeModal.close(this.id)">Close</button>
+</div>

src/app/modules/home/modals/my-modal.component.ts

@@ -1,12 +1,19 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
     selector: 'app-my-modal',
     templateUrl: './my-modal.component.html',
     styleUrls: ['./my-modal.component.scss']
 })
 export class MyModalComponent implements OnInit {
-    constructor() { }
 
-    ngOnInit(): void { }
+    @Input() id;
+
+    constructor(public activeModal: NgbActiveModal) { }
+
+    ngOnInit(): void {
+        console.log(this.id);
+    }    
+
 }

src/app/modules/home/pages/home.component.html

@@ -1,4 +1,5 @@
 <div id="content">
+    <button class="btn btn-primary" (click)="openMyModal()">Open Modal</button>
     <ul>
         <li *ngFor="let project of projects$ | async">
             {{ project | json }}

src/app/modules/home/pages/home.component.ts

@@ -29,11 +29,11 @@ export class HomeComponent implements OnInit {
     }
 
     openMyModal() {
-        // this.modalService.open(MyModalComponent, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
-        //   this.closeResult = `Closed with: ${result}`;
-        // }, (reason) => {
-        //   this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
-        // });
+        const modalRef = this.modalService.open(MyModalComponent);
+        modalRef.componentInstance.id = 1;
+        modalRef.result.then((result) => {
+            console.log(result);
+        });
     }
 
 }