> For the complete documentation index, see [llms.txt](https://koziuk-s.gitbook.io/angular-starter/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://koziuk-s.gitbook.io/angular-starter/angular-components/privyazka-danikh.md).

# Прив'язка Даних

Data Binding

В Angular є механізм прив'язки даних (Data Binding), з допомогою якого, ми можемо зв'язати деякі значення в файлах HTML і TS.

Прив'язка DOM елемента до значення компонента (одностороння).

{% code title="header.component.html" overflow="wrap" lineNumbers="true" %}

```markup
<h1>Welcome {{name}}!</h1>
```

{% endcode %}

{% code title="header.component.ts" overflow="wrap" lineNumbers="true" %}

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  name = 'Angular';
  
  constructor() {
  }
}
```

{% endcode %}

Прив'язка властивості HTML елемента до значення компонента (одностороння).

{% code title="header.component.html" overflow="wrap" lineNumbers="true" %}

```markup
<p [innerHTML]="subName"></p>
```

{% endcode %}

{% code title="header.component.ts" overflow="wrap" lineNumbers="true" %}

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  subName = 'Education';
  
  constructor() {
  }
}
```

{% endcode %}

{% code title="header.component.html" overflow="wrap" lineNumbers="true" %}

```markup
<button [disabled]="isDisabled">LogIn</button>
```

{% endcode %}

{% code title="header.component.ts" overflow="wrap" lineNumbers="true" %}

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  isDisabled = true;
  
  constructor() {
  }
}
```

{% endcode %}

Також можна використати результат функції.

{% code title="header.component.html" overflow="wrap" lineNumbers="true" %}

```markup
<button [disabled]="getStatus()">LogIn</button>
```

{% endcode %}

{% code title="header.component.ts" overflow="wrap" lineNumbers="true" %}

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor() {
  }
  
  getStatus() {
    return true;
  }
}
```

{% endcode %}

Прив'язка подій.

{% code title="header.component.html" overflow="wrap" lineNumbers="true" %}

```markup
<button (click)="logIn()">LogIn</button>
```

{% endcode %}

{% code title="header.component.ts" overflow="wrap" lineNumbers="true" %}

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor() {
  }
  
  logIn() {
    console.log('login');
  }
}
```

{% endcode %}

При виникненні події в фукцію ми можемо передати **$event** (подію що відбулася).

{% code title="header.component.html" overflow="wrap" lineNumbers="true" %}

```markup
<button (click)="logIn($event)">LogIn</button>
```

{% endcode %}

{% code title="header.component.ts" overflow="wrap" lineNumbers="true" %}

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor() {
  }
  
  logIn(event) {
    console.log('event - ', event);
  }
}
```

{% endcode %}

## Завдання.

* Додаємо **title** і **subTitle** в компоненту **header.component.**
* Додаємо стилі для компоненти **header.component.**

{% tabs %}
{% tab title="header.component.html" %}
{% code overflow="wrap" lineNumbers="true" %}

```markup
<header class="app-header">
  <h1>{{title}}</h1>
  <p [innerHTML]="subTitle"></p>
</header>
```

{% endcode %}
{% endtab %}

{% tab title="header.component.ts" %}
{% code overflow="wrap" lineNumbers="true" %}

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

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
  title = 'Angular 2Do';
  subTitle= 'Educational Angular project.';

  constructor() {
  }

  ngOnInit() {
  }
}

```

{% endcode %}
{% endtab %}

{% tab title="header.component.css" %}
{% code overflow="wrap" lineNumbers="true" %}

```css
.app-header {
  padding: 40px 15px;
  background-color: #338add;
  text-align: center;
  color: #fff;
}

.app-header p {
  margin-bottom: 0;
}
```

{% endcode %}
{% endtab %}
{% endtabs %}

## Самостійна робота.

* Створити компоненту **footer**.
* Написати стилі:
  * footer завжди має бути притиснутим до низу сторінки. Якщо контент не помішається на сторінку, з'являється праворуч скрол і контент повинен штовхати footer в низ.