TypeScript multi-line code not recognized

Question

Please help me with this error when coding with Typescript in Sublime and VS Code. It can only be recognized and correctly display in browser if all template: code is in one single line.

template:'<h1>{{title}}</h1><h2>{{hero.name}} details!</h2><div><label>id: </label>{{hero.id}}</div><div><label>name: </label>{{hero.name}}</div>',

When I try to break it down to serveral lines, the browser cannot display the result as expected.

Below is the full code of what I'm doing:

import { Component } from '@angular/core';

export class Hero {
    id: number;
    name: string;
}

@Component({
    selector: 'my-app',
    template:'<h1>{{title}}</h1><h2>{{hero.name}} details!</h2><div><label>id: </label>{{hero.id}}</div><div><label>name: </label>{{hero.name}}</div>',
})

export class AppComponent {
    title = 'Tour of Heroes';
    hero = Hero {
        id: 1;
        name: 'Windstorm';
    }   
}

This tutorial is from angular.io

Answer 1

You need to use backticks when writing multi lines

@Component({
    template: `
        //code here
    `
})

Use templates with large amounts of HTML.

@Component({
    templateUrl: "PATH HERE"
})

Hope that helps