ngx-bulma-alert

Demo

DEMO : https://ngx-bulma-alert.stackblitz.io

Install

npm i ngx-bulma-alert --save

bulma package is a required dependency for the default alert styles

npm i bulma --save

Setup

Step 1: Add NgxBulmaAlertModule to app NgModule

import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
import { NgxBulmaAlertModule } from "ngx-bulma-alert";

@NgModule({
  imports: [NgxBulmaAlertModule], // add a module
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Step 2: Add default bulma styles

• If you are using sass you can directly import it to your styles.scss.

@import 'bulma/css/bulma.min.css';

• If you are using angular-cli you can add it to your angular.json

"styles": [
  "node_modules/bulma/css/bulma.min.css" // add here
  "styles.scss",
]

Use

import { Component } from "@angular/core";
import { NgxBulmaAlertService } from "ngx-bulma-alert";

@Component({
  selector: "my-app",
  // IMPORTANT : Add a selector to the root component
  template: `<ngx-bulma-alert></ngx-bulma-alert>`,
})
export class AppComponent {
  // Inject NgxBulmaAlertService
  constructor(private alertService: NgxBulmaAlertService) {}

  openAlert() {
    this.alertService
      .createAlert({
        title: "Deleted?",
        content: "This operation will delete the Item permanantly.",
        confirmText: "Delete",
        cancelText: "Cancel",
        type: "danger",
      })
      .onAlertDismiss.subscribe((confirmed: boolean) => {
        if (confirmed) {
          // Proceed with an operation after User confirmation
        }
      });
  }
}

Options

Options	Type	Default	Description
type	string 'success'|'info'|'warning'|'danger'	'info'	Type of the alert to show
title	string	''	Title of the alert box
content	string	''	Body of the alert box
confirmText	string	Confirm button will be hidden if not passed	Text of Confirm button
cancelText	string	Cancel button will be hidden if not passed	Text of Cancel button

License

MIT

---

GitHub @ParthModi9494  ·  Twitter @Parth_R_Modi  ·  Website @parthmodi.in