CODEWITHSUNDEEP
javascriptangulartypescript
COM
COM

Reputation: 45

How do i send an image from one angular component to another and display it

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

Upvotes: 1

Views: 793

Answers (1)

Edison Augusthy
Edison Augusthy

Reputation: 1531

Please avoid this document.getElementById('onlyImage').setAttribute('src', image);

instead use a variable to display. Eg:

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

public imgSrc:string;

constructor(private stageColorService: StageColorService) { }

ngOnInit() {

this.stageColorService.stage$
    .subscribe(
      image => {
        console.log('image subscription'+ image);
          this.imgSrc = image
        });
}

and in html Use

<img [src]="imgSrc" alt="Image" id="onlyImage" width="400" height="200" />

Upvotes: 1

Related Questions