It's unlikely that you're going to get this syntax to work in a template (there are many valid typescript constructs that don't work in templates).

You could write a helper method in the component instead, that takes the item as an argument, and then makes the appropriate call, as in, for example:

public doCommand(item: ToolbarItem): void {
  item.command(...item.commandParams);
}

and then change your template to:

<button (click)="doCommand(item)"...

No, you cannot use the spread in a template (even less like you're trying).

To achieve that, you will need a reference to your template.

<input #myInput (input)="isTruthy()" />

@ViewChild('myInput', { static: true }) myInput: ElementRef<HTMLInputElement>;

ngOnInit() {
  Object.assign(this.myInput.nativeElement, this.val);
}

From what I understand the spread operator works both to add new keys to an object and to overwrite the keys it already has.

I imagine a product object like this:

product = {
  price: 0,
  category: a
};

Now we copy the object with the spread operator:

const product2 = {...product};

Now you have another object (in another memory location) with the same content as product.

Now we create a new object with other values with the spread operator:

const produc3 = { ...product, price: 1, category: b };

Now you have an object that has the same keys as the original but with other values.

Now we add a new key to the object:

const product4 =  { ...product, name: 'car'};

Now you have an object that has the same keys as the original object, plus the name key.

You will never have an object with 2 keys the same.

Tested in the chrome console, if you try to define an object with two equal keys only the last key of the definition prevails.

As you mentioned in the question, and as can be seen in this stackblitz, the spread syntax doesn't appear to be allowed in Angular templates at the present time. A feature request has been opened in issue 11850 to support that syntax.

I will explain everything to you: Spread operator will copy all of your object {keys,values} (except some advanced types like symboles) and assign it to a new variable (means a new reference or lets say a new memory address reference).
To more clarification: Of course there is a big difference between using spread and without spread operator i will give you an example:

lets say: this.availableExercises has a memory address of 0xAABBCCDD so:
this.exercisesChanged.next(this.availableExercises); ==> this line will pass the 0xAABBCCDD address to the .next(..) method to be handled after by some codes.
but if we use spread operator like:

this.exercisesChanged.next({...this.availableExercises}); ==> this will generate a copy of the {keys,values} means a new object of your previous 0xAABBCCDD addressed object, and assign it to a new reference (new memory address) like 0x99FF1155.
To understand what i meant look at this example:

let myOldReference = this.availableExercises; // memory address: 0xAABBCCDD 
this.exercisesChanged.next(myOldReference); // .next(0xAABBCCDD);

let myNewReference = {...this.availableExercises}; // this will generate a copy to a new memory address: 0x99FF115
this.exercisesChanged.next(myNewReference ); // .next(0x99FF115);

so that myOldRefernce !== myNewReference because 0xAABBCCDD is different to 0x99FF115 as references. But keep in mind, this will keep the same {keys, values} because it's a copy of keys values, but with different memory references.

That's why you see the same keys,values, but in backgroud, it's different references.

You could consider defining an interface for the props and then pass as an object, no need for spread or using multiple @Inputs().

// child.ts

export interface ChildProps {
  name?: string,
  email?: string  ​
}

export class ChildComponent implements OnInit {
 ​@Input() allProps?: ChildProps;
​
 ​constructor() {}

 ​ngOnInit(): void {}
}

//parent.ts

export class ParentComponent implements OnInit {
  childProps = {
    name: "johnny",
    email: "[email protected]"
  };

  constructor() {}    
  ngOnInit(): void {}
}

<!-- parent-template.html -->

<app-child [allProps]="childProps"></app-child>

<!-- child-template.html -->

<div>{{ allProps?.name }}</div>