WebStorm: How to prettify HTML in quotes within a

Question

I have the following block in my app.component.ts file:

    @Component({
    selector: 'my-app',
    template: `
        <h1>{{title}}</h1>
        <h2>My Heroes</h2>
<ul class="heroes">
  <li>
    <!-- each hero goes here -->
  </li>
</ul>
    <h2>{{hero.name}} details!</h2>
    <div><label>id: </label>{{hero.id}}</div>
    <div>
    <label>name: </label>
    <input [(ngModel)]="hero.name" placeholder="name">
    </div>
    `
})

How can I tell WebStorm to prettify my JS as well as the HTML that is inside the quotes?

I have already tried: Code > Auto-indent Lines and Code > Reformat Code

I am using WebStorm 2016.3

Answer 1

You can use Edit Angular2HTML Fragment intention:

To bring it up, just click Ctrl+Enter on the string. It will open editor, where you can prettify code and the changes will be reflected in the string.