String Interpolation

String Interpolation in Angular is a one-way data-binding technique that is used to transfer the data from a TypeScript code to an HTML template (view). It uses the template expression in double curly braces to display the data from the component to the view.

component.ts

export class ServerComponent{
    serverId: number = 10;
    serverStatus: string = 'offline';
}

component.html

<p>Server width ID {{serverId}} is {{serverStatus}}</p>

String interpolation vs property binding

<img src="{{recipe.imagePath}}" alt="{{recipe.name}}">
<img [src]="recipe.imagePath" [alt]="recipe.name">