Which @angular/* package(s) are relevant/related to the feature request?

core

Description

It would be very useful to allow the use of the JavaScript spread operator (...) within Angular templates, especially for object bindings like [class], [style]

Current Behavior:

Using the spread operator in object literals within templates results in a parser error:

NG5002: Parser Error: Unexpected token

For example:

<div [class]="{ 'pt-16': nb, ...css }"></div>

This currently throws an error.

Workaround:

Currently, we need to do the merging in the component class:

get mergedClasses() {
  return { 'pt-16': this.nb, ...this.css };
}

<div [class]="mergedClasses"></div>

While this works, it adds verbosity and requires additional logic in the component when the operation could be handled declaratively in the template.

Proposed solution

Allow the use of the spread operator in Angular template expressions, so the following syntax becomes valid:

<div [class]="{ 'pt-16': nb, ...css }"></div>

This would provide more expressive and concise template code, especially when merging static and dynamic classes or styles.

Alternatives considered

None