Adding canvas element to div - Angular 4

Question

I have an angular 4 application. In one of my scenarios users upload tiff files to the server. To show the preview of the file in browser, I'm using Tiff.js library to generate a html canvas element. It seems that everything works fine for the code piece below. I'm getting the canvas object successfully.

this.image = myReader.result;
var tiff = new Tiff({buffer: loadEvent.target.result});
var canvas = tiff.toCanvas();
//document.body.append(canvas);
this.tiffCanvas = canvas;

But I have difficulties on showing my canvas element in the page. Here is my html:

<div id="tiffCanvasContainer" [innerHtml]="tiffCanvas"></div>

It just prints [object HTMLCanvasElement] to the page. How can I show the generated canvas in my page succesfully?

Answer 1

// your component.ts
import { ViewChild, ElementRef, OnInit ... } from '@angular/core';

@Component({...})
export class Component implements OnInit {
     @ViewChild('tiffCanvasContainer') public tiffCanvasContainer: ElementRef;
public tiffCanvas: HTMLCanvasElement; // your canvas element

public ngOnInit() {
    this.tiffCanvasContainer.nativeElement.appendChild(this.tiffCanvas);
  }
}


<div #tiffCanvasContainer>...</div> // your template