Ось готовий урок, згенерований за твоїм майстер-промптом. Це класичний стиль CS50: енергійно, з прикладами, без зайвої води, але з глибоким розумінням суті.

🎓 Урок: Angular Material — Базові компоненти

(CS50 Style Edition)

Привіт, світе! 👋 Ласкаво просимо на урок.

Сьогодні ми перестанемо "винаходити велосипед" і навчимося будувати інтерфейси так, як це роблять у Google.

1. 🔥 Вступ: проблема та мотивація

Уявіть ситуацію: ви будуєте будинок. Стіни готові, дах є. Тепер потрібні двері.

У вас є два шляхи: 1. Шлях ремісника: Піти в ліс, зрубати дерево, обробити дошки, викувати завіси, вирізати ручку, пофарбувати... Це займе тиждень. І, чесно кажучи, двері можуть скрипіти або не зачинятися щільно. 2. Шлях архітектора: Піти в будівельний гіпермаркет, купити готові, ідеально підігнані двері з гарантією якості, і встановити їх за годину.

А тепер перенесімося в код. Ваш замовник каже: "Мені потрібна гарна форма входу на сайт".

Ви можете писати 200 рядків CSS, налаштовувати тіні, анімацію натискання, стани hover, focus, active, перевіряти контрастність кольорів для людей з вадами зору... Або ви можете взяти Angular Material.

Питання до вас: Чи має сенс витрачати 3 дні на створення кнопки, яка виглядає "нормально", якщо можна за 3 секунди отримати кнопку, яка виглядає ідеально і працює на всіх пристроях?

В цьому і суть Angular Material. Це — ваш будівельний гіпермаркет для Angular-додатків. Це набір готових "цеглинок" (компонентів), які створені Google за принципами Material Design.

2. 🧠 Теоретична база (Що там "під капотом"?)

Перш ніж писати код, давайте зрозуміємо логіку. Angular Material — це не просто CSS-файл (як Bootstrap). Це розумні компоненти.

Що таке компонент Material?

