I have created a service with an obervable and im trying to send a dataURL from one component to another, then diplay it as an image.

html for the component i want to send data from

<canvas id="patternFrame" width="600px" height="600px"></canvas> 
<ion-button color="medium" (click)='sendPattern()'>send</ion-button>

Typescript for the component i want to send data from

import {StageColorService} from '../../services/stage-color.service';

  constructor(private stageColorService: StageColorService){}

 ngOnInit(){}

  sendPattern(){
    const canv =document.getElementById('patternFrame') as HTMLCanvasElement;
    this.stageColorService.sendStage(canv.toDataURL()); // use service to send image to color component
  };

html code for the component i want to send data to

<img src="" alt="Image" id="onlyImage" width="400" height="200">

Typescript code for the component i want to send data to

import {StageColorService} from '../../services/stage-color.service';

  constructor(private stageColorService: StageColorService) { }

  ngOnInit() {

    this.stageColorService.stage$
        .subscribe(
          image => {
            console.log('image subscription'+ image);
              document.getElementById('onlyImage').setAttribute('src',  image);
            });
  }

typescript code for my service

import { Injectable } from '@angular/core';
import {Subject} from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class StageColorService {

  private stageSource = new Subject<any>();
  stage$ = this.stageSource.asObservable();

  constructor() { }

  sendStage(st: any){
    this.stageSource.next(st);
  }
}