Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including @craftsjs/alert with all npm packages installed. Try it out:

require("@angular/common/package.json"); // @angular/common is a peer dependency. require("@angular/core/package.json"); // @angular/core is a peer dependency. require("@angular/material/package.json"); // @angular/material is a peer dependency. require("@angular/cdk/package.json"); // @angular/cdk is a peer dependency. require("@angular/animations/package.json"); // @angular/animations is a peer dependency. require("angular-l10n/package.json"); // angular-l10n is a peer dependency. require("@craftsjs/core/package.json"); // @craftsjs/core is a peer dependency. var alert = require("@craftsjs/alert")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@craftsjs/alert v1.0.0

Material alert library for angular

craftsjs alert

craftsjs alert is a library for angular

See demo

Example code

Getting Started

To get started, let's install the package through npm:

Choose the version corresponding to your Angular version:

npm i @craftsjs/alert --S

Install peer dependencies

npm i
@angular/animations --S


  • First, you have to configure the library @ngx-translate/core to have the translation into the alert

The library is configured as follows:

import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
export function createTranslateLoader(http: HttpClient) {
    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
    imports: [
            loader: {
                provide: TranslateLoader,
                useFactory: (createTranslateLoader),
                deps: [HttpClient]
export class AppModule { }

How to use

  • Import the module AlertModule into the AppModule
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AlertModule } from '@craftsjs/alert';
  imports: [
export class AppModule { }
export class AlertComponent {

  constructor(private _alertService: AlertService) { }

  openDialog() {
    this._alertService.showSimple('Alert', 'Simple alert');
    // this._alertService.showSuccess('Success', 'Saved successfully');
    // this._alertService.showWarning('Warn', 'Warning');
    // this._alertService.showInfo('Info', 'Information');
    // this._alertService.showError('Error', 'Error');

    const dialog = this._alertService.showConfirmation('Confirmation', 'Are you sure delete alert?');
    dialog.beforeClose().subscribe((result) => {
      if (!result) { return; }
      switch (result.result) {
        case 'ok':
        case 'cancel':
    <button type="button" mat-raised-button color="primary" (click)="openDialog()">Alert warning</button>
  • Finally, it is important to import the styles to the application
@import '~@craftsjs/alert/craftsjs-alert.theme';
@import '~@angular/material/theming';

$craftsjs-app-primary: mat-palette($mat-teal, 800);
$craftsjs-app-accent:  mat-palette($mat-pink, 800, A100, 100);
$craftsjs-app-warn: mat-palette($mat-red);
$craftsjs-app-theme: mat-light-theme($craftsjs-app-primary, $craftsjs-app-accent, $craftsjs-app-warn);
$craftsjs-theme-variables: (
    color-info: #20a9d2,
    color-success: #5cb85c,
    color-danger: #d43934,
    color-warning: #e09d3d

@include mat-core();
    @include angular-material-theme($craftsjs-app-theme);
    @include alert($craftsjs-theme-variables);
  • Don't forget to put the theme-default class in the html body
<body class="theme-default"></body>
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free