alert-leobonhart v0.2.0

Alert

This library was generated with Angular CLI version 10.0.14.

How to use

To use this library you need import AlertModule in your AppModule

import { AlertModule } from 'alert-leobonhart';

Then add imported module to the property imports in decorator @NgModule

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AlertModule <---
  ],
  providers: [],
  bootstrap: [AppComponent]
})

After that you can be used service AlertService to add alerts.

AlertService has only one method

add

input data is an object with interface IAlertModal

interface IAlertModal {
  text: string; // text or html
  color?: TShowAlert; // background color of alert (by default color is #323232)
  seconds?: number; // alert display time
}

/** All this colors is material colors with brigtnes 500 */
type TShowAlert = 'red' | 'yellow' | 'green' | 'blue';

example usage AlertService

...
import { AlertService } from 'alert-leobonhart';
@Component({
  selector: 'your-component',
  templateUrl: './your.component.html',
  styleUrls: ['./your.component.scss']
})
export class YourComponent implements OnInit {

  ngOnInit(): void {

    /** only text */
    this.alert.add({
      text: 'Hello World'
    });

    /** text with color */
    this.alert.add({
      text: 'Hello World',
      color: 'red'
    });

    /** text with color and display time in 5 seconds*/
    this.alert.add({
      text: 'Hello World',
      color: 'red',
      seconds: 5
    });
  }

  constructor(private alert: AlertService) {
  }

}

Config

You can config default options Injection token that can be used to specify default options

const ALERT_DEFAULT_OPTIONS: InjectionToken<AlertConfig>

or can use service AlertSettingService

example

...
import { AlertModule, AlertSettingService } from 'alert-leobonhart';

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

  constructor(private setting: AlertSettingService) {
    this.setting.config.defaultSecodns = 5;
    this.setting.config.maxShowAlerts = 3;
    this.setting.config.position = 'left-top';
  }

}

settings

type PositionAlert = 'left-bottom' | 'left-top' | 'right-bottom' | 'right-top';