Angular 2 TweetBox Challenge

<!-- https://github.com/ShMcK/ng2Challenges/wiki/TodoMVC -->
<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="styles.css" />
    <!-- will be removed with system 0.16.6 -->
    <script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
    <script src="https://jspm.io/system@0.16.js"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.20/angular2.js"></script>
  </head>

  <body>
    <tweet-box></tweet-box>
    <script> 
      System.config({
        paths: {
          '*': '*.js',
          'angular2/*': 'angular2/*',
        }
      });
      System.import('main');
    </script>
  </body>

</html>

import {bootstrap, Component, View} from 'angular2/angular2';
import {Control, FormDirectives, ControlDirective} from 'angular2/forms';

@Component({
  selector: 'tweet-box'
})

@View({
  templateUrl: 'tweet-box.html',
  directives: [FormDirectives]
})

class TweetBox {
  constructor(){
    this.maxLength = 140;
    this.remaining = this.maxLength;
    this.full = false;
    this.canSend = false;
    this.textInput = new Control('');
  }
  count () {
    var remaining = this.maxLength - this.textInput.value.length;
    if (remaining < 0) {
      var limitedText = this.textInput.value.substring(0, this.maxLength);
      this.textInput = new Control(limitedText);
      remaining = 0;
    }
    this.full = remaining == 0;
    this.canSend = !this.full && (this.textInput.value.length != 0);
    this.remaining = remaining;
  }
  send(){
    alert(this.message);
    this.textInput = new Control('');
  }
}

bootstrap(TweetBox);

<div class="container">
  <div>
    <br style="clear:both">
    <div class="form-group col-md-4 ">
      <label id="messageLabel" for="message">Message</label>

      <!-- add a #message model to the textarea. Capture the value on keydown -->
      <textarea (keyup)=count() [control]="textInput" class="form-control input-sm" type="textarea" id="message" placeholder="Message" rows="7"></textarea>

      <!-- make the character count decrease based on the character length of the textarea -->
      <!-- style red when remaining is 0 -->
      <span class="help-block float-right ">{{remaining}}</span>

      <!-- note: [hidden] currently has low specificity. It only works if no other classes are on the element. You may have to wrap around using another span -->
      <!-- this warning should only appear if the textarea has 140 characters -->
      <span><p class="help-block" [class.hidden]="!full" [class.red]="full">You have reached the limit</p></span> 
    </div>
    <br style="clear:both ">
    <div class="form-group col-md-2 ">

      <!-- submit should create an alert with the textarea value -->
      <!-- should be disabled if message is over 140 characters -->
      <!-- style the button with class="disabled" when disabled -->
      <button (click)=send() [class.disabled]="!canSend" class="form-control input-sm btn btn-success" id="btnSubmit " name="btnSubmit " type="button " style="height:35px ">Send</button>
    </div>
  </div>
</div>

.red {
  color: red;
}

.float-right {
  float: right;
}