Ось готовий урок, створений спеціально для тебе у стилі David Malan. Вмикай свою внутрішню енергію, налий чашку кави (або води, важливо пити воду!) і поїхали! 🚀

🎓 Урок: Магія спілкування: Interpolation, Property Binding та Event Binding

Привіт, світе! 👋 Радий бачити вас на цьому занятті.

Сьогодні ми розберемо фундамент, на якому тримається весь Angular (та й більшість сучасних UI-фреймворків). Ми навчимося оживляти наш інтерфейс.

1. 🔥 Вступ: Проблема «німої» сторінки

Уявіть, що ви прийшли на стадіон дивитися футбольний матч. Ви дивитесь на велике електронне табло. Рахунок змінився, але... табло показує старі цифри. Працівник стадіону біжить з драбиною і фарбою, щоб замалювати стару цифру і намалювати нову.

Смішно? Абсурдно? Але саме так працює чистий HTML!

HTML — це просто статична картинка. Він «німий». Якщо ви написали <h1>Привіт, Ганно!</h1>, він завжди вітатиме Ганну. А якщо зайде Петро? А якщо Оля? Нам потрібно переписувати HTML вручну?

Риторичне питання: Хіба ми для цього вчимо програмування? Щоб робити ручну роботу? Звісно, ні!

Нам потрібен спосіб зв’язати наш "мозок" (JavaScript/TypeScript код) з нашим "обличчям" (HTML-шаблоном). Нам потрібно, щоб дані літали туди й сюди автоматично.

Сьогодні ми розберемо три кити цього зв’язку: 1. Interpolation (Інтерполяція) 2. Property Binding (Зв’язування властивостей) 3. Event Binding (Зв’язування подій)

Без цього ваша веб-сторінка — це просто цифровий плакат на стіні. З цим — це живий організм.

2. 🧠 Теоретична база: Як це працює «під капотом»

Давайте спростимо все до неможливості. У нас є Клас (де живе логіка і дані) і Шаблон (HTML).

🔹 1. Interpolation {{ }}

Синтаксис: Подвійні фігурні дужки (вуса). Напрямок: Клас ➔ Шаблон.

Уявіть, що шаблон — це лист з пропущеними словами. Інтерполяція — це коли Angular бере значення змінної з класу і просто вставляє її як текст у ці пропуски.

Інтуїтивно: "Візьми це значення, перетвори на рядок і покажи людям."

🔹 2. Property Binding [ ]

Синтаксис: Квадратні дужки навколо атрибута HTML. Напрямок: Клас ➔ Шаблон.

Тут ми не просто вставляємо текст. Ми керуємо поведінкою елемента. Ми змінюємо його властивості: колір, посилання на картинку, активність кнопки.

Інтуїтивно: "Гей, кнопка! Твоя властивість disabled тепер залежить від цієї змінної isBlocked у моєму коді."

🔹 3. Event Binding ( )

Синтаксис: Круглі дужки навколо події. Напрямок: Шаблон ➔ Клас.

Це єдиний момент (поки що), коли ініціатива йде від користувача. Користувач клікає, друкує, наводить мишку — і ми запускаємо функцію в коді.

Інтуїтивно: "Коли станеться click (клік), зроби, будь ласка, те, що написано в методі saveData()."

3. 🧪 Приклади: Від простого до реального

Приклад 1: Інтерполяція (Текстовий вивід)

Давайте почнемо з привітання.

TypeScript (Клас):

userName = "Девід";

HTML (Шаблон):

<h1>Привіт, {{ userName }}!</h1>

❓ Що ми побачимо? Звісно: "Привіт, Девід!". Якщо в коді ми змінимо userName на "Марія", текст на екрані оновиться миттєво. Angular постійно слідкує за цим.

Приклад 2: Property Binding (Керування властивостями)

А тепер уявіть, що у нас є картинка профілю. Посилання на картинку приходить із сервера.

TypeScript:

avatarUrl = "https://example.com/me.jpg";
isLoading = true; // Дані ще завантажуються

HTML:

<!-- Правильно: використовуємо квадратні дужки -->
<img [src]="avatarUrl" alt="Аватар">

