@craftsjs/alert

v6.1.0

Published

7 months ago

Material alert library for angular

Downloads

0High
0Medium
0Low

teogl

angular angular 2 alert material craftsjs-alert-ui

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:

| Angular | @craftsjs/alert | | ------- | --------------- | | 18 | 6.x | | 15 | 5.x | | 13 | 4.x | | 12 | 3.x | | 11 | 2.x |

npm i @craftsjs/alert --S

Compatibility

Current version: 6.1.0 (Compatible with Angular v18)

Install peer dependencies

npm i @craftsjs/core @ngx-translate/core @angular/material @angular/cdk @angular/animations --S

Configuration (i18n optional)

If you want translations, configure @ngx-translate/core in your app. Example (standalone):

The library is configured as follows:

// main.ts
import { bootstrapApplication, importProvidersFrom } from '@angular/platform-browser';
import { provideAnimations } from '@angular/platform-browser/animations';
import { provideCraftsjsAlert } from '@craftsjs/alert';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { AppComponent } from './app/app.component';

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

bootstrapApplication(AppComponent, {
  providers: [
    provideAnimations(),
    provideCraftsjsAlert(),
    importProvidersFrom(
      HttpClientModule,
      TranslateModule.forRoot({
        loader: { provide: TranslateLoader, useFactory: createTranslateLoader, deps: [HttpClient] }
      })
    )
  ]
});

How to use (standalone service)

Inject AlertService anywhere and call the helpers. The dialog component is standalone and provided by the service.

import { Component } from '@angular/core';
import { AlertService } from '@craftsjs/alert';

@Component({
  selector: 'app-alert-demo',
  standalone: true,
  template: `<button type="button" mat-raised-button color="primary" (click)="openDialog()">Alert warning</button>`
})
export class AlertDemoComponent {
  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');
  }
}

// Confirmation example
const dialog = this._alertService.showConfirmation('Confirmation', 'Are you sure delete alert?');
dialog.beforeClose().subscribe((result) => {
  if (!result) { return; }
  switch (result.result) {
    case 'ok':
      console.log('ok');
      break;
    case 'cancel':
      console.log('cancel');
      break;
  }
});

    <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();
body.theme-default{
    @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 and ensure Angular Material animations are provided (e.g., provideAnimations() in main.ts).

NgModule (compatibility)

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AlertModule } from '@craftsjs/alert';

@NgModule({
  imports: [
    BrowserAnimationsModule,
    AlertModule.forRoot()
  ]
})
export class AppModule {}

<body class="theme-default"></body>

Published

Vulnerabilities

Links

Maintainers

Keywords