Use New Toaster Module

Important

The source code for this course can be found on GitHub. Each step has it’s own branch, instructions for how to checkout the correct code for each step are in the Project Setup lecture.

Use New Toaster Module

In this lecture we will see how we can replace the older AngularJS toaster module with a more modern, Angular version. So lets get started!

Adding angular2-toaster module

Since we already imported the angular2-toaster module into our application at the beginning of this section, what’s left is to integrate it into our contact service entity.

This is as easy as importing the ToasterService and changing the constructor syntax of the ContactService class (in contact.service.ts) like so:

JavaScript

Copy...
import { ToasterService } from 'angular2-toaster';

@Injectable()
export class ContactService {
  ...
  constructor(private contact: Contact,
              private toaster: ToasterService) {
    ...
  }
  ...
}

That’s it! Since the angular2-toaster module uses the same API as its AngularJS version, we can leave the rest of the code as it is.

Note

We have replaced the manually used @Inject decorator with the @Injectable decorator for the class.

Re-build the application and run it on localhost to ensure that all functionality works as expected. You can also delete the ajs-upgraded-providers.ts file since it is now redundant.

Caught a mistake or want to contribute to the book? Edit this page on GitHub!

Advanced JavaScript

This unique course teaches you advanced JavaScript knowledge through a series of interview questions. Bring your JavaScript to the 2021's today.

Level up your JavaScript now!

Copy[🌲,🌳,🌴].push(🌲)

If you find my courses useful, please consider planting a tree on my behalf to combat climate change. Just $4.50 will pay for 25 trees to be planted in my name. Plant a tree!