Angular 2 Checkbox Two Way Data Binding
angular, checkbox, data-binding, html, typescript
Solution
You can remove `.selected` from `saveUsername` in your checkbox input since saveUsername is a boolean. Instead of `[(ngModel)]` use `[checked]="saveUsername" (change)="saveUsername = !saveUsername"`
Edit: Correct Solution:
<input
type="checkbox"
[checked]="saveUsername"
(change)="saveUsername = !saveUsername"/>
Update: Like @newman noticed when `ngModel` is used in a form it won't work. However, you should use `[ngModelOptions]` attribute like (tested in Angular 7):
<input
type="checkbox"
[(ngModel)]="saveUsername"
[ngModelOptions]="{standalone: true}"/> `
I also created an example at Stackblitz: https://stackblitz.com/edit/angular-abelrm
Problem
I´m fairly new to Angular2 and I have a little problem: In my Login-Component-HTML, I have two checkboxes, which I want to bind in two way data-binding to the Login-Component-TypeScript. This is the HTML: ``` <div class="checkbox"> <label> <input #saveUsername [(ngModel)]="saveUsername.selected" type="checkbox" data-toggle="toggle">Save username </label> </div> ``` And this is the Component.ts: ``` 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']); } ``` If I click an checkbox, I get the correct value in the controller (component). But if I change the value of for example `saveUsername` in the component, the checkbox didn't "get" the new value. So I can´t manipulate the checkbox from the Component (like I want to do in the `ngOnInit` in the component. Thanks for your help!