Angular

Найпопулярніші запитання та відповіді на співбесіді з Angular

Основи Angular

1. Що таке Angular та які його ключові особливості?

Angular

• Angular — це сучасний фронтенд-фреймворк від Google для побудови SPA та масштабованих веб-додатків.

Ключові особливості Angular 20:

• Standalone Components — більше немає потреби у NgModules.

• Signals — новий реактивний підхід до роботи зі станом.

• Control flow (@if, @for, @switch) — нативний синтаксис замість *ngIf та *ngFor.

• DI (Dependency Injection) — гнучка система залежностей із підтримкою tree-shaking.

• Router API — сучасна маршрутизація без модулів, з lazy loading.

• TypeScript + строгі типи — безпечна розробка на TS.

• Оптимізований рендер — швидкий change detection, підготовка до zoneless архітектури.

Коротко: Angular — це full-fledged фреймворк із вбудованим DI, реактивністю через signals та сучасними standalone підходами, що дозволяють писати масштабовані додатки без зайвої складності

2. Поясни, що таке data-binding в Angular та які є його типи?

Angular

• Data-binding — це механізм синхронізації даних між компонентом і шаблоном.

Типи data-binding в Angular:

1. Interpolation — одностороннє відображення даних у HTML:

<p>{{ userName }}</p>

2. Property binding — передача значень у властивості DOM-елементів/компонентів:

<img [src]="avatarUrl" />

3. Event binding — реакція на події DOM:

<button (click)="onSave()">Save</button>

4. Two-way binding — синхронізація стану між шаблоном і компонентом ([(...)]):

<input [(ngModel)]="email" />

Коротко: в Angular доступні 4 основні типи зв’язування даних — interpolation, property binding, event binding, two-way binding.

3. Опиши архітектуру Angular-додатку.

Angular

• Архітектура Angular базується на компонентному підході з чітким розділенням відповідальностей.

Основні елементи:

• Компоненти (Standalone) — будівельні блоки UI, кожен має шаблон, стилі, логіку.

• Сервіси — бізнес-логіка, робота з API, збереження стану; надаються через DI.

• Signals — сучасний спосіб керування станом і реактивністю.

• Control flow (@if, @for, @switch) — керування відображенням у шаблонах.

• Router — маршрутизація між екранами без NgModules, з підтримкою lazy loading.

• Dependency Injection — інжекція залежностей з різними scope (root, component, environment).

4. Що таке компонент в Angular та як він використовується?

Angular

• Компонент — це основний будівельний блок Angular-додатку, що відповідає за частину UI та пов’язану з нею логіку.

Складається з:

• класу (логіка, стан),

• шаблону HTML,

• стилів,

• метаданих (selector, imports тощо).

Використання:

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-user-card',
  standalone: true,
  template: `
    <h3>{{ name() }}</h3>
    <button (click)="changeName()">Change</button>
  `
})
export class UserCardComponent {
  name = signal('Viktor');
  changeName() {
    this.name.set('Updated Name');
  }
}

У шаблоні іншого компонента можна підключити:

<app-user-card></app-user-card>

Коротко: Компонент = ізольований блок UI + логіка. В Angular він створюється як standalone, без NgModules.

5. Що таке директиви в Angular та які з них найчастіше використовуються?

Angular

• Директива — це інструкція для DOM-елемента або компонента, яка змінює його поведінку чи вигляд.

Типи директив:

• Structural (змінюють DOM):

  -@if (новий синтаксис замість *ngIf)

  • @for (новий синтаксис замість *ngFor)

  • @switch (альтернатива *ngSwitch)

• Attribute (змінюють властивості/стилі елемента):

  • ngClass

  • ngStyle

  • ngModel

• Custom directives — можна створювати свої для повторного використання логіки.

✅ Коротко: директиви в Angular = спосіб керувати DOM. Найчастіше — @if, @for, ngClass, ngStyle, ngModel.

6. Як створити сервіс в Angular і навіщо його використовують?

Angular

• Сервіс — це клас із бізнес-логікою або функціоналом, який не пов’язаний напряму з UI.

Використовується для:

• повторного використання коду,

• роботи з API,

• керування станом,

• інкапсуляції логіки поза компонентом.

Приклад:

import { Injectable, signal } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class UserService {
  userName = signal('Guest');

  setUser(name: string) {
    this.userName.set(name);
  }
}

Використання у компоненті:

