Css is ignored or does weird things


#1

I have a big problem and I don’t know how to fix it. I programmed a little child component (a graph) and I want to include it in another component. So I used the tag of the child component and it works. It is displayed in the parent component. But as soon as I change the style property of the child component it does very strange things… (I describe them below) But first of all the code:
Child component:


    import { Component, Input } from '@angular/core';

@Component({
    template: 
    `
    <canvas id="stats"></canvas>
    `,
    selector: 'bar-graph'
})
export class barGraph {
    @Input('green') green: number;
    @Input('orange') orange: number;
    @Input('red') red: number;

    private ngOnInit() {
        this.paint();
    }

    private paint(): void {
        let startCoord: number = 0;
        let element: any = document.getElementById("stats");
        let ctx: any = element.getContext("2d");
        ctx.fillStyle = '#32CD32';
        ctx.fillRect(startCoord, 0, element.width * this.green / 100.0, element.height);

        if (this.green > 0) {
            startCoord += element.width * this.green / 100.0 + 2;
            ctx.fillStyle = 'black';
            ctx.fillRect(startCoord - 2, 0, 2, element.height);
        }

        ctx.fillStyle = 'orange';
        ctx.fillRect(startCoord, 0, element.width * this.orange / 100.0, element.height);
        if (this.orange > 0) {
            startCoord += element.width * this.orange / 100.0 + 2;
            ctx.fillStyle = 'black';
            ctx.fillRect(startCoord - 2, 0, 2, element.height);
        }
        ctx.fillStyle = 'red';
        ctx.fillRect(startCoord, 0, element.width * this.red / 100.0, element.height);

        ctx.globalAlpha = 0.3;
        ctx.fillStyle = "gray";
        ctx.fillRect(0, element.height * 0.9, element.width, element.height - element.height * 0.9);
        ctx.fillStyle = "white";
        ctx.fillRect(0, 0, element.width, element.height * 0.0685);
        ctx.fillStyle = "#AAAAAA"
        ctx.fillRect(element.width * 0.98, element.height * 0.0685, element.width - element.width * 0.98, element.height - element.height * 0.0685 - element.height * 0.1)
        ctx.fillRect(0, element.height * 0.0685, element.width * 0.02, element.height - element.height * 0.0685 - element.height * 0.1)
    }
}

You can ignore the paint method, that works fine…

parent component - ts:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
    templateUrl: 'Statistics.html',
    selector: 'statistics'
})

export class Statistics {
    constructor(private navCtrl: NavController) {

    }
}

parent component - html:

<ion-header>
    <ion-navbar>
        <ion-title>Statistik</ion-title>
    </ion-navbar>
</ion-header>
<ion-content>
    <bar-graph green="50" red="50"></bar-graph>
</ion-content>

Now the problems: If I change the css height or width in the parent component nothing changes. And it gets even more weird… If I set a border in the parent component the whole canvas looks like this: enter image description here

But all those things only happen when I change the css in the parent component… Does anyone know why this is and how to fix it?