Canvas Usage in Angular2

Question

I am adding the canvas dynamically and I have to draw something on that canvas. How to access the canvas

<canvas id=\"myCanvas\" class='myCanvas' #myCanvas width=\"100\" height=\"100\"> 

I am adding this dynamically using innerHTML on the required div

    @Component({
        selector: 'my-view',
        template: `
           <div [innerHTML]="{{str}}"></div>
    `

        })

        export class countryOverviewComponent implements ngOnInit(
               private str="";
               ngOnInit() {
                 this.str="<canvas id=\"myCanvas\" class='myCanvas' #myCanvas width=\"100\" height=\"100\">";
                 this.getCanvas();
           }
           getCanvas(){
              //I have to get the canvas here.
         }
        )

Answer 1

When adding Angular2 specific syntax using [innerHTML], Angular2 just passes the string as-is and doesn't process it in any way.

If you want to add it dynamically, wrap it in a component and use ViewContainerRef.createComponent() do add the component dynamically.

For an example see Angular 2 dynamic tabs with user-click chosen components