import { Component, inject } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-header',
  standalone: true,
  template: `<h2>Welcome, {{ userService.userName() }}</h2>`
})
export class HeaderComponent {
  userService = inject(UserService);
}

Коротко: сервіс створюють через @Injectable, а використовують для бізнес-логіки та спільного стану між компонентами.

7. Поясни, що таке dependency injection (DI) в Angular.

Angular

• Dependency Injection (DI) — це механізм Angular, який автоматично створює та надає об’єкти (сервіси, токени) компонентам чи іншим сервісам замість ручного створення через new.

Навіщо:

• спрощує тестування (можна підмінити залежності mock-ами),

• забезпечує повторне використання сервісів,

• керує життєвим циклом об’єктів (singleton, scoped).

Приклад:

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class ApiService {
  getData() {
    return ['item1', 'item2'];
  }
}

Використання у компоненті:

import { Component, inject } from '@angular/core';
import { ApiService } from './api.service';

@Component({
  selector: 'app-list',
  standalone: true,
  template: `<li *ngFor="let item of data">{{ item }}</li>`
})
export class ListComponent {
  api = inject(ApiService);
  data = this.api.getData();
}

Коротко: DI в Angular = автоматичне надання залежностей (наприклад, сервісів) компонентам без new.

8. Що таке модуль в Angular і для чого він використовується?

Angular

• У попередніх версіях Angular (до 15) модулі (NgModule) були обов’язковими для структурування застосунку. В Angular 20 модулі більше не потрібні, оскільки з’явилися standalone components.

Проте модулі ще існують і можуть застосовуватись для:

• сумісності зі старим кодом,

• групування функціоналу (напр. Angular Material ще має модулі),

• поступової міграції на standalone API.

Приклад старого підходу:

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

Актуальний підхід (Angular 20, без модуля):

bootstrapApplication(AppComponent, {
  providers: []
});

Коротко: модулі в Angular зараз — це легасі-інструмент, який замінено на standalone компоненти. Їхня головна роль сьогодні — лише для підтримки старого коду чи бібліотек.

9. Як обробляти події в Angular?

Angular

• В Angular події обробляються через event binding, тобто підписку на подію DOM або кастомної події компонента.

Синтаксис:

<button (click)="onClick()">Click me</button>

У компоненті:

import { Component } from '@angular/core';

@Component({
  selector: 'app-button',
  standalone: true,
  template: `<button (click)="onClick()">Click me</button>`,
})
export class ButtonComponent {
  onClick() {
    console.log('Button clicked!');
  }
}

Кастомна подія (для дочірнього компонента):

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-child',
  standalone: true,
  template: `<button (click)="notifyParent()">Notify</button>`
})
export class ChildComponent {
  @Output() notify = new EventEmitter<string>();
  notifyParent() {
    this.notify.emit('Hello from child');
  }
}

У батьківському компоненті:

<app-child (notify)="onNotify($event)"></app-child>

Коротко: в Angular події обробляються через (eventName)="handler()" для DOM та через @Output + EventEmitter для кастомних подій.

10. Що таке двостороннє зв’язування (two-way binding) і як його реалізувати в Angular?

Angular

• Двостороннє зв’язування — це синхронізація стану між компонентом і шаблоном, коли зміни в UI автоматично оновлюють дані компонента і навпаки.

Класичний підхід (з ngModel):

<input [(ngModel)]="name" />
<p>Hello, {{ name }}</p>

import { Component } from '@angular/core';

@Component({
  selector: 'app-input',
  standalone: true,
  template: `<input [(ngModel)]="name" />`
})
export class InputComponent {
  name = 'Viktor';
}

Сучасний Angular 20 з signals:

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-input',
  standalone: true,
  template: `<input [value]="name()" (input)="name.set($any($event.target).value)" />`
})
export class InputComponent {
  name = signal('Viktor');
}

Коротко: two-way binding = синхронізація стану між UI та компонентом. В Angular 20 можна робити через [(ngModel)] або signals для сучасної реактивності.

11. Поясни різницю між компонентом і директивою в Angular?

Angular

• Компонент

  • це спеціальний тип директиви, який має шаблон (HTML) + стилі + логіку;

  • використовується для створення UI-елементів;

  • приклад: @Component({ selector: 'app-user', template: '<p>User</p>' }).

