StoryView.component.ts

import {LiveAnnouncer} from '@angular/cdk/a11y';
import {Component, Input, OnDestroy, OnInit} from '@angular/core';
import {Subscription} from 'rxjs';
import {StoryEntry} from '../../Model/StoryEntry';
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,
              private liveAnnouncer: LiveAnnouncer) {
     // Hiding initialization of Entries collection
  }

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

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

  private onEntryAdded(entry: StoryEntry) {
    this.Entries.push(entry);

    this.liveAnnouncer.announce(entry.Text);
  }
}