Angular two way binding for strings and numbers

For [(toggled)]="..." to work for number and string types you need

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

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

See also Two-way binding 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.

Hint: If you were to use [(toggled)]="object.id", no additional ChangeEmitter is necessary since only object reference is passed into the component.