How to Build Medium’s Real-Time Applause Feature With Angular and Pusher

In this article, you’ll learn how to code real-time Angular apps with Pusher. We’ll make an app that gives real-time feedback when a post is clicked—just like Medium’s applause feature!

What Is Pusher?

Pusher is a service that provides developers with APIs which enable them to integrate real-time functionalities in web, mobile, and back-end applications. To learn more about Pusher, check out this tutorial video for an introduction.

Getting Started With Pusher in Angular

As mentioned at the beginning of this tutorial, our app will give real-time feedback whenever someone clicks a post. 

For starters, make sure you have Node and npm installed on your machine. You’ll also need Angular CLI to quickly bootstrap our app, so make sure you have it installed as well. If you don’t have Angular CLI installed, simply issue the following command.

npm install -g @angular/cli

Next, use Angular CLI to create the Angular app.

ng new pusher-angular

The UI of our app will be very simple. It will have a post, an applause button which will be represented by a hand icon, and a counter of the number of claps the post has garnered. Open app.component.html and add the following code, in which we tie the click event to the Applause() function.

Read full tutorial at code.tutsplus