refactor: Modal in own component

client/src/app/screens/screen-send/screen-send.html

@@ -31,6 +31,7 @@
                 placeholder="username"
                 [(ngModel)]="recipient"
               />
+              <button (click)="openScanner()" class="btn btn-primary"><i class="bi bi-qr-code-scan"></i></button>
             </div>
           </div>
 
@@ -55,3 +56,7 @@
   </div>
 </div>
 
+<ng-template #qrScanner>
+  Abc
+</ng-template>
+

client/src/app/screens/screen-send/screen-send.ts

@@ -1,11 +1,14 @@
-import { Component } from '@angular/core';
+import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { APIService } from '../../services/api';
 import { NotificationService } from '../../services/notification';
+import  QrScanner from 'qr-scanner';
+import { NgbModal, NgbSlide } from '@ng-bootstrap/ng-bootstrap';
+import { Modal } from '../../components/modal/modal';
 
 @Component({
   selector: 'app-screen-send',
-  imports: [FormsModule],
+  imports: [FormsModule, NgbSlide],
   templateUrl: './screen-send.html',
   styleUrl: './screen-send.less',
 })
@@ -13,10 +16,13 @@ export class ScreenSend {
   amount: number = 0;
   recipient: string = '';
   reference: string = '';
+  scanner!: QrScanner;
+  @ViewChild('qrScanner') templScanner!: TemplateRef<any>;
 
   constructor(
     private api: APIService,
     private notify: NotificationService,
+    private modalService: NgbModal,
   ){}
 
   sendMoney() {
@@ -44,4 +50,12 @@ export class ScreenSend {
     this.recipient = '';
     this.reference = '';
   }
+  openScanner(){
+    const modalRef = this.modalService.open(Modal);
+    modalRef.componentInstance.title = 'Scan a QR Code';
+    modalRef.componentInstance.body = this.templScanner;
+
+
+  }
+  closeScanner(){}
 }