Property binding in angular

Property binding in angular is one-way data binding. You can use property binding for assigning values to the element’s property or attribute. You have to pass data from components to the element’s property or attribute.

You can use property binding using the following steps:

Step 1: Create a property in the component

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

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  imgURL = "https://images.unsplash.com/photo-1505489435671-80a165c60816?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=831&q=80";
}

Here, imgURL property is created and value is assigned to it.

Step 2: Assign property to the element’s property or attribute

<h1><u>Propery binding:</u></h1>
<img [src]="imgURL" width="250" height="250" />

Here imgURL property is assigned to img element’s attribute.

Output:

Conclusion:

You learned how to use property binding in angular from this article. If you have problems while implementing code, you can tell me through the comment section.
You can learn other types of data-binding from the following articles:

Interpolation in angular
Event binding in angular
Two-way binding in angular