Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Як передавати стан між батьківським і дочірнім компонентом?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)Стан між батьком і дочірнім компонентом передається через **@Input** і **@Output** - це стандартний механізм зв'язку в Angular. **Ключове:** @Input дає значення, @Output отримує реакцію, а shared-сервіс потрібен, коли треба розділити стан між кількома рівнями дерева компонентів.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняСтан між батьком і дочірнім компонентом передається через **@Input** і **@Output** - це стандартний механізм зв'язку в Angular. --- ### 1. Передавання *вниз* - через `@Input` Батько дає дані дочірньому: ```ts // батьківський шаблон <app-child [count]="parentCount"></app-child> ``` ```ts // у дочірньому компоненті @Input() count!: number; ``` --- ### 2. Передавання *вгору* - через `@Output` і `EventEmitter` Дочірній компонент повідомляє батька про зміни: ```ts // у дочірньому компоненті @Output() increment = new EventEmitter<void>(); someMethod() { this.increment.emit(); } ``` ```html <!-- батько підписується на подію --> <app-child (increment)="handleIncrement()"></app-child> ``` --- ### 3. Альтернатива - shared-сервіс Якщо компоненти складно пов'язані напряму (або перебувають глибше в ієрархії), можна використати спільний сервіс із `signal`, `BehaviorSubject` або `store`. --- **Висновок:** - *@Input* - щоб **дати значення** - *@Output* - щоб **отримати реакцію** - shared-сервіс - якщо потрібно **розділити стан між кількома рівнями або гілками** дерева компонентів.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.