Detect changes on inner component on Angular2?

I have a checkbox component (my own design) and use it like this:

Main component:

 let allowChenge = false;
    let field = {
       text: 'text text text',
       visible: true
    }

checkField(value: boolean, field: any) {
   // when I get value=false 
   if (this.allowChenge) {
      this.field.visible = value;
   } else {
      this.field.visible = true;
   }
}

Main component HTML:

<p-checkbox 
   [value]="field.visible"
   [text]="field.text"
   [readonly]="false"
   (onSelect)="checkField($event, field)"
></p-checkbox>

Checkbox component:

@Component({
    selector: 'p-checkbox',
    template: `
        <div style="float: left;">                        
                <label 
                   class="switch" 
                   [class.checked]="value" 
                   [style.opacity]="readonly ? '0.4' : '1.0'"
                >
                   
                </label>            

        </div>
    `
})
export class CheckBoxComponent {    

    @Input() value: boolean;    
    @Input() readonly: boolean = false;    
    @Input() text: string;    

    @Output() onSelect: EventEmitter<any> = new EventEmitter();

    constructor(public _elRef: ElementRef) {

    }    

    ngOnChanges(changes: any) {
        this.value = changes.value.currentValue;
    }    

    select() {
        if (!this.readonly) {
            this.value = !this.value;
            this.onSelect.emit(this.value);
        }        
    }     
}

I have some cases when I do not need to change field object visible value when I make click on checkbox. When field.visible = true and I make click on ckeckbox, in checkbox this.value become false. Then on parent component I set it back to true. But checkbox indicates with value false.