Project overview

In this project, we will build a component UI library for our Angular projects. Initially, we will use the Angular CLI to scaffold a new Angular workspace for our library. We will then use the Angular CDK and the Bulma CSS framework to create the following components:

• A list of cards that we can rearrange using drag-and-drop features
• A button that will allow us to copy arbitrary content to the clipboard

We will learn to deploy the library into a package registry such as npm. Finally, we will convert one of our components into an Angular element for sharing it with non-Angular applications using the ngx-build-plus library. The following diagram describes an architectural overview of the project:

Figure 9.1 – Project architecture

Build time: 1½ hours

Getting started

The following prerequisites and software tools are required to complete this project:

• Angular CLI: A CLI for Angular that you can find at https://angular.io/cli.
• GitHub material: The related code for this chapter can be found in the Chapter09 folder at https://github.com/PacktPublishing/Angular-Projects-Third-Edition.

Creating a library with the Angular CLI

Before we can start working with Angular libraries using the Angular CLI, we need to create an Angular CLI workspace. The Angular CLI workspace will contain our Angular library and an Angular application for testing the library.Use the following command to generate a new Angular CLI workspace:

ng new my-components --defaults

The preceding command will create a new Angular CLI workspace that contains an Angular application named my-components. Navigate to the my-components folder and execute the following command to generate a new Angular library:

ng generate library ui-controls

The preceding command will create a ui-controls library inside the projects folder of the workspace. It will contain various files and folders similar to those when creating an Angular application, including the following:

• src\lib: This contains the source code of the library, such as modules, components, and services.
• src\public-api.ts: This exports artifacts from the...

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...

Interacting with the clipboard

The Angular CDK library contains a collection of Angular artifacts that we can use to interact with the system clipboard. Specifically, it includes a directive for copying data to the clipboard and an event binding for taking additional action when the content has been copied. Let's see how we can integrate both in our component library, as follows:

1. Execute the following command of the Angular CLI to create a new Angular component in the library:

ng generate component copy-button --project=ui-controls --export

1. Export the newly generated component from the public-api.ts file as follows:

export * from './lib/copy-button/copy-button.component';

1. Open the ui-controls.module.ts file and import ClipboardModule from the @angular/cdk/clipboard namespace, like this:

import { ClipboardModule } from '@angular/cdk/clipboard';

1. Add the ClipboardModule class to the imports array of the @NgModule decorator like this:

@NgModule({
 ...

Publishing an Angular library to npm

We have already seen how to build an Angular library and consume it in an Angular application when both exist in the same repository or organization. However, there are cases where you may want to make your library available to Angular projects outside your infrastructure via a public package registry such as npm. A usual case is when you want to make your library open source so that other members in the development community can benefit from this. Let's see how to publish our ui-controls library to npm, as follows:

1. If you do not have an npm account, navigate to https://www.npmjs.com/signup to create one.

2. Open the package.json file that exists in the projects\ui-controls folder of the Angular CLI workspace and set the value of the version property to 1.0.0.

   It is considered a good practice to follow semantic versioning in your library and publish it as version 1.0.0 for the first time. Angular also follows semantic versioning, and you can learn...

Using components as Angular elements

We have already learned how to use the Angular CLI for creating an Angular library. We also saw how to publish our library to the npm registry so that other Angular projects can use it and benefit from it. In this section, we will go the extra mile and learn how to build our Angular library to be used in non-Angular environments.As we have already pointed out, the Angular framework is a cross-platform JavaScript framework in many ways. It can run on the server using Angular Universal and on mobile platforms. It can also run on a native desktop environment. In addition to those platforms, it can even run on web applications that are not built with Angular, using Angular elements.Let's see how we can convert our clipboard component to an Angular element, as follows:

1. Execute the following Angular CLI command to generate a new Angular application in our workspace:

ng generate application ui-elements --defaults

1. The preceding command will generate...

Summary

In this project, we built a component UI library that we can use in our Angular applications. Initially, we learned how to use the Angular CLI to create an Angular library. We scaffolded a new Angular CLI workspace that contained our Angular library, along with an Angular application for testing it.We then used the Angular CDK with the Bulma CSS framework to build the UI components of our library. We created a card list that can be re-ordered using drag-and-drop features and a button for copying content to the clipboard.We also saw how to publish our library in the npm registry to use it in other Angular projects. Finally, we converted it into custom elements using Angular elements for distribution to non-Angular applications.In the next project, which will be the final project in the book, we will learn how to customize the Angular CLI to create our generation schematics.

Practice questions

Let's take a look at a few practice questions:

1. How do we generate a new Angular library using the Angular CLI?
2. How do we make an Angular artifact of our library public?
3. Which CSS selector do we use for targeting the host element of an Angular component?
4. How do we mark an element as draggable in the Angular CDK?
5. Which method do we use for re-ordering a draggable list of items?
6. Which Angular CDK directive is responsible for passing data to the clipboard?
7. How do we create a single bundle using the ngx-build-plus library?
8. How do we pass data to and from an Angular element?

Further reading

Here are some links to build upon what we learned in the chapter:

• Angular libraries overview: https://angular.io/guide/libraries
• Creating Angular libraries: https://angular.io/guide/creating-libraries
• Bulma CSS: https://bulma.io
• Angular CDK: https://material.angular.io/cdk/categories
• Drag-and-drop module: https://material.angular.io/cdk/drag-drop/overview
• Clipboard module: https://material.angular.io/cdk/clipboard/overview
• Angular elements overview: https://angular.io/guide/elements
• ngx-build-plus: https://www.npmjs.com/package/ngx-build-plus

Practice questions

Let’s take a look at a few practice questions:

1. How do we generate a new Angular library using the Angular CLI?
2. How do we make an Angular artifact of our library public?
3. Which CSS selector do we use to target the host element of an Angular component?
4. How do we mark an element as draggable in the Angular CDK?
5. Which method do we use to re-order a draggable list of items?
6. Which Angular CDK directive is responsible for passing data to the clipboard?
7. How do we create a single bundle using the ngx-build-plus library?
8. How do we pass data to and from an Angular element?

Further reading

Here are some links to build upon what we learned in the chapter:

• Angular libraries overview: https://angular.io/guide/libraries
• Creating Angular libraries: https://angular.io/guide/creating-libraries
• Bulma CSS: https://bulma.io
• Angular CDK: https://material.angular.io/cdk/categories
• Drag-and-drop module: https://material.angular.io/cdk/drag-drop/overview
• Clipboard module: https://material.angular.io/cdk/clipboard/overview
• Angular elements overview: https://angular.io/guide/elements
• ngx-build-plus: https://www.npmjs.com/package/ngx-build-plus

Join our community on Discord

Join our community’s Discord space for discussions with the author and other readers:

https://packt.link/AngularProjects3e