Це капсула, яка містить три речі: 1. HTML: Структура (скелет). 2. CSS/SCSS: Стилі (шкіра) — тіні, відступи, кольори. 3. TypeScript: Логіка (м'язи) — анімації, реакція на натискання, доступність (Accessibility).

🔑 Головна концепція: Модульність (LEGO)

В Angular Material ви ніколи не імпортуєте "все відразу". Чому? Тому що це зробило б ваш додаток величезним і повільним.

Ви дієте як розумний мандрівник, що пакує валізу: берете тільки те, що потрібно. * Потрібна кнопка? Імпортуєте MatButtonModule. * Потрібна картка? Імпортуєте MatCardModule. * Потрібне поле вводу? Імпортуєте MatInputModule.

Запам’ятайте: Якщо ви використовуєте компонент у шаблоні (<mat-button>), але забули імпортувати його модуль у app.module.ts (або в imports вашого standalone компонента), Angular скаже: "Я не знаю, що це таке".

3. 🧪 Приклади (Coding Time)

Припустимо, ми вже встановили бібліотеку командою ng add @angular/material.

Приклад 1: Кнопка (Button)

Давайте створимо кнопку.

Очікування: Що ми зазвичай пишемо в HTML? <button>Click me</button> — виглядає нудно, сіро, як Windows 95.

Реальність з Material:

Спочатку імпортуємо модуль:

import { MatButtonModule } from '@angular/material/button';
// Додаємо в imports: [MatButtonModule]

А тепер шаблон:

<button mat-button>Basic</button>
<button mat-raised-button color="primary">Primary</button>

Що тут відбулося? Ми використали стандартний тег <button>, але додали до нього директиву mat-raised-button. Angular "побачив" цю директиву і миттєво навісив на кнопку правильні класи, стилі, ефект хвиль (ripple effect) при натисканні. Магія? Ні, це Інженерія.

Приклад 2: Картка (Card)

Тепер реальніша задача. Потрібно відобразити профіль користувача. Це класичний UI-патерн: фото, заголовок, текст, кнопки дій.

Код:

import { MatCardModule } from '@angular/material/card';

<mat-card class="user-card">
  <mat-card-header>
    <mat-card-title>David Malan</mat-card-title>
    <mat-card-subtitle>Harvard University</mat-card-subtitle>
  </mat-card-header>

  <img mat-card-image src="david.jpg" alt="Photo of David">

  <mat-card-content>
    <p>Викладач курсу CS50. Любить червоні футболки.</p>
  </mat-card-content>

  <mat-card-actions>
    <button mat-button>LIKE</button>
    <button mat-button>SHARE</button>
  </mat-card-actions>
</mat-card>

Аналіз: Бачите структуру? Вона семантична. * mat-card-header — шапка. * mat-card-content — тіло. * mat-card-actions — кнопки внизу. Angular Material сам виставить правильні відступи між заголовком і текстом, вирівняє кнопки праворуч або ліворуч (залежно від налаштувань). Вам не треба міряти пікселі лінійкою.

Приклад 3: Поле вводу (Input) — Найскладніше

Поля вводу в Material Design дуже хитрі. У них "плаваючий" лейбл (floating label), підсвітка при фокусі, відображення помилок.

Як це працює? Потрібна "обгортка" (wrapper), яка контролює простір навколо інпуту. Вона називається <mat-form-field>.

import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
// Потрібні ОБИДВА модулі!

<mat-form-field appearance="fill">
  <mat-label>Введіть ваш email</mat-label>
  <input matInput placeholder="patron@dog.com">
  <mat-hint>Ми нікому не скажемо</mat-hint>
</mat-form-field>

Чому так складно? Тому що mat-form-field — це контейнер, який малює рамку, анімує лейбл вгору, коли ви клікаєте, і резервує місце під інпутом для підказки (mat-hint) або помилки (mat-error). Це забезпечує стабільність верстки — інтерфейс не "стрибає", коли з'являється текст помилки.

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

Час забруднити руки кодом! Виконайте ці завдання:

🔹 Hello Material: Створіть новий компонент. Додайте в нього три кнопки (mat-raised-button): одна з кольором primary, друга accent, третя warn.
- Мета: Навчитися підключати модулі та використовувати палітру кольорів.
🔹 Картка товару: Створіть картку (mat-card) для інтернет-магазину. Вона має містити:
- Назву товару.
- Фото.
- Ціну (у контенті).
- Кнопку "Купити" (у діях).
🔹 Форма реєстрації: Зробіть просту форму з двома полями: "Логін" та "Пароль".
- Використовуйте <mat-form-field>.
- Для поля пароля додайте атрибут type="password" у тег input.
- Челендж: Спробуйте змінити appearance у form-field на outline. Як змінився вигляд?
🔹 Дебаггінг (А що, якщо...):
- Спробуйте використати <mat-slider>, НЕ імпортуючи MatSliderModule.
- Відкрийте консоль розробника (F12) у браузері.
- Знайдіть помилку. Запам’ятайте, як вона виглядає. Це ваш найкращий друг на майбутнє: "Template parse errors: 'mat-slider' is not a known element".
🔹 Міні-кейс: Уявіть, що ви робите "Список справ" (To-Do List). Зверстайте один рядок списку, використовуючи mat-checkbox (вам знадобиться MatCheckboxModule) та текст завдання поруч.

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

Як відрізнити новачка від профі, коли вони працюють з Angular Material?

❌ Новачок: * Намагається переписати стилі Material своїм CSS. Пише купу !important, щоб змінити колір кнопки. * Імпортує модулі, які не використовує. * Копіює код зі StackOverflow, не розуміючи, навіщо потрібен mat-form-field.

✅ Профі (Senior/Lead): * Читає API. Заходить на material.angular.io, відкриває вкладку "API" конкретного компонента і дивиться, які є властивості (Inputs). Може, колір можна змінити пропсом color="accent", і CSS писати не треба? * Використовує темізацію. Якщо треба змінити кольори глобально, він налаштовує тему (SCSS theme), а не перефарбовує кожну кнопку окремо. * Думає про UX. Використовує стандартні компоненти, бо користувачі до них звикли.

Порада дня: Не боріться з фреймворком. Якщо Angular Material щось робить певним чином (наприклад, анімацію input), то, ймовірно, за цим стоять сотні годин досліджень UX-дизайнерів Google. Довіртеся їм.

6. 🧩 Підсумок

Отже, що ми сьогодні зробили? 1. Зрозуміли, що Angular Material — це набір готових, професійних інструментів. 2. Навчилися принципу LEGO: імпортуй модуль -> використовуй компонент. 3. Створили кнопки, картки та розумні поля вводу. 4. Зрозуміли, що UI — це не тільки краса, а й логіка та доступність.

Тепер ви можете зібрати інтерфейс, який виглядає на мільйон доларів, за один вечір.

🔜 Тизер: Але що, якщо користувач натискає кнопку, і нам треба показати йому спливаюче вікно з попередженням "Ви впевнені?" або таблицю з даними на 1000 рядків? На наступному уроці ми розберемо Dialogs (Модальні вікна) та потужні Data Tables. Це буде вже вищий пілотаж.

А поки — практикуйтеся! Це був CS50... тобто, Angular Material Basics. Побачимось! 💻