Angular CDK (Component Development Kit) è una libreria, creata da Google, che offre funzionalità per la realizzazione di componenti. Sebbene questa libreria sia associata a Material, essa non dipende da Material in alcun modo e quindi possiamo utilizzarla in qualuqnue scenario.
Una delle funzionalità offerte da Angular CDK è il sorting di oggetti sulla UI tramite drag&drop. Supponiamo di dover mostrare una lista di task e di dover permetere all'utente di ordinare i task con il drag&drop. Con Angular CDK quest'operazione è estremamente semplice. Per prima cosa dobbiamo installare il package @angular/cdk. Fatto questo dobbiamo importare il modulo DragDropModule nel nostro modulo.
import { DragDropModule } from '@angular/cdk/drag-drop'; @NgModule({ declarations: [ AppComponent, ], imports: [ BrowserModule, DragDropModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
Una volta fatto questo, nel nostro component creiamo una lista di task e li mettiamo in binding nel template HTML.
export class AppComponent { tasks = ['Task1', 'Task2', 'Task3', 'Task4', 'Task5']; }
<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)"> <div class="example-box" *ngFor="let task of tasks" cdkDrag>{{task}}</div> </div>
Il codice del component è di poco interesse, mentre invece il template è molto più ricco di funzionalità. Innanzitutto creiamo un div che contiene tutti gli elementi e specifichiamo che agisce come contenitore tramite la direttiva ckdDropList. Inoltre, specifichiamo che all'evento cdkDropListDropped, scatenato quando si si fa il drop di un elemento deve essere invocato il metodo drop del component passando in input un oggetto che rappresenta l'evento. All'interno del contenitore, creiamo un div per ogni task decorandolo con la direttiva cdkDrag che specifica che quest'oggetto può essere spostato dall'utente per essere ordinato.
Il metodo drop del component accetta un oggetto di tipo CdkDragDrop
drop(event: CdkDragDrop<string[]>) { moveItemInArray(this.movies, event.previousIndex, event.currentIndex); }
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Utilizzare la libreria EntityFrameworkCore.Exceptions per gestire le eccezioni di Entity Framework Core in modo tipizzato
Migrare un progetto ASP.NET Core da .NET 6 a .NET 7
Gestire gli errori di caricamento delle immagini
Caricare automaticamente i dati delle relazioni in EF Core 6
Sfruttare l'output cache di ASP.NET Core 7 con i controller
Intercettare gli eventi di creazione degli oggetti con Entity Framework 7
Health monitoring con Azure Container App
Eseguire uno scroll all'interno di una pagina Blazor
Utilizzare l'attributo autofill del CSS
Utilizzare le Promise in Javascript - seconda parte
Accedere alla console di una Azure Container App
Utilizzare il metodo reduce in JavaScript
I più letti di oggi
- Taggare la output cache in base al routing in ASP.NET Core
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- .NET Conference Italia 2022 - Milano e Online
- Silverlight su mobile: Nokia
- Visual Studio 2010 e .NET Framework 4.0: beta 2 e data di release RTM
- Anteprima del Service Pack 1 di WCF RIA Services: spunta il supporto all'italiano
- Disponibile al download la versione finale di Internet Explorer 9
- Windows Phone 'Mango' beta presto nei device ufficiali?