diff --git a/src/app/common/modals/confirmation-modal/confirmation-modal.coffee b/src/app/common/modals/confirmation-modal/confirmation-modal.coffee
deleted file mode 100644
index c7999098c..000000000
--- a/src/app/common/modals/confirmation-modal/confirmation-modal.coffee
+++ /dev/null
@@ -1,35 +0,0 @@
-angular.module("doubtfire.common.modals.confirmation-modal", [])
-
-.factory("ConfirmationModal", ($modal) ->
-  ConfirmationModal = {}
-
-  #
-  # Show a modal asking the user to confirm their indicated action.
-  #
-  ConfirmationModal.show = (title, message, action) ->
-    modalInstance = $modal.open
-      templateUrl: 'common/modals/confirmation-modal/confirmation-modal.tpl.html'
-      controller: 'ConfirmationModalCtrl'
-      resolve:
-        title: -> title
-        message: -> message
-        action: -> action
-
-  ConfirmationModal
-)
-
-#
-# Controller for confirmation modal
-#
-.controller('ConfirmationModalCtrl', ($scope, $modalInstance, title, message, action, alertService) ->
-  $scope.title = title
-  $scope.message = message
-
-  $scope.confirmAction = ->
-    action()
-    $modalInstance.dismiss()
-
-  $scope.cancelAction = ->
-    alertService.message "#{title} action cancelled", 3000
-    $modalInstance.dismiss()
-)
diff --git a/src/app/common/modals/confirmation-modal/confirmation-modal.tpl.html b/src/app/common/modals/confirmation-modal/confirmation-modal.component.html
similarity index 74%
rename from src/app/common/modals/confirmation-modal/confirmation-modal.tpl.html
rename to src/app/common/modals/confirmation-modal/confirmation-modal.component.html
index 4bd87f686..ec66dcf72 100644
--- a/src/app/common/modals/confirmation-modal/confirmation-modal.tpl.html
+++ b/src/app/common/modals/confirmation-modal/confirmation-modal.component.html
@@ -6,15 +6,15 @@ <h3 class="modal-title">
       <small>Please confirm that you want to perform this action.</small>
     </h3>
   </div>
-  <div class="modal-body">
+  <div class="modal-body" style="font-size: 1.5em;">
     {{message}}
   </div>
   <div class="modal-footer clearfix">
     <div class="btn-group">
-      <label class="btn btn-success" ng-click="confirmAction()">
+      <label class="btn btn-success" (click)="confirmAction()">
         <i class="fa fa-check"></i> Confirm
       </label>
-      <label class="btn btn-danger" ng-click="cancelAction()">
+      <label class="btn btn-danger" (click)="cancelAction()">
         <i class="fa fa-times"></i> Cancel
       </label>
     </div>
diff --git a/src/app/common/modals/confirmation-modal/confirmation-modal.scss b/src/app/common/modals/confirmation-modal/confirmation-modal.component.scss
similarity index 57%
rename from src/app/common/modals/confirmation-modal/confirmation-modal.scss
rename to src/app/common/modals/confirmation-modal/confirmation-modal.component.scss
index f30b0e345..9afc6bd60 100644
--- a/src/app/common/modals/confirmation-modal/confirmation-modal.scss
+++ b/src/app/common/modals/confirmation-modal/confirmation-modal.component.scss
@@ -1,3 +1,3 @@
 .confirmation-modal .modal-body {
-  font-size: 1.5em;
-}
+    font-size: 1.5em;
+  }
\ No newline at end of file
diff --git a/src/app/common/modals/confirmation-modal/confirmation-modal.component.ts b/src/app/common/modals/confirmation-modal/confirmation-modal.component.ts
new file mode 100644
index 000000000..27f0d89d8
--- /dev/null
+++ b/src/app/common/modals/confirmation-modal/confirmation-modal.component.ts
@@ -0,0 +1,41 @@
+/* eslint-disable prettier/prettier */
+/* eslint-disable @angular-eslint/component-selector */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Component, OnInit, Input, Inject} from '@angular/core';
+import { AlertService } from '../../services/alert.service';
+import { MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+  selector: 'confirmation-modal',
+  templateUrl: './confirmation-modal.component.html',
+  styleUrls: ['./confirmation-modal.component.scss'],
+})
+export class ConfirmationModalComponent implements OnInit {
+  @Input() title: string;
+  @Input() message: string;
+  @Input() action: () => void;
+
+  constructor(
+    @Inject(AlertService) private alertService: any,
+    public dialogRef: MatDialogRef<ConfirmationModalComponent>,
+  ) {}
+
+  ngOnInit(): void {
+    console.log('confirmation-model ngOnInit()');
+  }
+
+  public confirmAction() {
+    if (typeof this.action === 'function') {
+      this.action();
+    } else {
+      this.alertService.error(`${this.title} action failed.`);
+    }
+
+    this.dialogRef.close();
+  }
+
+  public cancelAction() {
+    this.alertService.success(`${this.title} action cancelled.`);
+    this.dialogRef.close();
+  }
+}
diff --git a/src/app/common/modals/confirmation-modal/confirmation-modal.service.ts b/src/app/common/modals/confirmation-modal/confirmation-modal.service.ts
new file mode 100644
index 000000000..06c4da61e
--- /dev/null
+++ b/src/app/common/modals/confirmation-modal/confirmation-modal.service.ts
@@ -0,0 +1,22 @@
+/* eslint-disable prefer-const */
+/* eslint-disable prettier/prettier */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Injectable } from '@angular/core';
+import { MatDialogRef, MatDialog } from '@angular/material/dialog';
+import { ConfirmationModalComponent } from './confirmation-modal.component';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ConfirmationModalService {
+  constructor(public dialog: MatDialog) {}
+
+  public show(title: string, message: string, action?: any) {
+    let dialogRef: MatDialogRef<ConfirmationModalComponent, any>;
+    dialogRef = this.dialog.open(ConfirmationModalComponent, {position: {top: '2.5%'}});
+    dialogRef.updateSize('42.5%', '');
+    dialogRef.componentInstance.title = title;
+    dialogRef.componentInstance.message = message;
+    dialogRef.componentInstance.action = action;
+  }
+}
diff --git a/src/app/common/modals/modals.coffee b/src/app/common/modals/modals.coffee
index 16d2be1ec..73aae8685 100644
--- a/src/app/common/modals/modals.coffee
+++ b/src/app/common/modals/modals.coffee
@@ -1,5 +1,4 @@
 angular.module("doubtfire.common.modals", [
   'doubtfire.common.modals.csv-result-modal'
-  'doubtfire.common.modals.confirmation-modal'
   'doubtfire.common.modals.comments-modal'
 ])