• Директива

  • не має власного шаблону;

  • змінює поведінку або вигляд існуючих елементів/компонентів;

  • може бути structural (@if, @for) або attribute (ngClass, ngStyle).

Приклад кастомної директиви (attribute):

import { Directive, ElementRef, Renderer2 } from '@angular/core';

@Directive({
  selector: '[highlight]',
  standalone: true
})
export class HighlightDirective {
  constructor(el: ElementRef, r: Renderer2) {
    r.setStyle(el.nativeElement, 'background', 'yellow');
  }
}

Використання у шаблоні:

<p highlight>Text with highlight</p>

Коротко: компонент = директива + шаблон, а директива = поведінка без власного UI.

12. Що таке пайпи (Pipes) в Angular та де їх варто використовувати?

Angular

• Pipe — це клас, який трансформує дані без зміни їхнього оригінального стану. Використовується у шаблонах для форматування значень.

Приклади вбудованих пайпів:

• date → форматування дат

• currency → вивід валют

• uppercase / lowercase → зміна регістру

• async → робота з Promise / Observable

Приклад використання:

<p>{{ today | date:'dd/MM/yyyy' }}</p>
<p>{{ price | currency:'USD' }}</p>

Кастомний pipe:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'exclaim',
  standalone: true
})
export class ExclaimPipe implements PipeTransform {
  transform(value: string): string {
    return value + '!';
  }
}

У шаблоні:

<p>{{ 'Hello' | exclaim }}</p>
<!-- Hello! -->

Коротко: Pipes потрібні для форматування та трансформації даних у шаблоні, щоб не захаращувати логіку компонента.

13. Як обробляти надсилання форм (form submissions) в Angular?

Angular

• В Angular є два основні підходи:

1. Template-driven forms (простий варіант, з ngModel):

<form #form="ngForm" (ngSubmit)="onSubmit(form.value)">
  <input name="email" [(ngModel)]="email" required />
  <button type="submit">Send</button>
</form>

onSubmit(value: any) {
  console.log('Form submitted:', value);
}

2. Reactive forms (рекомендований для складних кейсів):

import { Component } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-login',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <input formControlName="email" />
      <button type="submit">Login</button>
    </form>
  `
})
export class LoginComponent {
  form = new FormGroup({
    email: new FormControl('')
  });

  onSubmit() {
    console.log(this.form.value);
  }
}

Коротко: форми в Angular обробляються через (ngSubmit) і бувають template-driven та reactive. Для простих форм можна брати ngModel, для великих і складних — reactive forms.

14. Що таке Angular CLI і для чого його використовують?

Angular

• Angular CLI — це офіційний інструмент командного рядка для створення та керування Angular-проєктами.

Основні можливості:

• ng new → створення нового застосунку

• ng serve → локальний дев-сервер з hot reload

• ng generate (ng g) → генерація компонентів, сервісів, пайпів, директив

• ng build → продакшн-білд з оптимізацією

• ng test, ng e2e → запуск тестів

• ng add → інтеграція бібліотек (напр. Angular Material)

• ng update → оновлення Angular до нової версії

Коротко: Angular CLI = швидкий старт, генерація коду, білд і управління життєвим циклом проєкту.

15. Як виконувати HTTP-запити в Angular за допомогою HttpClient ?

Angular

• В Angular для роботи з HTTP використовується HttpClient, який надає методи get, post, put, delete тощо.

Кроки:

1. Імпортувати HttpClientModule у bootstrapApplication.

2. Інжектити HttpClient у сервіс чи компонент.

3. Виконати запит і підписатися (або використовувати async pipe).

Приклад сервісу:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class ApiService {
  constructor(private http: HttpClient) {}

  getUsers() {
    return this.http.get('https://jsonplaceholder.typicode.com/users');
  }
}

Використання у компоненті:

import { Component, inject } from '@angular/core';
import { AsyncPipe, NgFor } from '@angular/common';
import { ApiService } from './api.service';

@Component({
  selector: 'app-users',
  standalone: true,
  imports: [NgFor, AsyncPipe],
  template: `
    <ul>
      <li *ngFor="let user of users$ | async">{{ user.name }}</li>
    </ul>
  `
})
export class UsersComponent {
  api = inject(ApiService);
  users$ = this.api.getUsers();
}

Коротко: в Angular 20 HTTP-запити робляться через HttpClient, а результат часто обробляється в шаблоні через async pipe.

16. ???

Angular

• Coming soon...😎