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 (i.e. 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
There are multiple things wrong here
[(selectedValues)]="parentValues" syntax, because there is nothing going from the child to the parent -
[selectedValues]="parentValues" will work the same.@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>
Your code works perfectly fine, the reason is you assigned an empty string.
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
}
}