Creé un servicio con un observable y estoy tratando de enviar una URL de datos de un componente a otro, luego mostrarlo como una imagen.

html para el componente desde el que quiero enviar datos

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

Texto mecanografiado para el componente desde el que quiero enviar datos

 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 };

código html para el componente al que quiero enviar datos

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

Código mecanografiado para el componente al que quiero enviar datos

 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); }); }

código mecanografiado para mi servicio

 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); } }