Problem using Mat-Dialog in a Service in Angular

Issue

I am having a problem trying to get mat-Dialog to work in a service. I can call the same code from my template with an onclick event but if i try to use the service this component consumes it fails with this error

TypeError: Cannot read properties of undefined (reading 'open')

Below is the code of the service which gets triggered when user try's to upload a file. It triggers it as expected and all works except i cant show the dialog box. Wondering if there is a certain way i have to do this in service vs a form ?

import {Inject, Injectable, OnDestroy} from '@angular/core';
import {environment} from '../../environments/environment';
import {switchMap, take, takeWhile} from 'rxjs/operators';
import {ModalImagePropertiesComponent} from '../modules/image-before-upload/modal-image-properties/modal-image-properties.component';
import {IUploadedImageProperties} from '../modules/uploaded-image-properties';
import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material/dialog';

@Injectable({
  providedIn: 'root'
})
  constructor(
    private authService: AuthService,
    private http: HttpClient,
    public toasterService: ToasterService,
    @Inject(IgxOverlayService) private overlayService: IgxOverlayService,
    private dialog: MatDialog,
    //@Optional() @Inject(MAT_DIALOG_DATA) public data: any,
    private dialogRef: MatDialogRef<ModalImagePropertiesComponent>,

  ) {
  }
// New Upload Service
  initNewUploadEvents(): Object {
    const _froalaUploadService = this;
    console.log('Calling New Upload')
    return {
      'image.beforeUpload': function (images) {
        // make copies of the data passed in since they are lost after false is returned to froala from this callback
        const copies = {
          editor: this,  // {...editor}, // make full copy of editor object
          // e: {...e}, // make full copy of the event
          images: {...images}, // make full copy of the images
        };
        let imageBase64 = null;
        // create reader
        if (images.length) {
          // Create a File Reader.
          const reader = new FileReader();
          // Set the reader to insert images when they are loaded.
          reader.onload = (ev) => {
            imageBase64 = ev.target['result'];
          // console.log('file reader result ', imageBase64);
          };
          // Read image as base64.
          reader.readAsDataURL(images[0]);
        }

        _froalaUploadService.editorInstance = this;

            const modalInstance = {}
            // Splitting the name (filename) here and taking the first part which represents the name without the extension
            modalInstance.imageProperties = {
              filename: copies.images[0].name.split('.')[0],
              original_filename: copies.images[0].name,
              myFile: imageBase64,
              user_id: _froalaUploadService.userId,
            };

        const dialogRef = this.dialog.open(ModalImagePropertiesComponent,
          {
            data: row,
            disableClose: false, width: '600px', position: {
              top: '50px'
            },
          })
          
            console.log(modalInstance.imageProperties)

      },

Solution

I think the context of this gets lost in the function. But you are keeping reference in the local variable _froalaUploadService = this

const dialogRef = _froalaUploadService.dialog.open(ModalImagePropertiesComponent,
    {
      data: row,
      disableClose: false, width: '600px', position: {
      top: '50px'
    },
  });

Answered By - HassanMoin