How to change the @input property in the component so that the binding is not lost?

Question

Angular

I have a component like this:

<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>
The problem is that if onClick fires and the shown property is set to false in the component, the binding to property falls off.
How can this be corrected normally?

Answer 1

You need to do a two-way link.

@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>