Angular 5 + Toastr using Angular-Cli

Easy and beautiful messages.

Toastr examples.

Requirements

• NodeJS, Npm, Angular-Cli.
• An angular projects previously created.
• Your favorite code editor.

Index

• Work in the terminal.
• Adding Toastr to your project.
• Testing

Terminal

• First of all open your terminal, go to your projects folder and type:
  npm install ng2-toastr --save
  Like this:

Adding Toastr

• Know you have to open your project in your code editor, and search the app.module.ts file.
• Modify the file from this:

app.module.ts

To this:

app.module.ts modified

• Know you can generate a new angular component:

myComponent

• Modify the component.ts file from this:

my-component.component.ts

• To this:

my-component.component.ts modified

What you did was add the necessary import to reference Toastr Manager and create five methods. Those methods are the alerts that are going to be shown in the page.

• Know copy all the css properties from this link:
  CSS Properties for Toastr
  And paste them in the styles.css file of your project.
  These css properties are going to make your Toastr notifications look pretty well.

Testing your work

• Run your application with, in the previously opened terminal type: “ng serve”
• Open your browser and enter in: http://localhost:4200/myComponent
  Know your app will look like this:

MyApp

• Click on the button and look at the magic:

MyApp

Thank You!