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

Data Binding

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

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

header.component.html

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

header.component.ts

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

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

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

header.component.html

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

header.component.ts

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

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

header.component.html

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

header.component.ts

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

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

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

header.component.html

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

header.component.ts

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

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

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

header.component.html

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

header.component.ts

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');
  }
}

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

header.component.html

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

header.component.ts

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);
  }
}

Завдання.

• Додаємо title і subTitle в компоненту header.component.

• Додаємо стилі для компоненти header.component.

header.component.html

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

header.component.ts

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() {
  }
}

header.component.css

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

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

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

• Створити компоненту footer.

• Написати стилі:

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