diff --git a/src/app/common/file-downloader/file-downloader.service.ts b/src/app/common/file-downloader/file-downloader.service.ts
index ba49cd64d..f37330e4a 100644
--- a/src/app/common/file-downloader/file-downloader.service.ts
+++ b/src/app/common/file-downloader/file-downloader.service.ts
@@ -51,6 +51,8 @@ export class FileDownloaderService {
 
         downloadLink.click();
         downloadLink.parentNode.removeChild(downloadLink);
+
+        this.alerts.add('info', 'File downloaded.', 3000);
       },
       (error: any) => {
         this.alerts.add('danger', `Error downloading file - ${error}`);
diff --git a/src/app/common/modals/comments-modal/comments-modal.coffee b/src/app/common/modals/comments-modal/comments-modal.coffee
deleted file mode 100644
index 7ecd247bb..000000000
--- a/src/app/common/modals/comments-modal/comments-modal.coffee
+++ /dev/null
@@ -1,32 +0,0 @@
-angular.module("doubtfire.common.modals.comments-modal", [])
-#
-# Modal to contain an image used in user comments.
-#
-.factory("CommentsModal", ($modal) ->
-  CommentsModal = {}
-  CommentsModal.show = (commentResourceUrl, commentType) ->
-    $modal.open
-      templateUrl: 'common/modals/comments-modal/comments-modal.tpl.html'
-      controller: 'CommentsModalCtrl'
-      size: 'lg'
-      resolve:
-        commentResourceUrl: -> commentResourceUrl
-        commentType: -> commentType
-  CommentsModal
-)
-.controller("CommentsModalCtrl", ($scope, $modalInstance, $sce, commentResourceUrl, commentType, alertService, fileDownloaderService) ->
-  # $scope.commentResourceUrl = $sce.trustAsResourceUrl(commentResourceUrl)
-  $scope.commentType = commentType
-  $scope.close = ->
-    fileDownloaderService.releaseBlob($scope.rawResourceUrl)
-    $modalInstance.dismiss()
-
-  fileDownloaderService.downloadBlob(
-    commentResourceUrl,
-    (url, response) ->
-      $scope.rawResourceUrl = url
-      $scope.commentResourceUrl = $sce.trustAsResourceUrl(url)
-    (error) ->
-      alertService.add('danger', "Error downloading comment: #{error}")
-  )
-)
diff --git a/src/app/common/modals/comments-modal/comments-modal.component.html b/src/app/common/modals/comments-modal/comments-modal.component.html
new file mode 100644
index 000000000..bd302b689
--- /dev/null
+++ b/src/app/common/modals/comments-modal/comments-modal.component.html
@@ -0,0 +1,10 @@
+<div class="modal-comment">
+    <div class="modal-body">
+      <div *ngIf="commentType == 'image'">
+        <img class="image-comment" [src]="commentResourceUrl" />
+      </div>
+      <div *ngIf="commentType == 'pdf'">
+        <iframe class="pdf-comment" [src]="commentResourceUrl" type="application/pdf"></iframe>
+      </div>
+    </div>
+  </div>
\ No newline at end of file
diff --git a/src/app/common/modals/comments-modal/comments-modal.component.scss b/src/app/common/modals/comments-modal/comments-modal.component.scss
new file mode 100644
index 000000000..ea07f249e
--- /dev/null
+++ b/src/app/common/modals/comments-modal/comments-modal.component.scss
@@ -0,0 +1,15 @@
+.modal-comment {
+    .image-comment {
+        width: 100%;
+        height: 100%;
+        align-content: center;
+        border-radius: 5px;
+        padding: 0;
+        border: none;
+    }
+    .pdf-comment {
+      width: 100%;
+      height: 80vh;
+      align-content: center;
+    }
+  }
\ No newline at end of file
diff --git a/src/app/common/modals/comments-modal/comments-modal.component.ts b/src/app/common/modals/comments-modal/comments-modal.component.ts
new file mode 100644
index 000000000..07f855a35
--- /dev/null
+++ b/src/app/common/modals/comments-modal/comments-modal.component.ts
@@ -0,0 +1,23 @@
+import { Component, OnInit, Input, Inject} from '@angular/core';
+import { alertService } from 'src/app/ajs-upgraded-providers';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+@Component({
+  selector: 'comments-modal',
+  templateUrl: './comments-modal.component.html',
+  styleUrls: ['./comments-modal.component.scss'],
+})
+export class CommentsModalComponent implements OnInit {
+  @Input() commentResourceUrl: string;
+  @Input() commentType: string;
+
+  constructor(
+    @Inject(alertService) private alertService: any,
+    public dialogRef: MatDialogRef<CommentsModalComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any,
+  ) {}
+
+  ngOnInit(): void {
+    console.log('comments-model ngOnInit()');
+  }
+}
\ No newline at end of file
diff --git a/src/app/common/modals/comments-modal/comments-modal.scss b/src/app/common/modals/comments-modal/comments-modal.scss
deleted file mode 100644
index 22ccacf4f..000000000
--- a/src/app/common/modals/comments-modal/comments-modal.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-.modal-comment {
-  .image-comment {
-      width: 100%;
-      height: 100%;
-      align-content: center;
-      border-radius: 5px;
-      padding: 0;
-      border: none;
-  }
-  .pdf-comment {
-    width: 100%;
-    height: 80vh;
-    align-content: center;
-  }
-}
\ No newline at end of file
diff --git a/src/app/common/modals/comments-modal/comments-modal.service.ts b/src/app/common/modals/comments-modal/comments-modal.service.ts
new file mode 100644
index 000000000..657a54bc6
--- /dev/null
+++ b/src/app/common/modals/comments-modal/comments-modal.service.ts
@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
+import { CommentsModalComponent } from './comments-modal.component';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CommentsModalService {
+  constructor(public dialog: MatDialog) {}
+
+  public show(commentResourceUrl: string, commentType: string) {
+    let dialogRef: MatDialogRef<CommentsModalComponent, any>;
+    dialogRef = this.dialog.open(CommentsModalComponent);
+    dialogRef.updateSize('100%', '100%');
+    dialogRef.componentInstance.commentResourceUrl = commentResourceUrl;
+    dialogRef.componentInstance.commentType = commentType;
+  }
+}
\ No newline at end of file
diff --git a/src/app/common/modals/comments-modal/comments-modal.tpl.html b/src/app/common/modals/comments-modal/comments-modal.tpl.html
deleted file mode 100644
index 59985945f..000000000
--- a/src/app/common/modals/comments-modal/comments-modal.tpl.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<div class="modal-comment">
-  <div class="modal-body">
-    <div ng-if="commentType == 'image'">
-      <img class="image-comment" ng-src="{{commentResourceUrl}}" />
-    </div>
-    <div ng-if="commentType == 'pdf'">
-      <iframe class="pdf-comment" ng-src="{{commentResourceUrl}}" type="application/pdf" />
-    </div>
-  </div>
-</div>
diff --git a/src/app/common/modals/modals.coffee b/src/app/common/modals/modals.coffee
index 6c40a882d..c3a494b80 100644
--- a/src/app/common/modals/modals.coffee
+++ b/src/app/common/modals/modals.coffee
@@ -2,5 +2,4 @@ angular.module("doubtfire.common.modals", [
   'doubtfire.common.modals.csv-result-modal'
   'doubtfire.common.modals.progress-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 18cf37a91..9a1e0652a 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/extensio
 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 { CommentsModalComponent } from './common/modals/comments-modal/comments-modal.component';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MAT_DATE_LOCALE, MatOptionModule } from '@angular/material/core';
@@ -250,6 +251,7 @@ import { TasksViewerComponent } from './units/states/tasks/tasks-viewer/tasks-vi
     OverseerImageListComponent,
     ExtensionModalComponent,
     CalendarModalComponent,
+    CommentsModalComponent,
     InstitutionSettingsComponent,
     HomeComponent,
     CommentBubbleActionComponent,
diff --git a/src/app/doubtfire-angularjs.module.ts b/src/app/doubtfire-angularjs.module.ts
index e84dd192a..769e12c17 100644
--- a/src/app/doubtfire-angularjs.module.ts
+++ b/src/app/doubtfire-angularjs.module.ts
@@ -134,7 +134,6 @@ import 'build/src/app/common/filters/filters.js';
 import 'build/src/app/common/content-editable/content-editable.js';
 import 'build/src/app/common/alert-list/alert-list.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/progress-modal/progress-modal.js';
 import 'build/src/app/common/modals/modals.js';
@@ -174,6 +173,7 @@ import { ExtensionCommentComponent } from './tasks/task-comments-viewer/extensio
 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 { CommentsModalService } from './common/modals/comments-modal/comments-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';
@@ -264,6 +264,7 @@ DoubtfireAngularJSModule.factory(
 DoubtfireAngularJSModule.factory('DoubtfireConstants', downgradeInjectable(DoubtfireConstants));
 DoubtfireAngularJSModule.factory('ExtensionModal', downgradeInjectable(ExtensionModalService));
 DoubtfireAngularJSModule.factory('CalendarModal', downgradeInjectable(CalendarModalService));
+DoubtfireAngularJSModule.factory('CommentsModal', downgradeInjectable(CommentsModalService));
 DoubtfireAngularJSModule.factory('TaskCommentService', downgradeInjectable(TaskCommentService));
 DoubtfireAngularJSModule.factory('tutorialService', downgradeInjectable(TutorialService));
 DoubtfireAngularJSModule.factory('streamService', downgradeInjectable(TutorialStreamService));
diff --git a/src/app/tasks/task-comments-viewer/pdf-image-comment/pdf-image-comment.component.ts b/src/app/tasks/task-comments-viewer/pdf-image-comment/pdf-image-comment.component.ts
index cc3817cf6..35c7a3e8e 100644
--- a/src/app/tasks/task-comments-viewer/pdf-image-comment/pdf-image-comment.component.ts
+++ b/src/app/tasks/task-comments-viewer/pdf-image-comment/pdf-image-comment.component.ts
@@ -46,10 +46,12 @@ export class PdfImageCommentComponent implements OnInit, OnDestroy {
   }
 
   public openCommentsModal() {
-    if (this.resourceUrl) {
+    if (this.comment.commentType == 'image') {
       this.commentsModalRef.show(this.resourceUrl, this.comment.commentType);
     } else {
-      this.downloadCommentResource(this.openCommentsModal.bind(this));
+      if (this.comment.commentType === 'pdf') {
+        this.fileDownloaderService.downloadFile(this.comment.attachmentUrl, "view.pdf");
+      }
     }
   }
 }
diff --git a/src/app/tasks/task-comments-viewer/task-comments-viewer.component.ts b/src/app/tasks/task-comments-viewer/task-comments-viewer.component.ts
index 3aa677152..3aa72a774 100644
--- a/src/app/tasks/task-comments-viewer/task-comments-viewer.component.ts
+++ b/src/app/tasks/task-comments-viewer/task-comments-viewer.component.ts
@@ -143,10 +143,10 @@ export class TaskCommentsViewerComponent implements OnChanges, OnInit {
     document.querySelector(`#comment-${commentID}`).scrollIntoView();
   }
 
-  openCommentsModal(comment: TaskComment) {
+  /*openCommentsModal(comment: TaskComment) {
     const resourceUrl = comment.attachmentUrl;
     this.commentsModalRef.show(resourceUrl, comment.commentType);
-  }
+  }*/
 
   shouldShowAuthorIcon(commentType: string) {
     return !(commentType === 'extension' || commentType === 'status' || commentType == 'assessment');