Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке шаблонна прив'язка (template binding)?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Шаблонна прив'язка (template binding)** в Angular - механізм, за допомогою якого дані з компонента зв'язуються з HTML-шаблоном і навпаки: динамічне відображення даних, реакція на події та керування властивостями елементів. **Ключове:** шаблонна прив'язка - це засіб зв'язку моделі компонента та інтерфейсу, який робить відображення динамічним та інтерактивним.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняВ Angular **шаблонна прив'язка (template binding)** - це механізм, за допомогою якого **дані з компонента зв'язуються з HTML-шаблоном** і навпаки. Вона дозволяє динамічно відображати дані, реагувати на події та керувати властивостями елементів. ## Основні види шаблонної прив'язки 1. **Інтерполяція (**`{{ }}`**)** - вставка значення властивості компонента в текст шаблону. ```html <p>{{ username }}</p> ``` Значення `username` з компонента підставляється в `<p>`. 2. **Прив'язка властивостей (**`[property]`**)** - зв'язує властивість DOM-елемента або компонента з виразом. ```html <img [src]="userPhotoUrl"> ``` Значення `userPhotoUrl` з компонента призначається атрибуту `src`. 3. **Прив'язка подій (**`(event)`**)** - зв'язує подію DOM з методом компонента. ```html <button (click)="submitForm()">Надіслати</button> ``` Метод `submitForm()` викликається при кліку на кнопку. 4. **Двостороння прив'язка (**`[(ngModel)]`**)** - об'єднує прив'язку властивості та події для синхронізації даних. ```html <input [(ngModel)]="userName"> ``` Будь-яка зміна в `input` одразу відображається в `userName` і навпаки. Тобто шаблонна прив'язка - це **засіб зв'язку моделі компонента та інтерфейсу**, який робить відображення динамічним та інтерактивним.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.