Angular Material impostare al controllo input matInput un valore di default quando si fa click dentro TypeScript

Quando si utilizza il Framework Angular Material, per aggiunger particolari controlli alle varie applicazioni web, può nascere l'esigenza per il controllo Input MatInput di impostare un valore di default quando prende il focus, ossia si fa click dentro.

L'evento è denominato Focus, permette di gestire lo stato attivo del controllo.

Vediamo come applicare un valore di default.

Di seguito la funzione TypeScript, che sarà richiamata dall'evento focus.

TypeScript:

setDefaultValue(): void {

     

      this.variabile = 200; // Imposta il valore predefinito

     

  }

 

Nella parte Html , nel controllo richiamiamo tale funzione, di seguito il frammento di codice html di tale dichiarazione.

Html

 

<input matInput   name="nomeControllo" type="number (focus)="setDefaultValue()" [(ngModel)]="variabile" />

 

 In questo modo quando il controllo prende il focus, al click, verrà impostato il valore 200.