Angular getting error for modal: Property componentInstance does not exist on type

Question

I dont want the modal to close if ever there is validation error on backend API call in food component.

To achieve this i have used subject and component instance.

Here is my code. I have used third party libraries for modal and toast built on top of ng bootstrap.

food.component.ts:

addFood(data: any){
    this.api.request('foodItem', 'POST', data).subscribe({
        next: (response: any) => {
            if (response.message == 'Added Successfully.') {
                this._toastService.showSuccess('Food added.');
            } else {
                this._toastService.showError(response.message);
            }
        },
        complete: () => this.getFood(),
        error: (error: any) => this._toastService.showError(error.message)
    });
}

food-component.html

 <app-custom-table [tableData]="tableData" [form]="formData" [columnArray]="columnArray" (onAdd)="addFood($event)" (onEdit)="editFood($event)"></app-custom- 
 table>

custom - table.component.html

<button type = "button" class="btn btn-link"(click) = "openModal()"[disabled] = "isRowSelected"><span>Add</span></button>
<button type="button" class="btn btn-link"(click) = "openModal(selectedRow)"[disabled] = "isRowNotSelected"></i><span>Edit</span></button>

custom - table.component.ts:

openModal(rowData: any = null) {
    const config: Partial<DynamicFormComponent> = {
        form: this.form,
        data: rowData
    };

    const options: NgbModalOptions = { size: 'sm', centered: true };

    const modalRef = this.ModalService.show((DynamicFormComponent), config, options).

modalRef.componentInstance.submitSubject.subscribe((result: any) => { //here getting error Property CoponentInstance does not exist in type Observable<ModalResult<unknown>>
        if (result.Success == true && result.Data) {
            if (rowData) {
                const updatedRowData = { ...rowData, ...result.Data };
                // If rowData is provided, it's an edit operation
                this.onEdit.emit(updatedRowData);
            } else { //add
                this.onAdd.emit(result.Data);
            }
        }
    });
}

dynamic-form.html

 @Output() submitSub: Subject<any> = new Subject<any>();
 constructor(
  private activeModal: NgbActiveModal
 
  }
 onSubmit(){
    this.submitSubject.next(this.dynamicFormGroup.value)

}

  }

How to solve this?

This validation will get called only after the addFood method is called in the food component. Pls help