CODEWITHSUNDEEP
angulartypescriptsublimetext3visual-studio-code
Minh Mai
Minh Mai

Reputation: 35

TypeScript multi-line code not recognized

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

Upvotes: 0

Views: 1282

Answers (1)

Oliver Cooke
Oliver Cooke

Reputation: 1059

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

Upvotes: 3

Related Questions