angular 2 component input binding using expression (map)

Question

I have a component with input of type array

class FooComponent  {  
@Input() selectedItemIds:String[];
}

and I would like to use map expression in binding in the parent component

<app-foo-component [selectedItemIds]='items.map(i=>i.Id)'><app-foo-component>

and I get the nice angular error

Bindings cannot contain assignments...

so what is the solution ?

**Note: I know how to do it in component class.I want to know if it is somehow possible via template and the code is very brief, I just wanted to show what I was trying to do **

Answer 1

Call the map function in the *.ts file before you try to pass it to <app-foo-component>. If you're trying to do it this way because your component is being built before your array has finished then create some property hold it.

<app-foo-component *ngIf="itemsReady" [selectedItemIds]='items'><app-foo-component>

Then in your *.ts file you can create some function to do your mapping

itemsReady = false;

mapFunction() {
  // do your mapping and when it's complete set this.itemsReady = true
}