Dynamically drawing on a canvas with an angular.dart component.

main.html

<div class="game_container"  >
    <game-timeline></game-timeline>
</div>

timeline_component.css

.timeline-container {
    width: 100%;
    position: fixed;
    bottom: 0px;
    left: 50%;
    margin-left: -400px;
}

timeline_component.dart

import 'dart:html';
import 'package:angular/angular.dart';

@Component(
  selector: 'game-timeline',
  templateUrl: 'timeline_component.html',
  styleUrls: ['timeline_component.css'],
)
class TimelineComponent implements OnInit {
  int maxDays = 50;
  int _currentDay = 10;
  @ViewChild('timelineCanvas')
  CanvasElement canvas;

  CanvasRenderingContext2D context;

  @override
  void ngOnInit() {
    initCanvas(canvas);
    drawTimeline();
  }

  void set currentDay(int val) {
    _currentDay = val;
    drawTimeline();
  }
  int get currentDay {
    return _currentDay;
  }

  void initCanvas(CanvasElement canvas) {
    context = canvas.context2D;
  }

  void drawTimeline() {
    context.clearRect(0, 0, 800, 600);
    context.save();

    CanvasGradient gradient = context.createLinearGradient(0, 0, 0, 60);
    gradient.addColorStop(0, '#333');
    gradient.addColorStop(1, '#000');

    context.fillStyle = gradient;
    context.fillRect(0,0,805,40);


    for( var i = 0 ; i < maxDays ; i++) {
      context.lineWidth = 2;

      context.setStrokeColorRgb(120, 120, 120,1);
      if( i != (maxDays-1)) {
        context.beginPath();
        context.moveTo(15+i*16,20);
        context.lineTo(20+i*16,20);
        context.stroke();
      }


      if( i < currentDay ) {
        context.setStrokeColorRgb(255, 255, 255,1);
      } else {
        context.setStrokeColorRgb(120, 120, 120,1);
      }
      context.beginPath();
      context.ellipse(10+i*16, 20, 5, 5, 0, 0, 360, false);
      context.stroke();
    }
    context.save();
  }

}

timeline_component.html

<div class="timeline-container">
    <canvas #timelineCanvas  id="timelineStage" width="805" height="40"></canvas>
</div>

Works for Angular 5.0 running on Dart 2.0.

Taken from:
https://gist.github.com/marc-hughes/8223144

Tested on following versions:
environment:
sdk: '>=2.0.0-dev.55.0 <2.0.0'
dependencies:
angular: ^5.0.0-alpha+13
angular_components: ^0.9.0-alpha+13