title: Angular ActionCable call method in component when notification received
body: <p>I'm trying to practice using <code>ActionCable</code> in <code>Angular</code>.  I created a quick <code>Rails</code> application that I put up on <code>Heroku</code> and then created an <code>Angular</code> application with the <code>actioncable</code> npm module as a dependency.</p>
  
  <p>I configured my <code>Rails</code> appplication to allow <code>http://localhost:4200</code> as an origin while I play around with my <code>Angular</code> app in development.  I also didn't make this an API application because I wanted to have a working UI from the get-go.  So I can log into the <code>Rails</code> application, send a message, and my separate <code>Angular</code> application is subscribed to that channel as well.  I'm successfully receiving those notifications/messages.</p>
  
  <p>Now I'd like to render something in Angular based on that message.  I think I'm missing something pretty silly here, but I cannot refer to methods in the component that instantiates the subscription to that channel in the <code>receive</code> callback of the subscription.</p>
  
  <pre><code>import {
    ComponentFactoryResolver,
    ComponentRef,
    OnInit,
    ViewContainerRef,
    Component,
    ViewChild,
    Output
  } from '@angular/core';
  import * as ActionCable from 'actioncable';
  import { MessageComponent } from 'app/message/message.component';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent implements OnInit {
    messageRef: ComponentRef&lt;MessageComponent&gt;;
    @ViewChild('message', { read: ViewContainerRef }) message: ViewContainerRef;
  
    title = 'app works!';
    private cable: ActionCable.Cable;
    private subscription: ActionCable.Channel;
  
    constructor(
      private componentFactoryResolver: ComponentFactoryResolver,
      private viewContainerRef: ViewContainerRef) {
    }
  
    public ngOnInit(): void {
      this.cable = ActionCable.createConsumer('wss://&lt;my-heroku-app&gt;.herokuapp.com/cable');
      this.subscription = this.cable.subscriptions.create(
        'RoomChannel',
        {
           connected: this.connected,
           disconnected: this.disconnected,
           received: this.received,
        });
     }
  
    private showMessage(messageString) {
      if (!this.messageRef) {
        const messageComponent = this.componentFactoryResolver.resolveComponentFactory(MessageComponent);
        this.messageRef = this.message.createComponent(messageComponent);
      }
      this.messageRef.instance.message = messageString;
      this.messageRef.changeDetectorRef.detectChanges();
    }
  
    private connected() {
      console.log('connected!');
    }
  
    private disconnected() {
      console.log('disconnected!');
    }
  
    private received(data: any) {
      console.log('received');
      // What do I put here? `this` is of type Subscription, 
      // and thus, I can't call `this.showMessage(data.message)`
    }
  }
  </code></pre>
  
  <p>I want to use some sort of predicate or inject something into that context (sorry if I'm not using the right terminology), but I am just not sure how to do this.  I plan on cleaning things up instead of having this all in the <code>AppComponent</code> class, but for now I'm just trying to learn.</p>
  
  <p>Any ideas?  Thanks!</p>