toast-alert-lib v1.0.0

Angular Toast Alert Library

This library will help you on alert and toast messages.

You just need to pass the valuable data. Then data automatically print on the template.

Pre-Requests

Use the package manager

npm install bulma
npm install fortawesome/fontawesome-free

Add bulma in angular.ts file.

 "styles": [
              "src/styles.scss",
              "node_modules/bulma/css/bulma.css",
              "node_modules/@fortawesome/fontawesome-free/css/all.css"
            ],

How to install the library

npm install toast-alert-lib

How to use this library

Add Module in your project

open app.module.ts

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ToastAlertLibModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Add two selectors in you project

open app.component.html

<lib-toast-notify></lib-toast-notify>
<lib-alert-notify-bottom></lib-alert-notify-bottom>

Now use the alert and toast message where required

Basic Code

• Step 1st

constructor(private notify: ToastNotifyService, private alertService: AlertNotifyService) {
}

for notifications

 addValue() {
    this.notify.success('Success', 'test message');
    this.notify.warning('Warning', 'Valid information not passed');
    this.notify.error('Error', 'Record not saved');
    this.notify.information('Information', 'You are a good person');
    this.notify.question('Question', 'are you fine?');
  }

for Loader Notification

 loadingVal = "1";
  loading() {
    this.notify.loading(this.loadingVal, undefined, 'Saving your records');
  }
  stopLoading() {
    this.notify.stopLoading(this.loadingVal);
  }

  //Stop Loading With Success or Error
  success() {
    this.notify.success('Success', 'Record saved successfully', this.loadingVal, 'https://www.voicesofyouth.org/sites/voy/files/images/2020-07/success.jpg');
  }
  error() {
    this.notify.error('Error', 'Record not saved', this.loadingVal, 'https://www.voicesofyouth.org/sites/voy/files/images/2020-07/success.jpg');
  }

for Alert Confirmation messages

alertMess() {

this.alertService.sendAlert('Danger Message', 'This is a danger message', [{ name: 'Ok', type: ButtonColorEnum.Information }, { name: 'Close', type: ButtonColorEnum.Other }]);
this.alertService.notificationEvent.pipe(take(1)).subscribe(res => {
      alert(res.name);
    });
}

For more information

Abhishek Raheja

@raheja.abhi@hotmail.com