TypeScript - Angular: Multiline string

Question

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:"[email protected]"};

    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:"[email protected]"};

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

But I get this error in Chrome console:

Uncaught TypeError: Cannot read property 'split' of undefined

Does this answer your question? How can I do string interpolation in JavaScript? — Dour High Arch
– Dour High Arch, Commented Jul 12, 2020 at 2:03

Günter Zöchbauer · Accepted Answer · 2017-03-04 16:51:13Z

361

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

var myString = `abc
def
ghi`;

edited Mar 4, 2017 at 16:51

answered Feb 5, 2016 at 13:27

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

10 Comments

Günter Zöchbauer Over a year ago

Seems you can use normal quotes stackoverflow.com/questions/805107/…. Backticks also allow interpolation developer.mozilla.org/en/docs/Web/JavaScript/Reference/…

Code Guru Over a year ago

how can I ignore spaces and new lines?

adam0101 Over a year ago

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.

Günter Zöchbauer Over a year ago

That would be the opposite of what my answer is about. I think that would require 'a b c' + 'd e f'

dominik Over a year ago

This has the problem that from the second line there must not be any indentation which may look awkward in deeply nested code.

|

Mr-IDE · Accepted Answer · 2025-08-27 14:01:26Z

The accepted answer works only if we want \n added in our compiled string. If we just want the code to be written on a newline, without adding \n in the compiled 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 or spaces at the beginning of the next (second in the example) line, because they will be added into the compiled string.

Another way is to use the method "string1" + "string2", where it disregards any spaces or tabs at the beginning of the next line:

string longLine = "This is line 1 "
     + " and this is also one line 1";
// The compiled string = "This is line 1 and this is also line 1"

Nolan Amy · Accepted Answer · 2023-03-07 21:31:33Z

13

const multiLineString = [
  "I wish",
  "there were a better way",
  "to do this!",
].join(" ");

edited Mar 7, 2023 at 21:31

Nolan Amy

11.2k5 gold badges38 silver badges48 bronze badges

answered May 10, 2022 at 19:41

Jay Douglass

4,9382 gold badges31 silver badges20 bronze badges

2 Comments

L Co Over a year ago

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("") .

Nolan Amy Over a year ago

Or, for strings that naturally split on spaces, .join(" ")

Collectives™ on Stack Overflow

TypeScript - Angular: Multiline string

3 Answers 3

10 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

10 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related