loading

Introduction

As an Angular frontend developer passionate about technology, I recently built my first Angular package—a simple and customizable loading spinner for Angular 19 applications. In this blog post, I'll share my journey, explain how I built it, and show you how to use it in your projects.

Why I Built This Package

Loading animations improve user experience by visually indicating background processes. While Angular provides various third-party loaders, I wanted something lightweight, customizable, and easy to integrate into Angular 19 applications. So, I decided to create my own and publish it as an npm package.

Creating the Angular Library

To create the package, I followed these steps:

Generate a new Angular library

 ng new angular-loading-spinner --create-application=false  ##Workspace
 cd angular-loading-spinner  ##change directory
 ng generate library ng-loading-spinners

Develop the spinner component
- Created a simple LoadingSpinnerComponent with inputs for size, color, and type.
- Used SCSS for styling.
- Added module exports for easy integration.

Build and prepare for publishing

 ng build loading-spinner ##building the library

Publishing to npm

Once the package was ready, I published it to npm:

Login to npm (if not already logged in):

 npm login  ##login into npm your account

Publish the package:

 npm publish dist/loading-spinner --access public

After a few minutes, the package was live on npm! 🎉

Using the Package in an Angular Project

To use my loading spinner in an Angular 19 app:

Install the package:
```
 npm i ng-loading-spinners
```
Import and use it:

so this library can be used as a standalone component your applications

 import { SpinnersComponent } from 'ng-loading-spinners'; 

  imports: [ SpinnersComponent]  ##added the spinnersComponent to you import array in your component

Use in a component template:

 <ng-loader-spinners [variant]="'default'" [size]="'md'" [color]="'primary'" [text]="'Loading...'"></ng-loader-spinners>

Find Package

click here for package

Challenges and Lessons Learned

Building and publishing my first Angular package taught me:

The importance of proper module structure for library development.
How to configure package.json for Angular libraries.
The process of publishing to npm and making a package reusable.

Conclusion and Future Plans

Publishing my first Angular package was an exciting experience, and I look forward to improving it with more customization options. If you find it useful, feel free to try it out and provide feedback!

Building My First Angular Package: A Loading Spinner for Angular 19

Table of contents