story-view.component.ts

import {Component, Input, OnDestroy, OnInit} from '@angular/core';
import {Subscription} from 'rxjs';
import {StoryEntry} from '../../Model/StoryEntry';
import {StoryEntryType} from '../../Model/StoryEntryType';
import {StoryService} from '../story.service';

@Component({
  selector: 'app-story-view',
  templateUrl: './story-view.component.html',
  styleUrls: ['./story-view.component.scss']
})
export class StoryViewComponent implements OnInit, OnDestroy {

  @Input()
  public Entries: StoryEntry[] = [];

  private entrySub: Subscription;

  constructor(private storyService: StoryService) {
    // Initial entries to the Entries collection are set here, but omitted for this sample
  }

  ngOnInit() {
    this.entrySub = this.storyService.EntryAdded.subscribe(entry => this.Entries.push(entry));
  }

  ngOnDestroy() {
    if (this.entrySub) {
      this.entrySub.unsubscribe();
      this.entrySub = null;
    }
  }
}