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

Привязка свойств (Property binding) в Angular позволяет устанавливать значения для свойств HTML-элементов, компонентов Angular и многого другого.

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

В этом упражнении вы узнаете, как использовать привязку свойств в шаблонах.

Чтобы выполнить привязку к атрибуту элемента, заключите имя атрибута в квадратные скобки. Вот пример:

<img alt="photo" [src]="imageURL" />

В этом примере значение атрибута src будет привязано к свойству класса imageURL. Какое бы значение ни имело свойство imageURL, оно будет установлено в качестве атрибута src тега img.

1. Add a property called isEditable

   Обновите код в app.ts, добавив в класс App свойство isEditable с начальным значением true.

   export class App {
     isEditable = true;
   }

2. Bind to contentEditable

   Далее привяжите атрибут contentEditable элемента div к свойству isEditable, используя синтаксис [].

   @Component({
     ...
     template: `<div [contentEditable]="isEditable"></div>`,
   })

Теперь div стал редактируемым. Отличная работа 👍

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