# ng-toasty

> This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.1.0.

Latest version **0.0.7** (published 2023-11-04) · 0 weekly downloads

## Install

```sh
npm install ng-toasty
pnpm add ng-toasty
yarn add ng-toasty
bun add ng-toasty
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.7 |
| Published | 2023-11-04 |
| First published | 2023-11-04 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 84.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | yshashi30 |

## Links

- npm: https://www.npmjs.com/package/ng-toasty
- npm.io page: https://npm.io/package/ng-toasty

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.3.0

## Recent versions

- 0.0.7 (latest) — 2023-11-04
- 0.0.6 — 2023-11-04
- 0.0.5 — 2023-11-04
- 0.0.4 — 2023-11-04
- 0.0.3 — 2023-11-04
- 0.0.2 — 2023-11-04
- 0.0.1 — 2023-11-04

## README

# ng-toasty

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.1.0.

Code Implementation : [Let's Program Blog](https://letsprogram.in/blog/6546682483f73d2bbf299ec9)

## 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
```typescript
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"></ng-toasty> in app.component.html file
## Use

```typescript
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
```html
    <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)? <br>
NO :(

Check out article on
[ng-toasty Integration with Angular](https://letsprogram.in/blog/6546682483f73d2bbf299ec9)

## License

MIT

---

> GitHub [@SashikumarYadav](https://github.com/yshashi) &nbsp;&middot;&nbsp;
> Blog [@LetsProgram](https://letsprogram.in/) &nbsp;&middot;&nbsp;
> LinkedIn [@SashikumarYadav](https://www.linkedin.com/in/sashikumar-yadav/) &nbsp;&middot;&nbsp;
> Medium [@SashikumarYadav](https://medium.com/@yshashi30)

---
_Source: https://npm.io/package/ng-toasty · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._