<!-- Керуємо кнопкою -->
<button [disabled]="isLoading">Зберегти</button>

🧐 Чому так? * [src] каже Angular: "Не читай цей рядок як текст. Знайди змінну avatarUrl і візьми її значення". * [disabled] перевіряє isLoading. Якщо true — кнопка неактивна. Якщо false — можна клікати.

Приклад 3: Event Binding (Реакція на дії)

Час для екшену! Давайте зробимо лічильник лайків.

TypeScript:

likes = 0;

addLike() {
    this.likes = this.likes + 1;
    console.log("Лайк поставлено!");
}

HTML:

<p>Кількість лайків: {{ likes }}</p>

<button (click)="addLike()">👍 Лайкнути</button>

Аналіз: 1. Ви натискаєте кнопку (click). 2. Angular смикає метод addLike(). 3. Змінна likes збільшується. 4. Angular бачить зміну і через інтерполяцію {{ likes }} оновлює число на екрані. Бум! Магія! 🪄

4. 🛠 Практична частина

Тепер ваша черга. Не бійтеся помилятися — компілятор не кусається (тільки червоним свариться).

Завдання 1. Візитка Створіть змінні firstName, lastName та position. Виведіть їх у шаблоні через інтерполяцію, щоб вийшло: "Іван Петренко — Senior Developer".

Завдання 2. Розумна картинка Знайдіть в інтернеті два посилання на картинки (день і ніч). Створіть змінну currentImage. Виведіть картинку через [src]. Спробуйте вручну змінити посилання в коді — картинка має змінитися.

Завдання 3. Кнопка-панікер Створіть метод scream(), який виводить у console.log текст "ААААА!!!". Прив'яжіть цей метод до події (mouseenter) (наведення мишки) на будь-який <div>.

Завдання 4. Вимикач світла (Mini-Case) * Змінна: isOn = false * Метод: toggleLight(), який змінює isOn на протилежне (!this.isOn). * HTML: Кнопка з текстом. * Якщо isOn true — текст кнопки "Вимкнути". * Якщо isOn false — текст кнопки "Увімкнути". * Підказка: Використовуйте тернарний оператор всередині інтерполяції {{ isOn ? '...' : '...' }}.

Завдання 5. Знайди помилку Студент написав такий код, але картинка не показується, а в консолі помилка. Чому?

<img src="{{ userAvatar }}">
<button disabled="isActive">Натисни мене</button>

(Подумайте про різницю між атрибутами HTML і властивостями Angular).

5. 💡 Мислення як у розробника

Як відрізнити новачка від профі?

❌ Помилка новачка: Намагатися запхати все в інтерполяцію: <img src="{{ imageLink }}"> Це іноді працює, але це погана практика для не-текстових атрибутів.

✅ Думка профі: Профі думає типами даних. * "Мені треба вивести рядок тексту?" 👉 {{ }} * "Мені треба змінити властивість (boolean, об'єкт, посилання)?" 👉 [ ] * "Я хочу реагувати на подію?" 👉 ( )

💡 Pro Tip: Існує правило запам'ятовування "Banana in a Box" — [()]. Це коли ми поєднуємо дужки (двостороннє зв'язування), але про це ми поговоримо пізніше. Поки запам'ятайте: * [] — дані вхідні (Input). * () — дані вихідні (Output).

6. 🧩 Підсумок

Отже, що ми сьогодні зробили? Ми навчилися будувати мости. * Міст від коду до екрану (Interpolation, Property Binding). * Міст від користувача до коду (Event Binding).

Тепер ви можете створити сторінку, яка не просто висить мертвим вантажем, а реагує, змінюється і живе!

Що далі? Зараз наші дані ходять окремими стежками: або туди, або сюди. А що, якщо ми хочемо вводити текст у поле, і щоб він миттєво оновлював змінну в коді без зайвих функцій?

Це називається Two-Way Binding (Двостороннє зв'язування). І це тема нашого наступного занурення.

А поки що — практикуйтесь, експериментуйте і не забувайте: код сам себе не напише! 😉

Побачимось на наступному уроці! 💻