Angular: двухстороннее связывание данных для пользовательского ввода в дочернем компоненте

Question

Как сделать двустороннюю привязку данных для пользовательского ввода в дочерний компонент в Angular 8?

Я использовал синтаксис banana-in-a-box [(...)], но он не делает видимыми изменения в дочернем компоненте в родительском компоненте.

В результате он должен работать с синтаксисом типа «банан в коробке».

parent.component.ts

...
public childVisibility: boolean = true;
...

parent.component.html

childVisibility : {{childVisibility}}

<app-child-component [(visible)]="childVisibility">
</app-child-component>

child.component.ts

@Component({
  selector: 'app-child-component',
  templateUrl: './app-child.component.html',
  styleUrls: ['./global-search-results.component.scss']
})
export class ChildComponent {
  @Input() visible: boolean;

  constructor() {}

  public changeVisible() { 
    this.visible = false;
  }
}

child.component.html

<button (click)="changeVisible()">
  Change Visible
</button>

Answer 1

Попробуйте так:

child.component.ts:

@Output() visibleChange = new EventEmitter();

public makeVisible() { 
   this.visible = false;
   this.visibleChange.emit(this.visible)
}

parent.component.html

<app-child-component [(visible)]="childVisibility" >
</app-child-component>

Рабочая демоверсия

Answer 2

child.component.ts

@Input()  visible: boolean;
@Output() visibleChange = new EventEmitter<boolean>();

public changeVisible() { 
   this.visible = false;
   this.visibleChange.emit(this.visible);
}

parent.component.html

<app-child-component [(visible)]="childVisibility">
</app-child-component>

Причиной здесь является суффикс 'Изменить 'в названии события visibleChange.Если имя привязки свойства равно «x», имя привязки события должно быть точно «xChange».Только тогда angular распознает синтаксис banana-in-a-box [()].

Подробный пример: http://embed.plnkr.co/Jcu0iNkaUeRF7KEF7wA4/