Multiple nested components: The chart does not render after the second Level.

[Potmos]

When I have multiple components nested within each other after the second level of nesting the does not render any more, does not give me any error either.

So my code works by having a DashboardComponent, he is loaded using my router module. Inside it there are multiple that is my BlockComponent inside it I want to setup another custom component called but when I setup my ChartComponent it simply does not render anything.

My chart component template is

<canvas baseChart width="400" height="400"
        [datasets]="lineChartData"
        [labels]="lineChartLabels"
        [options]="lineChartOptions"
        [colors]="lineChartColors"
        [legend]="lineChartLegend"
        [chartType]="lineChartType"
        >
</canvas>

I have the mock data from the ng2-charts example on both the BlockComponent and the ChartComponent. If i set template straight on block it works just fine, if set the same template with the same mock data on the chart component it doesn't render, weird thing is it does seem to alter a little the canvas so it does seem to be doing SOMETHING, just not what is expected, and what it does on the BlockComponent. The angular 2 rendered version look like this

    <ng-chart><iframe class="chartjs-hidden-iframe" tabindex="-1" style="display: block; overflow: hidden; border: 0px; margin: 0px; top: 0px; left: 0px; bottom: 0px; right: 0px; height: 100%; width: 100%; position: absolute; pointer-events: none; z-index: -1;"></iframe><canvas basechart="" height="0" width="0" ng-reflect-datasets="[object Object],[object Object],[object Object]" ng-reflect-labels="January,February,March,April,May,June,July" ng-reflect-options="[object Object]" ng-reflect-chart-type="line" ng-reflect-colors="[object Object],[object Object],[object Object]" ng-reflect-legend="true" style="display: block; width: 0px; height: 0px;">
</canvas>
</ng-chart>
    <canvas basechart="" height="1885" width="1885" ng-reflect-datasets="[object Object],[object Object],[object Object]" ng-reflect-labels="January,February,March,April,May,June,July" ng-reflect-options="[object Object]" ng-reflect-chart-type="line" ng-reflect-colors="[object Object],[object Object],[object Object]" ng-reflect-legend="true" style="display: block; width: 1885px; height: 1885px;"></canvas>

Between the "ng-chart" tag is how the chart renders the "canvas" tag outside is how the block renders the same template.

[Potmos]

Okay fixed it.

The problem was actually that the canvas tag cannot be inside a non-html tag.

So I just set it inside a div tag and everything worked just fine.