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

Oliver Cooke · Accepted Answer · 2017-02-09 11:35:20Z

3

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

answered Feb 9, 2017 at 11:35

Oliver Cooke

1,0591 gold badge8 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Minh Mai Over a year ago

My bad! missed out on that from the tutorial.

Collectives™ on Stack Overflow

TypeScript multi-line code not recognized

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related