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
Utilizzare politiche di resiliency con Azure Container App
Utilizzare le collection expression in C#
Utilizzare la session affinity con Azure Container Apps
Miglioramenti agli screen reader e al contrasto in Angular
Filtrare i dati di una QuickGrid in Blazor con una drop down list
Criptare la comunicazione con mTLS in Azure Container Apps
Miglioramenti nelle performance di Angular 16
Installare le Web App site extension tramite una pipeline di Azure DevOps
Disabilitare automaticamente un workflow di GitHub
Creare una custom property in GitHub
Ottimizzazione dei block template in Angular 17
Eseguire una query su SQL Azure tramite un workflow di GitHub