How to enable/disable table column text on click

I have a running Angular 9 application and I am using custom table to display the data. On clicking of column data, it opens a custom modal dialog. Multiple dialog modal can be opened at once.

Whenever any modal opens, I am creating unique id and passing it to the service to add that id in the map to keep a reference of the opened dialogs. Also, I am passing the same id when user wants to close the particular opened dialog modal.

dialog.service.ts

private map = new Map<string, ComponentRef<CustomDialogComponent>>();

open(component: Type<any>, id) {    
        this.map.set(`modal-${id}`, dialogComponentRef);
    }

close(refId: string) {
        if (this.map.has(refId)) {
            const componentRef = this.map.get(refId);
            this.appRef.detachView(componentRef.hostView);
            componentRef.instance.close();
            this.map.delete(refId);
        }
    }

chart.component.ts

closeModal() {
        this.dialogService.close(this.id);
    }

I want to achieve a requirement where I need to disable the column data text(eg: https://url.com) once the modal dialog is opened on the click, and enable the column data text once the modal is closed.
Please help me on this.

<a href="#" id="myid" [class.disabled]="!mymap.get('myid')">hahahaha</a>

a.disabled {
  pointer-events: none;
  cursor: not-allowed; 
  text-decoration: none;
  color: black; /* Set to your desired text color */
}