Skip to content

Proposal: Allow computed property names in map expressions #13855

@santialbo

Description

@santialbo

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior
The expression parser currently doesn't support ES2015 computed property names, which allow to put an expression between brackets [] that will be computed as the property name.

Example of what's not currently supported:

<div [ngClass]="{[className1]: true, [className2]: foo()}"></div>

className1 and className2 are properties in the controller that contain the actual class names.

This can be overcome by creating a property/function in the component class.

get myClasses() {
  let self = this;
  return {
    [self.className1]: true,
    [self.className2]: self.foo()
  };
}
<div [ngClass]="myClasses"></div>

Expected behavior
First example to work.

What is the motivation / use case for changing the behavior?
This would avoid the need for creating such properties in the component.

Please tell us about your environment:

  • Angular version: 2.3.1

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: compilerIssues related to `ngc`, Angular's template compilercompiler: parsercore: binding & interpolationIssue related to property/attribute binding or text interpolationfeatureIssue that requests a new feature

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions