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

main.html

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

timelineview.css

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

timelineview.dart

library timelineview;

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

@NgComponent(
    selector: 'game-timeline',
    templateUrl: '/static/dart/game/web/views/timelineview.html',
    cssUrl: '/static/dart/game/web/views/timelineview.css',
    publishAs: 'ctrl'
)
class TimelineView extends Object with NgShadowRootAware {
  int maxDays = 50;
  int _currentDay = 10;
  CanvasRenderingContext2D context;
      
  void set currentDay(int val) {
    _currentDay = val;
    drawTimeline();
  }
  int get currentDay {
    return _currentDay;
  }
 
  void onShadowRoot(ShadowRoot shadowRoot) {    
      CanvasElement canvas = shadowRoot.querySelector("#timelineStage");
      initCanvas(canvas);
      drawTimeline();
  }

  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();
  }
}

timelineview.html

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

The following works for Angular 5.0 running on Dart 2.0:
https://gist.github.com/mmcc007/f289f69fb63f3a142fda03dc60fd8f89

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