# 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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://briebug.gitbook.io/angular-fundamentals/data-binding.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.