У цьому матеріалі порівнюються два підходи до використання властивостей input у Angular: традиційний декоратор @Input() і новий підхід з використанням input signal.

У традиційному підході ми використовуємо декоратор @Input() для передачі значень між компонентами. Це дозволяє легко змінювати значення властивості програми:

ts
@Input() myInputProp: boolean = false;

performUpdate() {
this.myInputProp = true;
}

В той час як у новому підході, який використовує input signal, зміна значення програми вже не відбувається так легко:

ts
myInputProp = input(false);

performUpdate() {
// немає методу для оновлення значення сигналу myInputProp
// це не writable сигнал (тільки для читання всередині компонента)
}

Це … Читати далі

У об'єктно-орієнтованому програмуванні (OOP) композиція та наслідування — це важливі концепції. В Angular композиція часто застосовується, коли інжектуються сервіси в компоненти, що обробляють запити до API або кешування. Однак наслідування також є популярним, особливо коли потрібно розширити базові компоненти, такі як BaseComponent. Проблема може виникнути, коли базовий компонент містить логіку для роботи з формами, що змушує дочірні компоненти успадковувати її, навіть якщо вони лише відображають дані. Це може призвести до сильно зв'язаних компонентів. Тому важливо тримати базові компоненти простими і мінімалістичними.

Наприклад, BaseComponent може виглядати наступним чином:

// src/app/shared/component/base.component.ts  
@Component({  
 selector: '',  
 template: '',  
 changeDetection: ChangeDetectionStrategy.OnPush  
})  
export class 

Angular 19 приносить значні покращення та нові функції, які роблять розробку сучасних веб-застосунків швидшою та інтуїтивно зрозумілою. Це оновлення особливо корисне для тих, хто хоче створювати високопродуктивні застосунки, адже воно надає розробникам нові інструменти для побудови швидких і ефективних рішень.

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

Однією з головних новинок є автономні компоненти. В Angular 19 більше не потрібно використовувати модулі для створення компонентів. Це спрощує розробку та знижує складність … Читати далі

Angular 19 приносить численні удосконалення, що роблять розробку сучасних веб-застосунків більш ефективною та інтуїтивно зрозумілою. Це оновлення включає потужні інструменти для розробників, що дозволяють створювати високопродуктивні програми. У статті розглядаються основні концепції та кращі практики Angular 19, включаючи архітектуру Angular, прив'язку даних, директиви, ін'єкцію залежностей і використання Angular CLI.

Архітектура Angular 19

Архітектура Angular 19 побудована для полегшення створення масштабованих, модульних застосунків. Вона базується на таких ключових концепціях, як компоненти, модулі, шаблони, метадані та сервіси.

Компоненти

Компоненти є основними будівельними блоками застосунків в Angular. Кожен компонент складається з шаблону, класу та метаданих, які визначають його вигляд, логіку та конфігурацію.

Модулі

Angular 19 представив низку потужних функцій, орієнтованих на поліпшення продуктивності, модульності та зручності для розробників. Розуміння цих можливостей є ключовим для створення ефективних веб-застосунків. Серед головних нововведень — автономні компоненти, Signal API, підтримка TypeScript 5.0 та вдосконалені методи lazy loading.

Однією з найцікавіших новинок у Angular 19 є автономні компоненти. Вони дозволяють розробникам створювати компоненти без необхідності включати їх у модулі Angular, що значно спрощує структуру проекту та робить код більш зручним для підтримки. Такі компоненти можуть бути використані для створення легких, багаторазових елементів, зменшуючи накладні витрати, покращуючи модульність та знижуючи розмір бандла.

Завдяки новому Signal API, Angular 19 значно … Читати далі

У цьому прикладі розглядається ситуація, яка часто зустрічається в багатьох додатках, де є два різні, але пов'язані набори даних, які потрібно отримати з різних API та відобразити разом. Важливо, що відображення цих даних повинно бути таким, щоб зв'язок між ними був чітко видимий.

Наприклад, потрібно відобразити основні дані 10 користувачів у таблиці. Ці дані доступні через фіктивний API, а також необхідно показати задачі (ToDos), створені кожним користувачем. Деталі задач доступні через інший API.

Ми створили інтерфейс UserModel для моделювання даних користувачів, що виглядає так:

export interface UserModel {
id: number,
name: string,
username: string,
email: string,
address: AddressModel,
phone: string,… Читати далі

Valibot — це популярна бібліотека для TypeScript, яка дозволяє створювати схеми з відкритим кодом. Тепер Kitbag Router підтримує використання Valibot для перевірки ваших параметрів маршруту!

import * as v from 'valibot'
import { createRoute, withParams } from "@kitbag/router"

const route = createRoute({
name: "user",
path: withParams("/users/[id]", {
id: v.pipe(v.string(), v.uuid())
})
})

З цим параметром Kitbag Router не тільки перевіряє, що після "user/" йде значення типу рядок, але й перевіряє відповідність схемі Valibot для uuid.

❌ users/123
❌ users/9491d71031854e06bea06a2f275345e0
✅ users/9491d710–3185–4e06-bea0–6a2f275345e0

Підтримувані схеми

✅ boolean
✅ date
✅ number
✅ literal
✅ object
✅ enum
✅ array
✅ tuple
✅ … Читати далі

У світі фронтенд-розробки вибір між різними JavaScript бібліотеками та фреймворками може визначити успіх вашого проєкту. ReactJS, AngularJS і VueJS є одними з найпопулярніших інструментів, кожен з яких має свої особливості та підходи. Розглянемо їх детальніше, щоб зрозуміти, який з них найкраще підходить для вашого проєкту.

ReactJS

React — це бібліотека, створена компанією Facebook (тепер Meta) для створення інтерфейсів користувача, що орієнтуються на компоненти. Вона дає розробникам гнучкість у виборі інструментів і підходів для розробки, оскільки забезпечує лише частину функціоналу — UI, а все інше, наприклад, маршрутизацію чи керування станом, можна додавати окремо. React має велику спільноту та безліч сторонніх … Читати далі

TinyMCE — це потужний редактор тексту, який широко використовується в веб-застосунках. У WordPress він інтегрований за замовчуванням, але іноді виникає потреба в його налаштуванні або розширенні функціональності відповідно до конкретних вимог проекту. У цьому пості я поділюся своїм досвідом налаштування TinyMCE в плагіні для WordPress, використовуючи Vue.js для змін, замість того щоб залежати від бекенду WordPress.

Спочатку я переконався, що TinyMCE вже підключений на сайті WordPress. Оскільки я не встановлював його через npm, я додав скрипт TinyMCE вручну, використовуючи функцію wp_enqueue_script() WordPress.

Цей крок гарантує, що TinyMCE буде завантажено кожного разу, коли користувач відкриває адмін-панель WordPress, і він буде доступний … Читати далі

Квітень 2025 — команда React Native випустила версію 0.79, яка покращує продуктивність, оновлює інструменти та вдосконалює робочі процеси для розробників. Оновлення містять важливі зміни, які полегшують розробку кросплатформенних додатків для iOS, Android та інших платформ. У цій статті розглянемо основні нововведення.

📁 Крок 1: Створення файлу .gitlab-ci.yml

Перший крок — створення файлу .gitlab-ci.yml у корені вашого Node.js проекту. Це конфігураційний файл для CI/CD pipeline, в якому визначаються етапи тестування та деплою.

🔐 Крок 2: Додавання змінних середовища

Створіть змінну в GitLab CI/CD з ім'ям ENV_FILE_CONTENT, в яку збережіть вміст вашого .env файлу. Це допоможе відновити цей файл у вашому … Читати далі