Angular2 Component @Input two way binding

by

For [(toggled)]="..." to work you need 

  @Input() toggled: boolean;
  @Output() toggledChange: EventEmitter<boolean> = new EventEmitter<boolean>();

  changeValue() {
    this.toggled = !(this.toggled); 
    this.toggledChange.emit(this.toggled);
  }

See also Two-way binding

[UPDATE] – 25 June 2019
From @Mitch’s comment below:
It’s worth noting that the @Output name must be the same as the @Input name, but with Change on the end. You can’t call it onToggle or something. It’s a syntax convention.

Leave a Comment