0.0.7 • Published 6 months ago
ng-toasty v0.0.7
ng-toasty
This library was generated with Angular CLI version 16.1.0.
Code Implementation : Let's Program Blog
Features
- Easy to integrate
- Supports success, error, info and warning toaster messages
- Fresh Design
- Supports 6 toast position (Top Left, Top Right, Top Center, Bottom Left, Bottom Right, Bottom Center)
- Support Duration with close feature
Dependencies
Recommend to use the latest version of ng-toasty More Compatible with Latest version of Angular
ng-toasty | Angular |
---|---|
current | >= 16.x |
Install
npm i ng-toasty
Setup
- import ToastyModule in app.module.ts
import { NgModule } from '@angular/core';
import { HeaderComponent } from './component/header/header.component';
import { ToastyModule } from 'ng-toasty' // to be added
@NgModule({
declarations: [
HeaderComponent,
],
imports: [
ToastyModule // to be added
],
})
export class AppModule { }
- use the selector <ng-toasty position="ToasterPosition.TOP_RIGHT"> in app.component.html file
Use
import { Component } from '@angular/core';
import { ToasterPosition, ToastyService } from 'ng-toasty';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
ToasterPosition = ToasterPosition;
constructor(
private toast: ToastyService //to be injected
) { }
ngOnInit(): void {
}
showSuccess() {
this.toaster.success("This is success Message") //default duration is 2000ms (2secs)
}
showError() {
this.toast.danger("Something went wrong!", 4000); // will hide after 4secs
}
showInfo() {
this.toast.info("information Message!", 4000); // will hide after 4secs
}
showWarn() {
this.toast.warning("your warning message!", 4000); // will hide after 4secs
}
}
- Customize the width based on your requirement
<ng-toasty [width]="300" [position]="ToasterPosition.TOP_RIGHT"></ng-toasty>
- Updated the styles for Mobile responsive
FAQ
- Does it Support Lower version of Angular (<=v15)? NO :(
Check out article on ng-toasty Integration with Angular
License
MIT
GitHub @SashikumarYadav · Blog @LetsProgram · LinkedIn @SashikumarYadav · Medium @SashikumarYadav