¿Cómo usar la función javascript en la interpolación de strings en AngularJS?

La interpolación de strings se usa básicamente para mostrar los datos dinámicos en una plantilla HTML. Le facilita realizar cambios en el archivo componente.ts y obtener datos automáticamente desde allí a la plantilla HTML (archivo componente.html).

Así que aquí creamos una plantilla HTML simple que usa la interpolación de strings y luego escribimos la función que se usa dentro de la interpolación de strings.

Acercarse :

• Cree la aplicación Angular que se utilizará.
• Cree un componente «DemoComponent». En demo.component.ts cree algunos métodos que usamos dentro de la interpolación de strings.
• Aquí también estamos usando la función JavaScript incorporada dentro de la interpolación de strings.

Sintaxis: 

<h4>Book Price : {{ 'SHOULD BE LOWER CASE'.toLowerCase() }}</h4>

Ejemplo 1: (Funciones integradas) Agregue el siguiente HTML dentro de la plantilla angular y ejecútelo usando «ng serve» y hace que la string esté en minúsculas.

<h4>Book Price : {{ 'SHOULD BE LOWER CASE'.toLowerCase() }}</h4>
<hr/>

Producción : 

Ejemplo 2: (Funciones personalizadas)

import { Component } from '@angular/core';
  
@Component({
    templateUrl: './demo.component.html',
    styleUrls: ['./demo.component.css']
})
export class DemoComponent{
  
    public Books = [
        {name:"The Pilgrim’s Progress",author:'John Bunyan',price:"13"},
        {name:"Robinson Crusoe",author:'Daniel Defoe',price:"43"},
        {name:"Gulliver’s Travels",author:'Jonathan Swift',price:"33"}
    ]
  
    constructor(){}
  
    printBookName(book){
        return "[ " + book.name + " ]";
    }
    printBookAuthor(book){
        return "[ " + book.author + " ]";
    }
    printBookPrice(book){
        return "[ " + " $" + book.price + " ]";
    }
}

En el código anterior, hemos creado una array de libros que almacena el objeto del libro y luego hemos creado tres funciones y vamos a usar estas tres funciones dentro de la interpolación de strings para imprimir detalles específicos del libro.

<div style="margin-left:100px" *ngFor="let book of Books">
  <hr>
  <h4>Book Name : {{ printBookName(book) }}</h4>
  <h4>Book Author : {{ printBookAuthor(book) }}</h4>
  <h4>Book Price : {{ printBookPrice(book) }}</h4>
</div>

Producción:

Aquí, en la plantilla HTML, estamos usando una función dentro de la interpolación de strings para imprimir datos de libros específicos.