Component Template Formatting & Auto Complete

[mscarchilli]

I don't think these are bugs, just a features that are missing/needed/would be super nice to have.

Component Template Formatting
When inside of a @component using `` it does not respect the formatting and always removes it when formatting your code. In VisualStudio Code it doesn't format the code automatically, but it does respect the formatting you give it. In Sublime it just aligns everything on one level for almost everything. Some things like [ngClass] it does indent, but most other things do not. This formatting does seem to work for "Styles", but not "template".

Ex.

import {Component, Input} from 'angular2/core';

@Component({
    selector: 'zippy',
    styles: [`
    .zippy {
        border: 1px solid #ccc;
        border-radius: 2px;
    }

    .zippy .zippy-title {
        padding: 20px;
        font-weight: bold;
    }

    .zippy .zippy-title:hover{
        background: #f0f0f0;
        cursor: pointer;
    }

    .zippy .zippy-content {
        padding: 20px;
    }
    `],
    template: `
    <div class="zippy">
    <div
    class="zippy-title"
    (click)="toggle()">
    {{ title }}
    <i
    class="pull-right glyphicon"
    [ngClass]="
    {
        'glyphicon-chevron-down': !isExpanded,
        'glyphicon-chevron-up': isExpanded
    }">
    </i>
    </div>
    <div *ngIf="isExpanded" class="zippy-content">
    <ng-content></ng-content>
    </div>
    </div>
    `
})
export class ZippyComponent {
    isExpanded = false;
    @Input() title: string;

    toggle() {
        this.isExpanded = !this.isExpanded;
    }
}

Auto Complete
Again when inside of @component "template" auto-complete does not exist, which gets very cumbersome very fast. It would be nice if there was a way to have elements auto complete here.