title: Could not able to access property of angular component inside it
body: <p>Trying to show SSE events in a snack bar. Issue is I couldn't able to access the <code>snackBar</code> property inside <code>onMessage</code> function of EventSource. 
  Error shown in the browser console is <code>Cannot read property 'open' of undefined</code>.</p>
  
  <pre><code>import {Component, OnInit} from '@angular/core';
  import {MatSnackBar} from '@angular/material';
  @Component({
    selector: 'snack-bar-overview-example',
    templateUrl: 'snack-bar-overview-example.html',
  })
  export class SnackBarOverviewExample implements OnInit{
    constructor(public snackBar: MatSnackBar) {}
    ngOnInit() {
       //Created a local Server Sent Events server
       //which sends timestamp for every 5 second
       var source = new EventSource('http://localhost:8000/events');
       source.onmessage = function(response){
         console.log('test', response.data);
         //Could not able to access snackbar
         //Error statement is given below
         //Cannot read property 'open' of undefined
         this.snackBar.open(response.data, 'close', {
           duration: 4000
         });
       }
       //Same lines here, have no issues and working perfectly
       this.snackBar.open('message', 'close', {
         duration: 4000
       });
    }
  }
  </code></pre>