Типы привязки данных в Angular

В этой статье мы изучим различные типы привязки данных и синтаксис привязки в Angular.

Что такое привязка данных?

Привязка данных автоматически поддерживает страницу в актуальном состоянии на основе состояния вашего приложения. Вы используете привязку данных, чтобы указать такие вещи, как источник изображения, состояние кнопки или данные для конкретного пользователя.

Типы привязки данных :

Angular предоставляет три категории привязки данных в зависимости от направления потока данных:

• От источника к представлению
• От представления к источнику
• В двусторонней последовательности от представления к источнику к представлению

Интерполяция

Интерполяция - это вставка выражений в размеченный текст. По умолчанию интерполяция использует двойные фигурные скобки {{ }} в качестве разделителей.

Давайте посмотрим, как реализовать это в Angular.

<!--  file: server.component.html   -->

<p>{{ "Server" }} with id {{ server_id }} is {{ getServerStatus() }}.</p>

// file : server.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-server',
  templateUrl: './server.component.html',
  styleUrls: ['./server.component.css'],
})
export class ServerComponent {
  server_id: number = 10;
  server_status: string = 'online';
  getServerStatus() {
    return this.server_status;
  }
}

Привязка свойств

Angular помогает задавать значения для свойств HTML-элементов или директив. Чтобы привязать свойство элемента, заключите его в квадратные скобки [], что идентифицирует свойство как целевое.

Давайте посмотрим, как реализовать это в Angular.

<!--  file: servers.component.html   -->

<button class = "btn btn-primary" [disabled] = "!allowNewServer">
  Demo Button
</button>

// file : servers.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-servers',
  templateUrl: './servers.component.html',
  styleUrls: ['./servers.component.css'],
})
export class ServersComponent {
  allowNewServer: boolean = false;
  constructor() {
    setTimeout(() => {
      this.allowNewServer = true;
    }, 3000);
  }
}

После инициализации компонента нам нужно подождать 3 секунды, после чего кнопка будет активирована.Привязка свойств в

Привязка событий

Привязка событий позволяет прослушивать и реагировать на действия пользователя, такие как нажатие клавиш, движение мыши, щелчки и прикосновения. Синтаксис состоит из имени целевого события в круглых скобках, т.е. () слева от знака равенства, и кавычек шаблона справа.

Давайте посмотрим, как реализовать это в Angular.

<!--  file: servers.component.html   -->

<button class = "btn btn-success" (click) = "onCreateServer()">Add Server</button>
<p>{{ serverCreationStatus }}</p>

// file : servers.component.ts

...
serverCreationStatus: string = 'No new server created!';
onCreateServer() {
    this.serverCreationStatus = 'Server Created successfully!';
  }

Когда мы нажимаем на кнопку, текст изменяется.

Двустороннее связывание

Двустороннее связывание данных относится к обмену данными между классом компонента и его шаблоном. Если вы измените данные в одном месте, они автоматически вернутся на другой конец. Например, если вы измените значение поля ввода, то оно также обновит значение вложенного свойства в классе компонента.

Давайте посмотрим, как реализовать это в Angular.

<!--  file: servers.component.html   -->

<h4>Two Way Binding</h4>
<pre>{{ user | json }}</pre>
<input
  type = "text"
  class = "form-control"
  [(ngModel)] = "user.name"
  placeholder = "name"
/>
<br />
<input
  type = "text"
  class = "form-control"
  [(ngModel)] = "user.job"
  placeholder = "job"
/>

// file : servers.component.ts

...
user = {
    name: 'Anirban',
    job: 'Dev',
  };

Если мы изменяем данные в поле ввода, то одновременно изменяются и выходные данные.

Ура!