diff --git a/src/app/doubtfire-angular.module.ts b/src/app/doubtfire-angular.module.ts
index 5f250b661..f37b72e8c 100644
--- a/src/app/doubtfire-angular.module.ts
+++ b/src/app/doubtfire-angular.module.ts
@@ -95,6 +95,7 @@ import {ExtensionCommentComponent} from './tasks/task-comments-viewer/extension-
 import {CampusListComponent} from './admin/institution-settings/campuses/campus-list/campus-list.component';
 import {ExtensionModalComponent} from './common/modals/extension-modal/extension-modal.component';
 import {CalendarModalComponent} from './common/modals/calendar-modal/calendar-modal.component';
+import { ConfirmationModalComponent } from './common/modals/confirmation-modal/confirmation-modal.component';
 import {MatRadioModule} from '@angular/material/radio';
 import {MatButtonToggleModule} from '@angular/material/button-toggle';
 import {MAT_DATE_LOCALE, MatOptionModule} from '@angular/material/core';
@@ -251,6 +252,7 @@ import {TasksViewerComponent} from './units/states/tasks/tasks-viewer/tasks-view
     OverseerImageListComponent,
     ExtensionModalComponent,
     CalendarModalComponent,
+    ConfirmationModalComponent,
     InstitutionSettingsComponent,
     HomeComponent,
     CommentBubbleActionComponent,
diff --git a/src/app/doubtfire-angularjs.module.ts b/src/app/doubtfire-angularjs.module.ts
index c102584ea..07a14e6af 100644
--- a/src/app/doubtfire-angularjs.module.ts
+++ b/src/app/doubtfire-angularjs.module.ts
@@ -118,7 +118,6 @@ import 'build/src/app/units/states/students-list/students-list.js';
 import 'build/src/app/units/states/analytics/analytics.js';
 import 'build/src/app/common/filters/filters.js';
 import 'build/src/app/common/content-editable/content-editable.js';
-import 'build/src/app/common/modals/confirmation-modal/confirmation-modal.js';
 import 'build/src/app/common/modals/comments-modal/comments-modal.js';
 import 'build/src/app/common/modals/csv-result-modal/csv-result-modal.js';
 import 'build/src/app/common/modals/modals.js';
@@ -157,6 +156,7 @@ import {ExtensionCommentComponent} from './tasks/task-comments-viewer/extension-
 import {TaskAssessmentCommentComponent} from './tasks/task-comments-viewer/task-assessment-comment/task-assessment-comment.component';
 import {ExtensionModalService} from './common/modals/extension-modal/extension-modal.service';
 import {CalendarModalService} from './common/modals/calendar-modal/calendar-modal.service';
+import { ConfirmationModalService } from './common/modals/confirmation-modal/confirmation-modal.service';
 import {CampusListComponent} from './admin/institution-settings/campuses/campus-list/campus-list.component';
 import {ActivityTypeListComponent} from './admin/institution-settings/activity-type-list/activity-type-list.component';
 import {InstitutionSettingsComponent} from './admin/institution-settings/institution-settings.component';
@@ -250,6 +250,7 @@ DoubtfireAngularJSModule.factory('DoubtfireConstants', downgradeInjectable(Doubt
 DoubtfireAngularJSModule.factory('ExtensionModal', downgradeInjectable(ExtensionModalService));
 DoubtfireAngularJSModule.factory('Marked', downgradeInjectable(MarkedPipe));
 DoubtfireAngularJSModule.factory('CalendarModal', downgradeInjectable(CalendarModalService));
+DoubtfireAngularJSModule.factory('ConfirmationModal', downgradeInjectable(ConfirmationModalService));
 DoubtfireAngularJSModule.factory('TaskCommentService', downgradeInjectable(TaskCommentService));
 DoubtfireAngularJSModule.factory('alertService', downgradeInjectable(AlertService));
 DoubtfireAngularJSModule.factory('tutorialService', downgradeInjectable(TutorialService));