Adicionando elemento de tela ao div - Angular 4 - html5, angular, tela

Eu tenho uma aplicação angular 4. Em um dos meus cenários, os usuários fazem upload de arquivos tiff para o servidor. Para mostrar a pré-visualização do arquivo no navegador, estou usando Tiff.js biblioteca para gerar um elemento de tela html. Parece que tudo funciona bem para o código abaixo. Eu estou recebendo o objeto de tela com êxito.

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

Mas tenho dificuldades em mostrar meu elemento de tela na página. Aqui está o meu html:

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

Apenas imprime [object HTMLCanvasElement] para a página. Como posso mostrar a tela gerada na minha página com sucesso?

Respostas:

// 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