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 

Answer 1

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

var myString = `abc def ghi`;