Checkbox is not checked using value attribute

[cschroeter]

import { Component } from '@angular/core';
import { PolymerElement } from '@vaadin/angular2-polymer';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  directives: [
    PolymerElement('paper-checkbox'),
    PolymerElement('paper-button'),
  ]
})
export class AppComponent {

  public test: boolean = true;

}

<p>
  Value of test: {{test}}
  <paper-checkbox [(value)]="test">Template</paper-checkbox>
</p>

[tallaxes]

Should be checked instead of value:

<p>
  Value of test: {{test}}
  <paper-checkbox [(checked)]="test">Template</paper-checkbox>
</p>

[cschroeter]

That does the trick but then you still can not use the ngControl directive for model driven forms

<p>{{form.value | json}}</p>

<form [ngFormModel]="form">
  <paper-input label="Name" ngControl="name" error-message="Max 10 chars"></paper-input>
  <paper-checkbox ngControl="classic">Classic</paper-checkbox>
</form>

import { Component } from '@angular/core';
import { ControlGroup, FormBuilder, Validators } from '@angular/common';
import { PolymerElement } from '@vaadin/angular2-polymer';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  directives: [
    PolymerElement('paper-button'),
    PolymerElement('paper-checkbox'),
    PolymerElement('paper-input'),
  ]
})
export class AppComponent {

  private form: ControlGroup;

  private car = {
    name: '',
    classic: true
  };

  constructor(private fb: FormBuilder) {
  }

  public ngOnInit(): void {
    this.form = this.fb.group({
      name: [this.car.name, Validators.maxLength(10)],
      classic: [this.car.classic]
    });
  }

}

[Saulis]

Added a feature to target ngControl to use checked instead of value property for elements which extend IronCheckedElementBehavior

[platosha]

Fixed in #62