Building an Angular Component Library

Steps on how to create a component library in Angular, using the Chimoney library as a use case.

Building an Angular Component Library: The Chimoney Use Case

Creating a reusable component library in Angular can streamline your development process, allowing you to build consistent user interfaces across multiple applications. In this blog post, we will walk through the steps to create a component library using our Chimoney library as an example.

Step 1: Setting Up the Angular Library

First, we need to set up our Angular library. You can create a new library using the Angular CLI:

ng generate library ngx-chimoney-airtime-payouts

This command will create a new library named ngx-chimoney-airtime-payouts in your Angular workspace.

Structuring the Library

Your library will have the following structure:


projects/
└── ngx-chimoney-airtime-payouts/
├── src/
│ ├── lib/
│ │ ├── components/
│ │ │ ├── airtime/
│ │ │ ├── bank/
│ │ │ └── payouts/
│ │ ├── ngx-chimoney-airtime-payouts.component.ts
│ │ └── ngx-chimoney-airtime-payouts.service.ts
│ └── public-api.ts

In the public-api.ts file, you can export your components and services:

/*
* Public API Surface of ngx-chimoney-airtime-payouts
*/

export * from ‘./lib/ngx-chimoney-airtime-payouts.service’;
export * from ‘./lib/ngx-chimoney-airtime-payouts.component’;

// Components
export * from ‘./lib/components/airtime/airtime.component’;
export * from ‘./lib/components/bank/bank.component’;
export * from ‘./lib/components/payouts/payouts.component’;

Step 2: Building the Library

After implementing your components, it’s time to build the library. Use the following command:

ng build ngx-chimoney-airtime-payouts

This command generates a dist folder containing the compiled library.

Step 3: Packing the Library
To use your library locally without publishing it to npm, you can create a package file. Navigate to the dist folder of your library:

cd dist/ngx-chimoney-airtime-payouts

Then, run:

npm pack

This command will create a .tgz file (e.g., ngx-chimoney-airtime-payouts-0.0.1.tgz) in the current directory.

Step 4: Installing the Library Locally

Copy the generated .tgz file to the root directory of the application where you want to use it. Then, run:

npm install ngx-chimoney-airtime-payouts-0.0.1.tgz

This command installs your library locally, allowing you to use it in your application.

Step 5: Using the Library in Your Application

Now that your library is installed, you can use its components in your application. First, import the required modules in your application:

import { FormsModule } from ‘@angular/forms’;
import { Component } from ‘@angular/core’;
import { RouterOutlet } from ‘@angular/router’;
import { PayoutsModule } from ‘ngx-chimoney-airtime-payouts’;
import { PayoutsComponent } from ‘ngx-chimoney-airtime-payouts’;
import { BankComponent } from ‘ngx-chimoney-airtime-payouts’;
import { AirtimeComponent } from ‘ngx-chimoney-airtime-payouts’;

@Component({
selector: ‘app-root’,
standalone: true,
imports: [
RouterOutlet,
PayoutsModule,
PayoutsComponent,
BankComponent,
AirtimeComponent,
FormsModule,
],
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
title = ‘payouts-sample’;
}

In your template, you can now use the components as follows:

<payouts-component></payouts-component>
<bank-component></bank-component>
<airtime-component></airtime-component>

*Step 6: Publishing the Library
*
If you decide to share your library with the world, you can publish it to npm. Make sure you have an account on npm and are logged in. Use the following command to publish:

npm publish dist/ngx-chimoney-airtime-payouts

This command will make your library available for installation via npm, allowing others to use it in their Angular applications.

Conclusion

Creating a component library in Angular not only promotes reusability but also helps maintain consistency across your projects. By following the steps outlined in this blog post, you can easily build, pack, and publish your Angular component library, like our Chimoney library. Happy coding!