title: Property 'open' does not exist on type dialogComponent
body: <p>I am trying to create the dialog component to update the table by clicking the button.
  view-sos.component.html</p>
  <p><code>&lt;button&gt;&lt;a (click)=&quot;openDialog('Update',element)&quot;&gt;Edit&lt;/a&gt;&lt;/button&gt;</code></p>
  <p>view-sos-component.ts</p>
  <pre><code>import { MatTableDataSource } from '@angular/material/table';
  import { MatPaginator } from '@angular/material/paginator';
  import {MatSort} from '@angular/material/sort';
  import { MatTable } from '@angular/material/table';
  import {MatDialogModule} from '@angular/material/dialog';
  import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
  import {ViewSosService} from '../../services/sos/view-sos.service';
  import { UpdateDialogComponent } from './update-dialog/update-dialog.component'
  
  @Component({
    selector: 'app-view-sos',
    templateUrl: './view-sos.component.html',
    styleUrls: ['./view-sos.component.css']
  })
  export class ViewSosComponent implements OnInit {
  
    data:Array&lt;any&gt;;
    sosMsgInfo:Array&lt;any&gt;;
    marketInfoLocations:Array&lt;any&gt;;
    sosList:Array&lt;any&gt;;
    en:string;
    fr:string;
    sw:string;
    pt:string;
    loading = true;
    constructor(private getsosMsg: ViewSosService, public dialog: UpdateDialogComponent) {
      this.data = new Array&lt;any&gt;();
     }
  
     openDialog(action,obj) {
      obj.action = action;
      const dialogRef = this.dialog.open(UpdateDialogComponent, {
        width: '250px',
        data:obj
      });
  
      dialogRef.afterClosed().subscribe(result =&gt; {
        if(result.event == 'Update'){
          this.updateRowData(result.data);
        }else if(result.event == 'Delete'){
          this.deleteRowData(result.data);
        }
      });
     }
  
     updateRowData(row_obj){
      this.dataSource = this.dataSource.filter((value,key)=&gt;{
        if(value.id == row_obj.id){
          value.name = row_obj.name;
        }
        return true;
      });
    }
    deleteRowData(row_obj){
      this.dataSource = this.dataSource.filter((value,key)=&gt;{
        return value.id != row_obj.id;
      });
    }
  
    displayedColumns: string[] = ['serialNo', 'messageEng', 'messageFre', 'messageSwa', 'messagePor','sosImg','action'];
    dataSource = new MatTableDataSource&lt;MarketData&gt;();
  
    @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
    @ViewChild(MatSort, {static: true}) sort: MatSort;
    @ViewChild(MatTable,{static:true}) table: MatTable&lt;any&gt;;
  
    ngOnInit(){
      //var retrievedObject = localStorage.getItem('testObject');
      //console.log('retrievedObject: ', JSON.stringify(retrievedObject));
  
      this.getsosMsg.getsosMsgInfo().subscribe((data) =&gt;{
        var json = JSON.parse(JSON.stringify(data));
        this.sosList=[];
         for(var i=0;i&lt;json.SOSMessageInfo.length;i++)
         {
           this.splitLang(json.SOSMessageInfo[i].Message);
           this.sosList.push({&quot;SosID&quot;:json.SOSMessageInfo[i][&quot;Message Id&quot;],&quot;Message&quot;:this.en,&quot;MessageFrench&quot;:this.fr,&quot;MessagePortuguese&quot;:this.pt,&quot;MessageSwahili&quot;:this.sw,&quot;image&quot;:json.SOSMessageInfo[i][&quot;Image Url&quot;],'Update':false});
         }
         console.log(this.sosList);
         this.dataSource = new MatTableDataSource&lt;MarketData&gt;(this.sosList);
         this.dataSource.paginator = this.paginator;
         this.dataSource.sort = this.sort;
         this.loading = false;
      });
  
      //localStorage.setItem('testObject', JSON.stringify(this.sosList));
  
  
    }
  
    splitLang(str)
       {
         this.en=str.split(&quot;$&quot;)[0];
         this.fr=str.split(&quot;$&quot;)[1];
         this.sw=str.split(&quot;$&quot;)[2];
         this.pt=str.split(&quot;$&quot;)[3];
         console.log(this.en);
       }
    
    applyFilter(filterValue: string) {
      filterValue = filterValue.trim(); 
      filterValue = filterValue.toLowerCase(); 
      this.dataSource.filter = filterValue;
    }
  
  }
  export interface MarketData {
    serialNo: number;
    messageEng: string;
    messageFre: string;
    messageSwa: string;
    messagePor: string;
    sosImg: string;
    action: string;
  }
  </code></pre>
  <p>Below is the dialog component
  update-dialog.component.html</p>
  <pre><code>&lt;h1 mat-dialog-title&gt;Row Action :: &lt;strong&gt;{{action}}&lt;/strong&gt;&lt;/h1&gt;
  &lt;div mat-dialog-content&gt;
    &lt;mat-form-field *ngIf=&quot;action != 'Delete'; else elseTemplate&quot;&gt;
      &lt;input placeholder=&quot;{{action}} Name&quot; matInput [(ngModel)]=&quot;local_data.name&quot;&gt;
    &lt;/mat-form-field&gt;
    &lt;ng-template #elseTemplate&gt;
      Sure to delete &lt;b&gt;{{local_data.name}}&lt;/b&gt;?
    &lt;/ng-template&gt;
  &lt;/div&gt;
  &lt;div mat-dialog-actions&gt;
    &lt;button mat-button (click)=&quot;doAction()&quot;&gt;{{action}}&lt;/button&gt;
    &lt;button mat-button (click)=&quot;closeDialog()&quot; mat-flat-button color=&quot;warn&quot;&gt;Cancel&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  <p>update-dialog.component.ts</p>
  <pre><code>import { Component, OnInit, Optional, Inject } from '@angular/core';
  import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
  
  export interface MarketData {
    messageEng:string;
    messageFre:string;
    messageSwa:string;
    messagePor:string;
  }
  
  @Component({
    selector: 'app-update-dialog',
    templateUrl: './update-dialog.component.html',
    styleUrls: ['./update-dialog.component.css']
  })
  export class UpdateDialogComponent implements OnInit {
    action:string;
    local_data:any;
  
    constructor(public dialogRef: MatDialogRef&lt;UpdateDialogComponent&gt;,
      @Optional() @Inject(MAT_DIALOG_DATA) public data: MarketData) {
        console.log(data);
        this.local_data = {...data};
        this.action = this.local_data.action;
       }
  
       doAction(){
        this.dialogRef.close({event:this.action,data:this.local_data});
      }
    
      closeDialog(){
        this.dialogRef.close({event:'Cancel'});
      }
  
    ngOnInit(): void {
    }
  
  }
  </code></pre>
  <p>below is the error I am getting</p>
  <pre><code>ERROR in src/app/SOS/view-sos/view-sos.component.ts:33:35 - error TS2339: Property 'open' does not exist on type 'UpdateDialogComponent'.
  
      33     const dialogRef = this.dialog.open(UpdateDialogComponent, {
                                           ~~~~
      src/app/SOS/view-sos/view-sos.component.ts:48:39 - error TS2349: This expression is not callable.
        Type 'String' has no call signatures.
  
      48     this.dataSource = this.dataSource.filter((value,key)=&gt;{
                                               ~~~~~~
      src/app/SOS/view-sos/view-sos.component.ts:56:39 - error TS2349: This expression is not callable.
        Type 'String' has no call signatures.
  
      56     this.dataSource = this.dataSource.filter((value,key)=&gt;{
  </code></pre>
  <p>Please help me to resolve these errors.</p>
  <p>Thanks in advance</p>