Property Binding

Property binding in Angular helps you set values for properties of HTML elements or directives. Use property binding to do things such as toggle button functionality, set paths programmatically, and share values between components.

TS

export class CoursesComponent{
    imageUrl = "https://picsum.photos/200";
}

HTML

<img [src]="imageUrl" />

src/app/app.component.html

<img alt="item" [src]="itemImageUrl">

src/app/app.component.ts

itemImageUrl = '../assets/phone.png';

Add background image

[style.background-image]="'url(' + photo + ')'"
Was this page helpful?