Search code examples
angulartypescriptarrow-functions

Arrow function in Typescript not recognized in string interpolation (Angular)

When Arrow function is used in TypeScript for String interpolation, there is no output in the browser with expected content "Hello" and there is no error as well. But it displays when normal function syntax is used. Why so?

app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  getStr: () => 'Hello';
}

app.component.html:

<p>{{ getStr() }}</p>
Solution

  • change to getStr = () => 'Hello'; as you need to initialize getStr.

    if you want to add typing as well, you can do so :
    getStr: () => string = () => "Hello";