import { Component } from '@angular/core' ; import { Observable } from 'rxjs' ; @ Component ( { selector : 'aw-basic-04' , template : `
    <h4>04 - Producer on its own</h4>

    <div style="margin-bottom: 1rem;">
      <button type="text" (click)="start()">Start</button>
      <button type="text" (click)="clear()">Clear</button>
    </div>

    <div *ngFor="let message of messages">
      {{message}}
    </div>

    <div *ngIf="errorMessage" style="background-color: red; color: white">
      OMG! We got an error!
      {{errorMessage}}!
      Time to panic!
    </div>
  ` } ) export class Basic04Component { errorMessage = '' ; messages : string [ ] = [ ] ; observable = new Observable ( observer => { observer . next ( 'wait' ) ; observer . next ( 'for' ) ; observer . next ( 'it' ) ; observer . next ( '...' ) ; setTimeout ( ( ) => { observer . next ( 'TA DA!' ) ; observer . complete ( ) ; } , 2000 ) ; } ) ; start ( ) { this . observable . subscribe ( ( value ) => this . messages . push ( value ) , ( err ) => ( this . errorMessage = err ) , ( ) => this . messages . push ( 'Observable completed' ) ) ; } clear ( ) { this . errorMessage = '' ; this . messages = [ ] ; } }