Uno dei principali vantaggi nell'utilizzo di framework JavaScript front-end è la possibilità di creare delle pagine il cui contenuto sia facilmente editabile, magari semplicemente premendo un tasto che converta dei dati visualizzati come testo in una form, anche complessa, la quale ci consenta di modificare ogni singola voce.

Questa procedura, in Angular, può essere ottenuta con l'utilizzo della direttiva ngif rispetto una variabile booleana, che definiremo nel codice TypeScript del component come mostrato in questo esempio.

<form [formGroup]="formPrincipale">
  <label>
    Nome:
    <ng-container *ngIf="editMode">
        <input type="text" formControlName="firstName">
    </ng-container>
    <ng-container *ngIf="!editMode">
        <p>{{ model.firstName }}</p>
    </ng-container>
  </label>
<form>

Benchè di facile interpretazione e scrittura, essa risulta prolissa nel momento in cui i campi da modificare sono molteplici o abbiamo molte pagine da gestire. Risulta molto più facile creare un componente che permetta di effettuare questa transizione. A tal proposito possiamo utilizzare [@ngneat/edit-in-place](https://github.com/ngneat/edit-in-place).

ng add @ngneat/edit-in-place

import { EditableModule } from '@ngneat/edit-in-place';

@NgModule({
  declarations: [AppComponent],
  imports: [EditableModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

Una volta installata e configurata, possiamo utilizzare il componente della libreria per creare una label modificabile attraverso un semplice click sulla stessa.

@Component({
  template: `
    <editable (save)="salva()" (cancel)="annulla()">
      <ng-template viewMode>{{ value }}</ng-template>
      <ng-template editMode>
        <input editableOnEnter editableOnEscape [formControl]="control" />
      </ng-template>
    </editable>
  `
})
class MyComponent {
  model = 'Morgan';
  control = new FormControl(this.model);

  salva() {
    this.model = this.control.model;
  }

  annulla() {
    this.control.setValue(this.model);
  }
}

Occorrerà scrivere gli eventi che permetteranno di tenere in sincronia il modello con il controllo, la stessa casistica che avremmo dovuto coprire nel primo snippet di questo script.

Perchè quindi utilizzare questa libreria se la quantità di codice scritto è pressapoco identica? Se guardiamo l'esempio vediamo l'utilizzo di due direttive editableOnEnter editableOnEscape. Esse consentiranno di eseguire i metodi salva e annulla a seguito della pressione del tasto invio o esc. Queste, insieme a moltissime altre funzionalità, sono offerte dalla libreria out-of-the-box e ci permetteranno di coprire le più svariate casistiche ed essere produttivi fin da subito.