TypeScript - Angular: Multiline string
TypescriptAngularTypescript 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 = '';