https://github.com/thepatrickniyo/ng-toaster-demo

Codes serves to demo the implementation of ng-toaster in angular
https://github.com/thepatrickniyo/ng-toaster-demo

angular ngx-toastr

Last synced: about 2 months ago
JSON representation

Codes serves to demo the implementation of ng-toaster in angular

• Host: GitHub
• URL: https://github.com/thepatrickniyo/ng-toaster-demo
• Owner: thepatrickniyo
• Created: 2021-04-29T18:07:10.000Z (about 5 years ago)
• Default Branch: main
• Last Pushed: 2021-04-29T19:29:06.000Z (about 5 years ago)
• Last Synced: 2025-03-11T19:56:12.365Z (over 1 year ago)
• Topics: angular, ngx-toastr
• Language: TypeScript
• Homepage:
• Size: 256 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# NgToasterDemo

The code serves to implement ``ngx-toastr`` in angular

## Setting up ngx-toastr

Run the following commands to install ngx-toastr 

``npm i ngx-toastr --save``

Run the follwing to install angular animations, this is becouse ngx-toastr uses angular animations

``npm install @angular/animations --save``

Note: that ``ngx-toastr`` can also be used without angular animations but angular animations are easy to use.

Set up the the ngx-toastr css to `angular.json` for its styles to be compiled

Use the below if you are using  angular cli  6 and above, add the second line in ``styles`` under ``styles.scss``

```"styles": [

  "styles.scss",

  "node_modules/ngx-toastr/toastr.css"

]

```

Use the following for angular bellow cli 6

```"styles": [

  "styles.scss",

  "../node_modules/ngx-toastr/toastr.css"

]

```

Add the below line to import ngx-toastr module in the app

```import { ToastrModule } from 'ngx-toastr';```

In app modules add the below setting in ``imports`` array

 ```imports: [

    BrowserModule,

    AppRoutingModule,

    ToastrModule.forRoot({

      progressBar:true,

      progressAnimation: 'increasing',

      preventDuplicates: true

    })

  ],

 ```

 ## Screenshots

 success button clicked

 

 

 Error button clicked

 

 

 Warning button clicked

 

 

 Information button clicked

 

 ## To refere to this project

 - clone the repo

 - run ``npm install``

 - open your browser and run ``localhost:4200``

 ## For more details

 - Read the library documentation on npm

 https://www.npmjs.com/package/ngx-toastr

 ## Author 

 patrickniyogitare28@gmail.com