# Основи Angular (Angular)

> Components, templates, data binding, структурні директиви, ngFor, ngIf, інтерполяція, property binding, event binding

- 20 питань зі співбесід
- Junior
- [Питання зі співбесід: Angular](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy.md)

## 1. Що таке component в Angular?

**Відповідь**

Component — це фундаментальний будівельний блок Angular-застосунку, який контролює частину інтерфейсу користувача. Він поєднує HTML-шаблон, CSS-стилі та клас TypeScript з декоратором @Component. Ця архітектура дозволяє створювати багаторазові та модульні інтерфейси, сприяючи розподілу відповідальності між поданням і бізнес-логікою.

## 2. Який синтаксис відображає змінну TypeScript у шаблоні?

**Відповідь**

Інтерполяція з подвійними фігурними дужками {{ variable }} вставляє динамічні значення в HTML-шаблон. Angular обчислює вираз TypeScript і перетворює результат на рядок, який відображається в DOM. Цей синтаксис використовується для відображення властивостей component, виконання простих обчислень або виклику методів, що повертають значення.

## 3. Як прив'язати HTML-властивість до змінної component?

**Відповідь**

Property binding з квадратними дужками [property]="variable" прив'язує властивість DOM-елемента до виразу TypeScript. Angular обчислює вираз і автоматично оновлює властивість при зміні. Цей синтаксис є односпрямованим (від component до template) і застосовується до стандартних HTML-атрибутів, користувацьких властивостей або входів дочірніх components.

## Ще 17 доступних питань

- Який синтаксис захоплює користувацьку подію в шаблоні?
- Що робить директива *ngIf у шаблоні Angular?

Зареєструйся безкоштовно: https://sharpskill.dev/uk/login

## Інші теми співбесід Angular

- [Основи TypeScript](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/typescript-basics.md): 25 запитань, Junior
- [TypeScript просунутий](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/typescript-advanced.md): 20 запитань, Junior
- [Компоненти та життєвий цикл](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/components-lifecycle.md): 20 запитань, Junior
- [Services & Dependency Injection](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/services-dependency-injection.md): 20 запитань, Junior
- [Організація модулів Angular](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/modules-organization.md): 22 запитань, Mid-Level
- [Angular CLI](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/angular-cli.md): 18 запитань, Junior
- [Директиви та Pipe](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/directives-pipes.md): 22 запитань, Mid-Level
- [Маршрутизація та навігація](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/routing-navigation.md): 24 запитань, Mid-Level
- [Реактивні форми](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/forms-reactive.md): 26 запитань, Mid-Level
- [Template-driven форми](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/forms-template-driven.md): 16 запитань, Mid-Level
- [Основи RxJS](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/rxjs-fundamentals.md): 22 запитань, Mid-Level
- [Оператори RxJS](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/rxjs-operators.md): 24 запитань, Mid-Level
- [HttpClient і виклики API](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/http-client.md): 22 запитань, Mid-Level
- [Базове керування станом](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/state-management-basics.md): 20 запитань, Mid-Level
- [Change Detection](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/change-detection.md): 20 запитань, Mid-Level
- [Angular Signals](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/angular-signals.md): 20 запитань, Mid-Level
- [Standalone Components](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/standalone-components.md): 18 запитань, Mid-Level
- [Модульні тести в Angular](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/testing-unit.md): 22 запитань, Mid-Level
- [End-to-End тестування](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/testing-e2e.md): 18 запитань, Mid-Level
- [Build і оптимізація](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/build-optimization.md): 20 запитань, Mid-Level
- [Основи NgRx](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/ngrx-fundamentals.md): 24 запитань, Senior
- [Просунутий NgRx](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/ngrx-advanced.md): 24 запитань, Senior
- [Архітектура Angular](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/angular-architecture.md): 22 запитань, Senior
- [Оптимізація продуктивності](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/performance-optimization.md): 22 запитань, Senior
- [Безпека та найкращі практики](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/security-best-practices.md): 20 запитань, Senior
- [Просунуті патерни RxJS](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/advanced-rxjs-patterns.md): 22 запитань, Senior
- [Angular Universal та SSR](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/angular-universal-ssr.md): 20 запитань, Senior
- [Angular Micro-frontends](https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/micro-frontends-angular.md): 20 запитань, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/uk/technologies/angular/pytannia-spivbesidy/angular-fundamentals