angular2 two-way-binding of array-type to single value

Question

I'm using a child component to select values which should be updated in my model. The child component accepts an Array<string> via @Input() if I pass in property from my model which is an Array<string> itself everything works as expected an when a value is selected in the child, the model gets updated.

However as an additional requirement I also need to pass in a single-valued (ie a regular string , so non-array) property of my model and whenever the user selects a value in the child I'd like to update my single-value model property immediately.

I tried creating the array from the template using [(selectedValues)]=[parentSingleValue] but this fails with

Parser Error: Unexpected token '=' at column 20 in [[parentSingleValue]=$event]

I created a plunkr to illustrate the issue. Click the items to test it: https://plnkr.co/edit/bHCAaycwZLOddry0gOU7

Answer 1

There are multiple things wrong here

1. You don't need the [(selectedValues)]="parentValues" syntax, because there is nothing going from the child to the parent - [selectedValues]="parentValues" will work the same.
2. It only works because you are passing an array and modifying the array inside the child, so - by side effect. Pass it a copy of the array and it will cease to work.
3. Your @Output() eventEmitter is unused. It would be used if you did something like [selectedValues]="parentValues" (eventEmitter)="someEventHandlingMethod()"

A solution to what you are trying to achieve would be to simply remove the @Input() parameter, and change the @Output() one to emit a simple string, then in the parent handle it by pushing it into the array and setting the single value at the same time.

Child:

@Output()
onItemSelected = new EventEmitter<string>();

...

public addValue(value: string) {
  this.onItemSelected.emit(value);
}

Parent:

export class App {
  parentValues: Array<string> = [];
  parentSingleValue = '';

  itemSelected(item: string) {
    this.parentValues.push(item);
    this.parentSingleValue = item;
  }
}

Parent template:

<h1>Simply:</h1>
<app-child (onItemSelected)="itemSelected($event)"></app-child>

Single value: {{parentSingleValue}}<br>

<div *ngFor="let value of parentValues">
  <p>{{value}}</p>
</div>

Answer 2

Your code works perfectly fine, the reason is you assigned an empty string.

See modified one

Alternatively,

<app-child [(selectedValues)]="parentValues"></app-child>
<div *ngFor="let value of parentValues">
  <p>{{value}}</p>
</div>

<h1>With singleValue:</h1>
<app-child [selectedValues]="converToArray(parentSingleValue)"></app-child>
<div>
  <p>{{parentSingleValue}}</p>
</div>


export class App {
  title = 'app works!';
  parentValues: Array<string> = [];
  parentSingleValue = '212121';
  converToArray(s:string){
    let temp= new Array();
    temp.push(s);
    return temp

  }
}

LIVE DEMO