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
Workflow di continuous deployment tramite pull request label in GitHub
Potenziare Azure AI Search con la ricerca vettoriale
Utilizzare la session affinity con Azure Container Apps
Gestire undefined e partial nelle reactive forms di Angular
Inizializzare i container in Azure Container Apps
Evitare la command injection in un workflow di GitHub
Gestire errori funzionali tramite exception in ASP.NET Core Web API
Creazione di plugin per Tailwind CSS: espandere le funzionalità del framework dinamicamente
Supportare il sorting di dati tabellari in Blazor con QuickGrid
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript
Gestione degli environment per il deploy con un workflow di GitHub
Definire lo stile CSS in base alle dimensioni del container