ngx-notification
================

Angular Library to show all types of notifications in a Toast Notification format. 
It is very simple to setup and can be used for all types of notifications you want to show.

Parameters are: ```Message, Theme and Position.```

You can also use your own custom css by setting the Theme parameter to 'none'.


Tested on Angular 6+

Install
=======

```
npm install ngx-notification --save
```


Usage Example:
==============

** Step 1: (After Installing) **

Add the Notification Component to your app.module.ts

```
import { NgxNotificationComponent } from 'ngx-notification';
```

and add:

```
NgxNotificationComponent
```

to the declarations part of the module.

You app.module might look like this:

```
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { NgxNotificationComponent } from 'ngx-notification';

@NgModule({
  declarations: [
    AppComponent,
    NgxNotificationComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```
** STEP 2: (Add the Service to you component(s) where you want to display the Notifications) **

In this case we are going to display notifications in the app.component.html

app.component.ts (Here is an example:)

```
import { Component } from '@angular/core';
import { NgxNotificationService } from 'ngx-notification';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private ngxNotificationService: NgxNotificationService) {}

  sendNotification() {
  	this.ngxNotificationService.sendMessage('This is my message to you!', 'dark', 'bottom-right');
  }

}
```
** STEP 3: **

All we need to do is to add:

```
<lib-ngx-notification></lib-ngx-notification>
```

to the app.component.html page.

In this example we are going to add a button click to show the Notification so the app.component.html page would look like this:

```
<button (click)="sendNotification()">Click here to test message</button> <br><br>

<lib-ngx-notification></lib-ngx-notification>
```

** And that is all! **

## PARAMETERS / OPTIONS

The notifications are send like this:

```this.ngxNotificationService.sendMessage('This is my message to you!', 'dark', 'bottom-right');```

-- The first parameter is the Message which is a String.

-- The second parameter is the Theme.

- Options available are:

  ```dark, light, success, info, warning, danger and none.```

 If you use 'none' you can then add you own css to it by targetting class: ngx-notification

 So, an example to add your own custom colors would be:

```
 .ngx-notification {
   background-color: #2d2d30;
   border-color: #272729;
   color: #c9c9c9;
 }
 ```

 You would just add your own colors.

 -- The last parameter is the position where you want the Notification to appear.

 - Options are:

   ```top-left, top-right, bottom-left, bottom-right and center```


## Author

Steven Fernandez



## License

This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details


Changelog
=========

## [0.0.1] - 2018-05-12
### Added
- First Commit

## [1.0.0] - 2018-05-19
### Added
- Updated Instructions on README

## [1.0.1] - 2018-05-19
### Added
- Updated Instructions on README and Keywords

## [1.0.2] - 2018-05-19
### Added
- Updated README - Cleaned Formatting

## [1.0.3] - 2018-05-19
### Fixed
- Updated README - Spelling Fixed

## [1.0.4] - 2018-05-19
### Added
- Updated - Package.json

## [1.0.5] - 2018-05-19
### Added
- Updated - Package.json