title: Angular 2 Checkbox Two Way Data Binding
body: <p>I´m fairly new to Angular2 and I have a little problem:</p>
  
  <p>In my Login-Component-HTML, I have two checkboxes, which I want to bind in two way data-binding to the Login-Component-TypeScript.</p>
  
  <p><strong>This is the HTML:</strong></p>
  
  <pre><code>&lt;div class="checkbox"&gt;
  &lt;label&gt;
      &lt;input #saveUsername [(ngModel)]="saveUsername.selected" type="checkbox" data-toggle="toggle"&gt;Save username
  &lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>And this is the Component.ts:</strong></p>
  
  <pre><code>import { Component, OnInit }    from '@angular/core';
  import { Router }               from '@angular/router';
  import { Variables }            from '../../services/variables';
  
  @Component({
      selector: 'login',
      moduleId: module.id,
      templateUrl: 'login.component.html',
      styleUrls: ['login.component.css']
  })
  
  
  export class LoginComponent implements OnInit {
  
      private saveUsername: boolean = true;
      private autoLogin: boolean = true;
      constructor(private router: Router, private variables: Variables) { }
  
      ngOnInit() { 
          this.loginValid = false;
          // Get user name from local storage if you want to save
  
          if (window.localStorage.getItem("username") === null) {
             this.saveUsername = true;
             this.autoLogin = true;
             console.log(this.saveUsername, this.autoLogin);
          } else {
             console.log("init", window.localStorage.getItem("username"));
          }
      }
  
      login(username: string, password: string, saveUsername: boolean, autoLogin: boolean) {
          this.variables.setUsername(username);
          this.variables.setPassword(password);
          this.variables.setIsLoggedIn(true);
          console.log(saveUsername, autoLogin);
          //this.router.navigate(['dashboard']);
      }
  </code></pre>
  
  <p>If I click an checkbox, I get the correct value in the controller (component).</p>
  
  <p>But if I change the value of for example <code>saveUsername</code> in the component, the checkbox didn't "get" the new value.</p>
  
  <p>So I can´t manipulate the checkbox from the Component (like I want to do in the <code>ngOnInit</code> in the component.</p>
  
  <p>Thanks for your help!</p>