@ngartifex/alert NPM

ngartifex alert

ngartifex alert is a library for angular

Getting Started

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

Choose the version corresponding to your Angular version:

Angular	@ngartifex/alert
13	4.x
12	3.x
11	2.x
10	1.x

npm i @ngartifex/alert --S

Install peer dependencies

npm i
@ngartifex/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 '@ngartifex/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>

Finally, it is important to import the styles to the application

@import '~@ngartifex/alert/ngartifex-alert.theme';
@import '~@angular/material/theming';

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

@include mat-core();
body.theme-default{
    @include angular-material-theme($ngartifex-app-theme);
    @include alert($ngartifex-theme-variables);
}