Building a draggable card list
The first component of our UI library will be a list of Bulma card elements. Each card will display a title, a description, and an anchor link element. We will also be able to drag a card and change the order of the card list using the Angular CDK. Building our component will consist of the following tasks:
- Displaying card data
- Adding drag-and-drop functionality
In the following section, we will first see how to display data on the card list.
Displaying card data
Our Angular application should pass a list of cards as an input property to the component for displaying them. Let's see how we can create a draggable card component as follows:
- Execute the following Angular CLI command to create an Angular component:
ng generate component card-list --project=ui-controls --export- The preceding command will create a
card-listcomponent in theui-controlsproject of our Angular CLI workspace. The--exportoption will also export the component fromUiControlsModule...
