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:

1. Execute the following Angular CLI command to create an Angular component:

ng generate component card-list --project=ui-controls --export

1. The preceding command will create a card-list component in the ui-controls project of our Angular CLI workspace. The --export option will also export the component from UiControlsModule...