TypeScript - Angular: Multiline string

TypescriptAngular

Typescript Problem Overview


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

Typescript Solutions


Solution 1 - Typescript

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

var myString = `abc
def
ghi`;

Solution 2 - Typescript

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

Solution 3 - Typescript

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

Solution 4 - Typescript

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`;

Solution 5 - Typescript

Make the variable as follows

firstName ='';
lastName = '';

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionsplunkView Question on Stackoverflow
Solution 1 - TypescriptGünter ZöchbauerView Answer on Stackoverflow
Solution 2 - TypescriptGANESH MUNDEView Answer on Stackoverflow
Solution 3 - TypescriptJay DouglassView Answer on Stackoverflow
Solution 4 - TypescriptdominikView Answer on Stackoverflow
Solution 5 - TypescriptBimsara Hirushan PathiranaView Answer on Stackoverflow