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

# Data Binding

## Interpolation

* Use double braces 
* Weaves calculated strings into the text between HTML elements
* Attributes can be assigned - `<img src="{{heroImageUrl}}"` [`style`](https://angular.io/api/animations/style)`="height:30px">`
* One way data binding
* Can be expressions like `{{price * units }}`
* Can call a function `{{ calculateTotal() }}`
* Can use component or template variables

## Setting Component Properties

Passing values to a component can be handled using `@Input()` decorator on the child component. Parent components can pass data to their child components using attributes.

![](https://3208804520-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LHxcOLKU4vpIQfXJm9H%2F-Ll2MKVTu6yOp2S5XSUI%2F-Ll2MOqwvFvfj-dhcUkM%2Fdata_binding.jpg?alt=media\&token=f6403f34-1943-43ff-952f-d09dbfc3a16b)

{% code title="child.component.ts" %}

```typescript
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  @Input() people: string[];
  @Input() total: number;
}
```

{% endcode %}

{% code title="parent.component.ts" %}

```typescript
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `<app-child [people]="people" total="123"></app-child>`,
  styles: []
})
export class ParentComponent {
    people: string[] = ['Bob', 'Mike', 'Jim'];
}
```

{% endcode %}

{% hint style="info" %}
The attribute name can be different than the variable name by passing a string name to the Input decorator: `Input("employees") people: string[];`
{% endhint %}

## Property bindings

Values are bound to a component with and without square brackets around the `Input` name in the template.&#x20;

When passing data to an `Input` property that is declared in the template no square brackets are required.

```typescript
<component name="angular"></component>
```

When passing data that's a property on the component or declared from the structural directive, it must be wrapped with square brackets.

```typescript
<component [name]="names.angular"></component>
```

## DOM Element Properties

DOM Element properties can be set to variables using bracket notation.

{% embed url="<https://stackblitz.com/edit/angular-fundamentals-ad2019-6?file=src%2Fapp%2Fmy%2Fmy.component.ts&view=editor>" %}

## Summary

* Interpolation
* Passing values to a component
* Setting DOM Element properties