Как изменять @input свойство в компоненте, чтобы не терялся биндинг?

Question

[nuclear_kote]

Есть у меня какой то такой компонент:

<div class="a">
   <div class="b" *ngIf="shown">blabla</div>
   <button (click)="onClick()">test</button>
</div>

@Component({
    selector: 'my-component'
})
export class MyComponent {
    @Input
    shown: boolean;
    onClick():void {
        this.shown = false;
    }
}

<my-component [shown]="property"></my-component>

Проблема в том что если срабатывает onClick и свойство shown выставляется в false в компоненте биндинг на property отваливается.

Как это можно исправить по нормальному?

Answer 1

[Руслан Лопатин]

Нужно сделать двустороннее связывание.

@Component({
    selector: 'my-component'
})
export class MyComponent {
    @Input()
    shown: boolean;
    @Output()
    shownChange = new EventEmitter<boolean>();
    onClick():void {
        this.shown = false;
        this.shownChange.emit(this.shown);
    }
}

<my-component [(shown)]="property"></my-component>