> For the complete documentation index, see [llms.txt](https://fancyloves.gitbook.io/frontendtech/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://fancyloves.gitbook.io/frontendtech/angularjs/bindings/property-binding.md).

# Property Binding

People often describe property binding as one-way data binding because it flows a value in one direction, **from a component's data property into a target element property**.

The following binding pairs do the same thing

```markup
<img [src]="heroImageUrl">
<img bind-src="heroImageUrl">

<img src="{{heroImageUrl}}"> <!--With Interpolation-->
```

> When setting an element property to a **non-string** data value, you must use ***property binding***.

## Target - Element Property

```
<img [src]="heroImageUrl">
<button [disabled]="isUnchanged">Cancel is disabled</button>
```

## Target - Component Property

In template of Parent Component

```
<app-hero-detail [hero]="selectedHero"></app-hero-detail>
```

In ts of Child Component

```
@Input() hero: Hero;
```

It's a one way data binding from the selectedHero property of the HeroesComponent to the hero property of the target element, which maps to the hero property of the HeroDetailComponent.

## Target - Directive Property

```
<div [ngClass]="classes">[ngClass] binding to the classes property</div>
```