You're reading from Angular Projects Build modern web apps by exploring Angular 12 with 10 different projects and cutting-edge technologies

Product type Paperback

Published in Jul 2021

Publisher Packt

ISBN-13 9781800205260

Length 344 pages

Edition 2nd Edition

Languages

JavaScript

Tools

Angular

Concepts

Front End Web Development

Author (1):

Aristeidis Bampakos

View More author details

Table of Contents (12) Chapters

Preface

1. Chapter 1: Creating Your First Web Application in Angular

2. Chapter 2: Building an SPA Application with Scully and Angular Router FREE CHAPTER

3. Chapter 3: Building an Issue Tracking System using Reactive Forms

4. Chapter 4: Building a PWA Weather Application Using Angular Service Worker

5. Chapter 5: Building a WYSIWYG Editor for the Desktop using Electron

6. Chapter 6: Building a Mobile Photo Geotagging Application Using Capacitor and 3D Maps

7. Chapter 7: Building an SSR Application for a GitHub Portfolio Using Angular

8. Chapter 8: Building an Enterprise Portal Using Nx Monorepo Tools and NgRx

9. Chapter 9: Building a Component UI Library Using Angular CLI and Angular CDK

10. Chapter 10: Customizing Angular CLI Commands Using Schematics

11. Other Books You May Enjoy

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-list component in the ui-controls project of our Angular CLI workspace. The --export option will also export...