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.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Eseguire attività con Azure Container Jobs
Aggiungere interattività lato server in Blazor 8
Creare form tipizzati con Angular
Miglioramenti nelle performance di Angular 16
Sfruttare al massimo i topic space di Event Grid MQTT
Ottimizzazione dei block template in Angular 17
Assegnare un valore di default a un parametro di una lambda in C#
Eseguire una query su SQL Azure tramite un workflow di GitHub
Gestire undefined e partial nelle reactive forms di Angular
Mascherare l'output di un valore all'interno dei log di un workflow di GitHub
Eseguire query manipolando le liste contenute in un oggetto mappato verso una colonna JSON
Implementare l'infinite scroll con QuickGrid in Blazor Server