Feature Request: In Angular templates, automatically convert literal attribute values to variable ones with brackets (and back)

Often times I have an Angular template and a bit of HTML like this:


<mat-tab label="Products">

Now, I need to bind that description to a variable, and perhaps even concatenate the string, so I need to convert it to:

<mat-tab [label]="'Products' + numberOfProducts ">

You add square brackets and put single quotes around the string to make it variable. I have to do this all of the time and it's a little cumbersome; it'd be nice to have a WebStorm refactoring for this.


Comment actions Permalink

Please feel free to file a request for this feature to youtrack, https://youtrack.jetbrains.com/issues/WEB

Comment actions Permalink

Just a small tip, might aid you: I have found the following setting to be helpful in those tasks. With this option checked, you can double click/mark the word `label` and hit `[` to get the result `[label]`.

  1. Settings
  2. Editor
  3. General
  4. Smart Keys
  5. "Surround selection on typing quote or brace"


Please sign in to leave a comment.