New line breaks typescript code in Angular 2

Question

I have this code which works as expected;

import {Component} from 'angular2/core';

@Component({
    selector: 'media-tracker-app',
    templateUrl: 'app/app.component.html',
    styles: ['      h1 {            color: #ffffff;     }']
})

export class AppComponent {}

but if I put some new lines in to make the CSS more readable like this:

import {Component} from 'angular2/core';

@Component({
    selector: 'media-tracker-app',
    templateUrl: 'app/app.component.html',
    styles: ['      h1 {            
        color: #ffffff;     
    }']
})

export class AppComponent {}

... then it breaks my code.

In the console I get: SyntaxError: unterminated string literal

I am just starting to learn Angular 2... any ideas?

Ven · Accepted Answer · 2016-08-19 09:30:47Z

6

That's totally unrelated to either TypeScript or AngularJS: JavaScript strings using ' and " are not multilines.

You have two options:

Use a backslash to escape end of line

var a = 'hey\
you';

Use ES6 template strings (using backticks):

var a = `hey
you`;

answered Aug 19, 2016 at 9:30

Ven

19k2 gold badges44 silver badges62 bronze badges

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

4 Comments

the_peacock Over a year ago

thanks guys, yes I was using the wrong syntax. I did not realise that it was a backtick and not a quote coming from PHP background.. Thanks

Ven Over a year ago

not always easy to remember the tiny differences between each languages. If that answer helped you, feel free to mark as resolved.

the_peacock Over a year ago

yeah thanks picking up all the little differences all the time! I tried to mark your answer as complete, but it would not count the point because my profile is not good enough yet! Thanks again

Ven Over a year ago

rather than the up arrow, I think you should see a green mark/check under it to accept an answer

Arun Ghosh · Accepted Answer · 2016-08-19 09:28:36Z

0

Can you try putting text in ` (backticks) instead of single quotes '?

You can check this link:

template: `
  <h1>{{title}}</h1>
  <h2>My favorite hero is: {{myHero}}</h2>
The template is a multi-line string within ECMAScript 2015 backticks (). The backtick () — which is not the same character as a single quote (') — has many nice features. The feature we're exploiting here is the ability to compose the string over several lines, which makes for much more readable HTML.

answered Aug 19, 2016 at 9:28

Arun Ghosh

7,7741 gold badge28 silver badges38 bronze badges

Collectives™ on Stack Overflow

New line breaks typescript code in Angular 2

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related