145

I'm an Angular 2 beginner and I've written this piece of code in my dev/app.component.ts:

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: '<h3 (click)="onSelect()"> {{contact.firstName}} {{content.lastName}}</h3>'
})
export class AppComponent {
    public contact = {firstName:"Max", lastName:"Brown", phone:"3456732", email:"max88@gmail.com"};

    public showDetail = false;
    onSelect() {
        this.showDetail=true;
    }
}

It works, when I go to the browser "Max Brown is displayed".

Now, I want to write the template part on different lines like this:

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: '<h3 (click)="onSelect()">
    {{contact.firstName}} {{contact.lastName}}<h3>'
})
export class AppComponent {
    public contact = {firstName:"Max", lastName:"Brown", phone:"3456732", email:"max88@gmail.com"};

    public showDetail = false;
    onSelect() {
        this.showDetail=true;
    }
}

But I get this error in Chrome console: 

Uncaught TypeError: Cannot read property 'split' of undefined
Ganesh Satpute
  • 3,664
  • 6
  • 41
  • 78
splunk
  • 6,435
  • 17
  • 58
  • 105
  • Does this answer your question? [How can I do string interpolation in JavaScript?](https://stackoverflow.com/questions/1408289/how-can-i-do-string-interpolation-in-javascript) – Dour High Arch Jul 12 '20 at 02:03

4 Answers4

321

Wrap the text in ` (backticks) instead of single quotes ', then it can span multiple lines.

var myString = `abc
def
ghi`;
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • it works at my place....but why is it not possible with the usual '' like in every other language? for example JS itself... – messerbill Feb 02 '17 at 15:30
  • 3
    Seems you can use normal quotes http://stackoverflow.com/questions/805107/creating-multiline-strings-in-javascript. Backticks also allow interpolation https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals – Günter Zöchbauer Feb 02 '17 at 15:42
  • 23
    how can I ignore spaces and new lines? – Sunil Garg Jan 31 '18 at 06:47
  • Sorry, I don't understand the question. Why would you add them in the first place if you don't want them. I don't understand what problem you're trying to solve. – Günter Zöchbauer Jan 31 '18 at 06:52
  • 1
    I'm guessing @SunilGarg wants to add line breaks to the string so it looks good in code, but doesn't want the extra whitespace in the string itself. – adam0101 Feb 28 '19 at 04:18
  • 3
    That would be the opposite of what my answer is about. I think that would require `'a b c' + 'd e f'` – Günter Zöchbauer Feb 28 '19 at 04:48
  • How to bind variable in it? – Ninja Turtle Mar 27 '20 at 09:38
  • @VinitSingh I'd expect https://stackoverflow.com/a/45399981/217408 to work here as well. – Günter Zöchbauer Mar 27 '20 at 15:44
  • 1
    This has the problem that from the second line there must not be any indentation which may look awkward in deeply nested code. – dominik Mar 31 '23 at 12:25
  • @dominik that shouldn't be a big problem. It's usually better to make properly named constants for such values anyway and then only use the name in the code (deeply nested or not) – Günter Zöchbauer Apr 01 '23 at 09:21
21

the accepted answer works only if we want \n added in our string , if we just want content to be on newline without adding \n in the long string , please add \ at the end of every line like this

string firstName = `this is line 1 \
and this is line 2 => yet "new line" are not \
included because they were escaped with a "\"`;

console.assert(firstName == 'this is line 1 and this is line 2 => yet "new line" are not included because they were escaped with a "\"'); // true

Note - make sure you are not adding any tabs and spaces in the beginning of the next(second in the example) line

nicolas.leblanc
  • 588
  • 7
  • 27
GANESH MUNDE
  • 211
  • 2
  • 2
8
const multiLineString = [
  "I wish",
  "there were a better way",
  "to do this!",
].join(" ");
Nolan Amy
  • 10,785
  • 5
  • 34
  • 45
Jay Douglass
  • 4,828
  • 2
  • 27
  • 19
  • 4
    This is the cleanest looking solution for building xpath selectors in my code. **Note:** *the `join` method defaults to separating strings with a comma `','`.* You probably want to use `.join("")` . – L Co Jun 14 '22 at 13:40
  • Or, for strings that naturally split on spaces, `.join(" ")` – Nolan Amy Mar 07 '23 at 21:26
-2

What about this? This would work around the empty spaces in the new lines. But could be a bit unreadable and have performance impacts.

    let myString =
      `multi${""
      }line${""
      }string`;
dominik
  • 151
  • 1
  • 2
  • 13