Create Angular NPM Package and Publish

Are you interested to create and publish NPM packages/libraries to enrich Angular functionality? Take a quick look at this post. You can share solutions with other developers. A simple package can solve many problems and resolve the issue quickly. If you are working with multiple applications? Package approach will help you to solve the components problems easily. In this post I have created the Bootstrap confirm functionality package with control options and published it on NPM repository for global use.

NPM Package - NgxBootstrapConfirm

Ngx Bootstrap ConfirmDownload this package on NPM

GitHub Source

Ngx Bootstrap Confirm sourceDownload this project on Github

Getting started
Use the Angular CLI to generate a new library skeleton with the following command. Using --create-application=false avoiding to create a regulate application.

$ng new ngx-bootstrap-confirm --create-application=false

Project Directory
Change the directory.

$cd ngx-bootstrap-confirm

Generate a library
Here my library name is ngx-bootstrap-confirm. Try to use unique name for better NPM search result.

ng generate library ngx-bootstrap-confirm

Bootstrap
We need Bootstrap for parent source.

npm install ngx-bootstrap

Library Package
You have to include the peerDependencies in library package file.
projects/ngx-bootstrap-confirm/package.json

{"name": "ngx-bootstrap-confirm",
"version": "3.0.1",
"peerDependencies": {
"@angular/common": "^9.1.3",
"@angular/core": "^9.1.3",
"tslib": "^1.10.0",
"ngx-bootstrap": "^5.6.1"
}
}

Project Library Structure

ngx-bootstrap-confirm.component.ts
Created a component for Bootstrap confirm. Here I have provided options for confirm message title and buttons names. Modified confirm and decline method default responses.

import { Component } from '@angular/core';import { BsModalRef } from 'ngx-bootstrap/modal';
@Component({
selector: 'lib-ngx-bootstrap-confirm',
template:`
<div class="confirm modal-body">
<div class="content" [innerHTML]="title"></div>
<div class="buttons">
<button type="button" class="btn btn-success" (click)="confirm()" [innerHTML]="confirmLabel"></button>
<button type="button" class="btn btn-danger" (click)="decline()" [innerHTML]="declineLabel"></button>
</div>
</div>
`
})
export class NgxBootstrapConfirmComponent {
title: string;
confirmLabel: string;
declineLabel: string;
constructor(public bsModalRef: BsModalRef) {}
confirm() {
if (this.bsModalRef.content.callback != null) {
this.bsModalRef.content.callback(true);
this.bsModalRef.hide();
}
}
decline() {
if (this.bsModalRef.content.callback != null) {
this.bsModalRef.content.callback(false);
this.bsModalRef.hide();
}
}
}

ngx-bootstrap-confirm.service.ts
Create a service for showing confirm dialog modal. This method will resolve the promise based on the user action.

import { Injectable } from '@angular/core';import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
import { NgxBootstrapConfirmComponent } from './ngx-bootstrap-confirm.component';
@Injectable()
export class NgxBootstrapConfirmService {
modalRef: BsModalRef;
constructor(private modalService: BsModalService) {}
confirm(options: any): Promise<any> {
return new Promise((resolve, reject) => {
this.modalRef = this.modalService.show(NgxBootstrapConfirmComponent, {
initialState: {
title: options.title,
confirmLabel: options.confirmLabel,
declineLabel: options.declineLabel,
callback: (result: boolean) => {
resolve(result);
},
},
});
});
}
}

ngx-bootstrap-confirm.module.ts
Import and export the confirm component and include the service for external use. This module is key import for other projects to access this methods.

import { NgModule } from '@angular/core';import { ModalModule } from 'ngx-bootstrap/modal';
import { NgxBootstrapConfirmComponent } from './ngx-bootstrap-confirm.component';
import { NgxBootstrapConfirmService } from './ngx-bootstrap-confirm.service';
@NgModule({
declarations: [NgxBootstrapConfirmComponent],
imports: [ModalModule.forRoot()],
exports: [NgxBootstrapConfirmComponent],
providers: [NgxBootstrapConfirmService],
})
export class NgxBootstrapConfirmModule {}

NPM Package and Publish

NPM Repository Authentication
Create an account for npmjs.com/. Use the following command to authenticate.

$npm login

Production Build
Now build the package and change the package.json version number for every build.

$ng build ngx-bootstrap-confirm --prod

NPM Publish
Go to the distribution(dist) package folder and execute npm publish command.

$cd dist/ngx-bootstrap-confirm

$npm publish

Find the package in your profile page.

How to use NgxBootstrapConfirm?

NPM 6 Installation
For NPM version 6 need a peerDependency.

npm install --save ngx-bootstrap ngx-bootstrap-confirm

NPM 7
NPM version 7 will automatically install the peerDependencies packages.

npm install --save ngx-bootstrap-confirm

Yarn install

yarn add ngx-bootstrap ngx-bootstrap-confirm

app.module.ts
Angular project import the NgxBootstrapConfirmMoodule to access the library methods.

import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';
import { NgxBootstrapConfirmModule} from 'ngx-bootstrap-confirm';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
NgxBootstrapConfirmModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts
Import the NgxBootstrapConfirmService to display the confirm dialog modal with options objects.

import { Component } from '@angular/core';import { NgxBootstrapConfirmService } from 'ngx-bootstrap-confirm';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
result: string;
constructor(private ngxBootstrapConfirmServiceShare This
							
									Previous Post
								
									Next Post
								
0 Comments

Leave a Reply

Coding-Help-Tech

PHP Cookie Set, Get And Delete Example

How to cookie set, retrieve and delete in php. In this tutorial, you w...

01-10-2021
PHP Signature Pad using Jquery Ajax Example

Signature pad save image in php. In this tutorial, you will learn how ...

29-09-2021
How to Create And Uses Laravel Macro Example

Macro is the powerful feature of the laravel framework. Macros allow y...

15-10-2020

Create Angular NPM Package and Publish

Share This

Previous Post

Next Post

PHP Cookie Set, Get And Delete Example

PHP Signature Pad using Jquery Ajax Example

How to Create And Uses Laravel Macro Example