can't bind width even though it is @Input

Custom checkbox has [checked] as an @Input attribute. Whether they are undefined, "true", or "false", the checkboxes on the screen are always checked. The HTML - btw they are in unordered list and they are NOT in a form.

<checkbox id="UpperCaseLetter" #chkb [checked]="true" [disabled]="false">Upper Case Letter</checkbox>
<checkbox id="LowerCaseLetter" #chkb >Lower Case Letter</checkbox>
<checkbox id="NumericDigits" #chkb [checked]="false">Numeric Digits</checkbox>
<checkbox id="NonAlphanumericChars" #chkb [checked]="true">Non-Alphanumeric Chars</checkbox>

The checkbox HTML (simple :-) ):

<input type="checkbox"
   checked=""
   [disabled]="isDisabled"
   (change)="onChange($event)" />
<span><ng-content></ng-content></span>

Checkbox.component.ts - as you can see I've tried moving things to AfterInit, but nothing is working.

import {AfterViewInit, Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {ElementState, PageMgrService} from '../page-mgr.service';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';

@Component({
  selector: 'checkbox',
  templateUrl: './checkbox.component.html',
  styleUrls: ['./checkbox.component.scss']
})
export class CheckboxComponent implements OnInit, AfterViewInit {
  @Input() id: string;
  @Input() checked: boolean;
  @Input('disabled') isDisabled: boolean;
  @Output('onChange') onChangeEvent = new EventEmitter;
  FSubj: BehaviorSubject<ElementState>;
  value: boolean;
  InstanceId = 'PasswordConfigAdmin';
  constructor(private pagMgr: PageMgrService) {
    this.InstanceId = pagMgr.GetUniquePageId();
    this.FSubj = pagMgr.GetSubject();
  }

  ngOnInit() {
    this.value = (this.checked === null || this.checked === undefined || this.checked === false ? false : true);
  }

  ngAfterViewInit() {
    this.checked = (this.checked === null || this.checked === undefined || this.checked === false ? false : true);
    this.controlChanged(this.id, this.checked);
  }

  getValue(): boolean {
    return this.value;
  }

  setValue(val: boolean) {
   this.value = val;
   this.checked = val;
  }

  setDisabled(val: boolean) {
    this.isDisabled = val;
  }

  onChange($event) {
    this.value = $event.target.checked;
    this.controlChanged(this.id, this.value);
  }

  controlChanged(ctrl: string, arg: any) {
    const elt = new ElementState();
    elt.controlId = ctrl;
    elt.value = arg;
    elt.instance = this.InstanceId;
    this.FSubj.next(elt);
  }

}

Seems straight forward, but ?? Thanks in advance for your advice.