@addapptables/alert

Material alert library for angular

Usage no npm install needed!

<script type="module">
  import addapptablesAlert from 'https://cdn.skypack.dev/@addapptables/alert';
</script>

README

ADDAPPTABLES alert

ADDAPPTABLES 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 @addapptables/alert
8 2.x
7 1.x 
npm i @addapptables/alert --S

Install peer dependencies

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

Configuration

  • 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');
}
@NgModule({
    imports: [
        HttpClientModule,
        TranslateModule.forRoot({
            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 '@addapptables/alert';
@NgModule({
  imports: [
      BrowserModule,
      BrowserAnimationsModule,
      AlertModule.forRoot()
  ]
})
export class AppModule { }

@Component()
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');
  }

  openDialodgConfirmation(){
    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>
  • Finaly, it is important to import the styles to the application
@import '~@addapptables/alert/addapptables-alert.theme';
@import '~@angular/material/theming';

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

@include mat-core();
body.theme-default{
    @include angular-material-theme($addapptable-app-theme);
    @include addapptable-alert($addapptable-theme-variables);
}
  • Do not forget to put the theme-default class in the html body
<body class="theme-default"></body>