title: Update view right away after update in Angular/node.js app
body: <p>I'm working on a movie app to practice my MEAN stack skills. </p>
  
  <p>So I have the following web page (see below) with a header component. This component shows data like how many users the website has, how many movies and so on. This header is there on every page of the application. </p>
  
  <p>Now, imagine a situation where a new person registers. I would like this component to add 1 to the user count right away so that it shows one more user in the view without having to refresh the page. </p>
  
  <p>I thought this would be the case after I switched to an async pipe in my template, but unfortunately that's not the case. Does anyone know how to actually do this? Screenshots and code below.</p>
  
  <p><strong>On top you see the header component, for now it has 5 users. When someone new registers I would like it to update immediately instead of just when I reset the page.</strong></p>
  
  <p><a href="https://i.stack.imgur.com/bwLwV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bwLwV.png" alt="Here you see the header and its data"></a></p>
  
  <p><strong>Template</strong></p>
  
  <pre><code>&lt;ul class="stats"&gt;
              &lt;li&gt;{{ (websiteStats$ | async).movieCount }} movies |&lt;/li&gt;
              &lt;li&gt;{{ (websiteStats$ | async).userCount }} users |&lt;/li&gt;
              &lt;li&gt;{{ (websiteStats$ | async).ratingCount }} movie ratings |&lt;/li&gt;
              &lt;li&gt;{{ (websiteStats$ | async).reviewCount }} movie reviews&lt;/li&gt;
          &lt;/ul&gt;
  </code></pre>
  
  <p><strong>Header component</strong></p>
  
  <pre><code>ngOnInit(){
          this.websiteStats$ = this.movieService.countData()
          console.log(this.websiteStats$)
      }
  </code></pre>
  
  <p><strong>Back-end node.js route to get all the data</strong></p>
  
  <pre><code>router.get('/getCounts', function(req, res, next) {
    console.log('entered back-end');
    var votes;
    var reviews;
    Movie.find({}, function(err, movies){
        if (err) {
            return res.status(500).json({
                title: 'An error occurred',
                error: err
            });
        }
        var amountOfMovies = movies.length;
      User.find({}, function(err, users){
          if (err) {
              return res.status(500).json({
                  title: 'An error occurred',
                  error: err
              });
          }
          var amountOfUsers = users.length;
          var amountOfRatings = 0;
          var amountOfReviews = 0;
          users.forEach(function(user){
              amountOfRatings += user.ratings.length;
              amountOfReviews += user.reviews.length;
          });
  
          res.status(200).json({
                userCount: amountOfUsers,
                  movieCount: amountOfMovies,
                  ratingCount: amountOfRatings,
                  reviewCount: amountOfReviews
          });
      })
    })
  });
  </code></pre>
  
  <p><strong>Addition: service code</strong></p>
  
  <pre><code>countData(){
      return this.http.get('http://localhost:3200/app/getCounts')
          .map((response: Response) =&gt; {
              const result = response.json();
              return result
          })
          .catch((error: Response) =&gt; {
              return Observable.throw(error.json());
          })
  }
  </code></pre>