How to set disabled mat-input to enabled when I click on it?

I used this way, in my opion is better way

<input matInput placeholder="Email" [ngModel]="franchise.user_email" formControlName="email" readonly>

You can create a state variable, and assign it to input disabled attribute on click then on mouseout events

<form class="example-form">
  <mat-form-field class="example-full-width" (click)="disabled=false" (mouseout)="disabled=true">
    <input matInput placeholder="Favorite food" value="Sushi"
          [attr.disabled]="disabled?'':null">
  </mat-form-field>

  <mat-form-field class="example-full-width">
    <textarea matInput placeholder="Leave a comment"></textarea>
  </mat-form-field>
</form>

If you are using a FormGroup, then you should not disable the form in the HTML Template. It will not work if you try to disable in HTML together with FormControl. Instead, it should be done within the FormGroup. Try this:

  template: `
    <mat-form-field [formGroup]="form">
      <input matInput placeholder='Name' [formControlName]="formControlName">
    </mat-form-field>
  `

and:

ngOnInit() {
    this.form = this.fb.group({
        name: new FormControl({ value: '', disabled: this.disabled })
    });
}

Also...not a big deal but..you should really be doing:

public form: FormGroup;

instead of:

public form: any;

Don't forget the import as well

import { FormGroup, FormControl } from '@angular/forms';

Btw, the name inside of the form group declaration should match whatever you have set in the HTML. So:

<input formControlName="myInputName">

and

this.form = this.fb.group({
    myInputName....
});

This works for me...

<mat-form-field class="example-full-width">
     <textarea matInput cdkTextareaAutosize placeholder="Event Description" matTooltip="double-click to enable editing"
     [(ngModel)]="textareaSample" name='desc' readonly [readOnly]="readonly" (dblclick)="toggleEdit()"  ></textarea>

and in the component...

 textareaSample = "Tack Spanish Main hulk deadlights man-of-war transom Jake a caulk belay.";
 readonly: boolean;

  ngOnInit(): void {
    this.readonly = true;
  }
  toggleEdit(): void {
    this.readonly = !this.readonly;
  }

and the CSS...

textarea { font-size: 1.2em; padding:0px;}

textarea[readonly]{ background-color: transparent;}
textarea { background-color: #eee;}

textarea[readonly]:hover {  cursor: pointer;  cursor: default; background-color: transparent }
textarea:hover { cursor: auto; background-color: #eee;}

This example is using Angular Material controls. Just double click on the input to enable editing. The same principles should work with other controls too, like PrimeNG and similar.