# คำถามสัมภาษณ์ Angular 19: Signals, SSR และแนวคิดสำคัญที่ต้องรู้

> คำถามสัมภาษณ์ Angular 19 ที่พบบ่อยที่สุด: Signals, incremental hydration, zoneless change detection และ API แบบ reactive ใหม่พร้อมตัวอย่างโค้ดและคำตอบที่คาดหวัง

- Published: 2026-03-28
- Updated: 2026-05-04
- Author: Anthony Fillion-Maillet
- Tags: angular, interview, signals, ssr, angular-19
- Reading time: 9 min

---

การสัมภาษณ์ Angular ในปี 2026 ก้าวข้ามแค่เรื่อง component และ service ไปไกลมาก Angular 19 ที่เปิดตัวในเดือนพฤศจิกายน 2024 ได้นำเสนอการเปลี่ยนแปลงทางสถาปัตยกรรมพื้นฐาน: Signals แบบเสถียร, SSR พร้อม incremental hydration และ zoneless change detection การเข้าใจแนวคิดเหล่านี้แยกผู้สมัครระดับกลางออกจากผู้สมัครระดับ senior

> **สิ่งที่ผู้สัมภาษณ์ประเมินในปี 2026**
>
> คำถามเกี่ยวกับ Angular 19 มุ่งเน้นสามด้าน: reactive แบบละเอียดด้วย Signals, ประสิทธิภาพของ SSR ผ่าน incremental hydration และความสามารถในการออกแบบแอปพลิเคชันโดยไม่ใช้ Zone.js คำตอบที่คาดหวังแสดงถึงความเข้าใจเชิงสถาปัตยกรรม ไม่ใช่แค่ความรู้เรื่อง syntax

## Angular 19 Signals: โมเดล reactive แบบใหม่

Signals คือการเปลี่ยนแปลงที่สำคัญที่สุดใน Angular นับตั้งแต่มีการเปิดตัว change detection Signal คือค่า reactive แบบ synchronous ที่จะแจ้งเตือน consumer โดยอัตโนมัติเมื่อค่ามีการเปลี่ยนแปลง

**คำถามทั่วไป: "ความแตกต่างระหว่าง Signal กับ RxJS Observable คืออะไร?"**

คำตอบที่คาดหวังจะแยกความแตกต่างของทั้งสองโมเดลอย่างชัดเจน:

```typescript
// signals-vs-observables.ts
import { signal, computed, effect } from '@angular/core';

// Signal: synchronous, value always available
const count = signal(0);
const doubled = computed(() => count() * 2); // Recomputed only when count changes

// Effect: reacts to signal changes
effect(() => {
  console.log(`Count: ${count()}, Doubled: ${doubled()}`);
});

count.set(5); // Immediate, synchronous notification
```

Signals ใช้กราฟ dependency แบบละเอียด ต่างจาก RxJS ที่จัดการ async workflow ที่ซับซ้อน (retry, debounce, merge) Signals ปรับ reactive แบบ synchronous ของ UI ให้เหมาะสม Angular 19 แนะนำให้ใช้ Signals สำหรับ state ของ component และ RxJS สำหรับ stream แบบ async (HTTP request, WebSocket)

## Signal Inputs และ Queries: ย้ายจาก @Input()

Angular 19 ทำให้ API ที่ใช้ signal สำหรับ input, output และ query เสถียรขึ้น คำถามนี้ปรากฏอย่างต่อเนื่องในการสัมภาษณ์

**คำถามทั่วไป: "จะย้าย @Input() แบบดั้งเดิมไปเป็น Signal Input อย่างไร?"**

```typescript
// user-card.component.ts
import { Component, input, computed } from '@angular/core';

@Component({
  selector: 'app-user-card',
  template: `
    <div class="card">
      <h3>{{ fullName() }}</h3>
      <span>{{ role() }}</span>
    </div>
  `
})
export class UserCardComponent {
  // Signal inputs: strict typing, optional default value
  firstName = input.required<string>();
  lastName = input.required<string>();
  role = input<string>('developer'); // Default value

  // Computed derived from inputs: automatically recomputed
  fullName = computed(() => `${this.firstName()} ${this.lastName()}`);
}
```

ข้อได้เปรียบหลัก: Signal Inputs ช่วยให้สร้างค่า `computed()` ได้โดยตรง โดยไม่ต้องใช้ lifecycle hook ไม่ต้องใช้ `ngOnChanges` เพื่อตอบสนองต่อการเปลี่ยนแปลงของ input อีกต่อไป Angular มี schematic `signal-input-migration` เพื่อทำให้การย้ายเป็นอัตโนมัติ

## linkedSignal: การซิงค์ state ที่ขึ้นต่อกัน

`linkedSignal` คือ API เชิงทดลองของ Angular 19 ที่สร้าง signal แบบเขียนได้ที่เชื่อมโยงกับแหล่งที่มา แนวคิดนี้ปรากฏบ่อยในการสัมภาษณ์ระดับ senior

**คำถามทั่วไป: "จะจัดการ state ที่ derived มาแบบ mutable ด้วย linkedSignal อย่างไร?"**

```typescript
// product-filter.component.ts
import { signal, linkedSignal } from '@angular/core';

// Category list that can change
const categories = signal(['frontend', 'backend', 'devops']);

// Linked selection: resets when categories change
const selectedCategory = linkedSignal({
  source: categories,
  computation: (cats) => cats[0] // Reset to first element
});

// Manual modification still possible
selectedCategory.set('backend');

// When categories changes, selectedCategory resets automatically
categories.set(['mobile', 'data', 'cloud']);
// selectedCategory() === 'mobile'
```

กรณีใช้งานจริง: dropdown filter ที่ค่าที่เลือกถูกรีเซ็ตเมื่อรายการต้นทางเปลี่ยน หากไม่มี `linkedSignal` รูปแบบนี้ต้องใช้ `effect()` พร้อม `set()` ซึ่งเป็น anti-pattern ที่สร้างวงจรการอัปเดต

> **กับดักการสัมภาษณ์: effect() ด้วย set()**
>
> การเรียก `signal.set()` ภายใน `effect()` เป็น anti-pattern ที่ Angular ตรวจจับได้ Framework จะส่งคำเตือนในโหมด development วิธีแก้ที่ถูกต้อง: ใช้ `linkedSignal` หรือ `computed()` ขึ้นอยู่กับว่าค่าที่ derived จำเป็นต้องเขียนได้หรือไม่

## Resource API: โหลดข้อมูล async ด้วย Signals

Angular 19 เปิดตัว API เชิงทดลอง `resource` สำหรับการโหลดข้อมูล async API นี้แทนที่รูปแบบดั้งเดิม service + subscribe ใน component

```typescript
// user-profile.component.ts
import { resource, signal } from '@angular/core';
import { inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

const userId = signal(42);
const http = inject(HttpClient);

// Resource: links a source signal to an async loader
const userResource = resource({
  request: () => ({ id: userId() }),  // Recomputed when userId changes
  loader: async ({ request }) => {
    const response = await fetch(`/api/users/${request.id}`);
    return response.json();
  }
});

// Access in template
// userResource.value()   -> data (or undefined)
// userResource.isLoading() -> boolean
// userResource.error()    -> error if any
```

การแสดงความรู้เกี่ยวกับ `resource` เทียบกับ `rxResource` (เวอร์ชัน RxJS) ในการสัมภาษณ์พิสูจน์การติดตามเทคโนโลยีอย่างต่อเนื่อง `rxResource` ใช้ Observables เป็น loader ซึ่งมีประโยชน์สำหรับทีมที่มี codebase RxJS อยู่แล้ว

## SSR และ incremental hydration ใน Angular 19

Angular 19 ยกระดับ SSR ไปอีกขั้นด้วย incremental hydration ในขั้น developer preview ฟีเจอร์นี้ทดสอบใน [ระดับ Google Search](https://blog.angular.dev/meet-angular-v19-7b29dfd05b84) เป็นหัวข้อสัมภาษณ์ที่พบบ่อยขึ้นเรื่อย ๆ

**คำถามทั่วไป: "incremental hydration ของ Angular 19 ทำงานอย่างไร?"**

Hydration แบบดั้งเดิมสร้าง component tree ทั้งหมดขึ้นใหม่ฝั่ง client หลังการ render บน server ส่วน incremental hydration จะ hydrate เฉพาะ component ที่จำเป็นในเวลาที่ component นั้นมองเห็นได้หรือมีการโต้ตอบ

```typescript
// product-page.component.ts
import { Component } from '@angular/core';

@Component({
  template: `
    <app-header />
    <app-product-details [id]="productId" />

    <!-- Hydrated only when visible in viewport -->
    @defer (on viewport) {
      <app-reviews [productId]="productId" />
    }

    <!-- Hydrated only on user interaction -->
    @defer (on interaction) {
      <app-comment-form />
    }
  `
})
export class ProductPageComponent {
  productId = 'angular-19-guide';
}
```

Directive `@defer` ควบคุมเวลาของ hydration ได้อย่างแม่นยำ trigger ที่ใช้ได้: `on viewport` (มองเห็น), `on interaction` (คลิก, focus), `on idle` (เบราว์เซอร์ว่าง), `on timer(5s)` (ดีเลย์) เนื้อหายังคงมองเห็นได้เป็น HTML แบบ static ก่อน hydration โดยไม่มีอาการกระพริบของเนื้อหา

## Render mode ระดับ route: SSR แบบละเอียดต่อ route

Angular 19 เปิดตัว render mode ที่ระดับ route ทำให้ SSR, SSG และ CSR อยู่ร่วมกันในแอปพลิเคชันเดียวกันได้

```typescript
// app.routes.server.ts
import { RenderMode, ServerRoute } from '@angular/ssr';

export const serverRoutes: ServerRoute[] = [
  // Marketing pages: pre-rendered at build time (SSG)
  { path: '', renderMode: RenderMode.Prerender },
  { path: 'pricing', renderMode: RenderMode.Prerender },

  // Dashboard: server-rendered on each request (SSR)
  { path: 'dashboard/**', renderMode: RenderMode.Server },

  // Interactive editor: client-side only (CSR)
  { path: 'editor/**', renderMode: RenderMode.Client },
];
```

ในการสัมภาษณ์ ความสามารถในการอธิบายเหตุผลของการเลือก render mode ในแต่ละ route แสดงถึงความเข้าใจในการชั่งน้ำหนักระหว่างประสิทธิภาพ, SEO และการโต้ตอบ หน้า static (landing, blog) ได้ประโยชน์จาก prerender หน้า dynamic ที่มีข้อมูลผู้ใช้ใช้ SSR แอปพลิเคชันที่โต้ตอบสูงยังคงอยู่ที่ CSR

## Zoneless change detection: สถาปัตยกรรมที่ไม่มี Zone.js

Zoneless change detection คือวิวัฒนาการเชิงสถาปัตยกรรมที่สำคัญที่สุดใน Angular 19 คำถามนี้กลายเป็นข้อบังคับในการสัมภาษณ์ระดับ senior

**คำถามทั่วไป: "change detection ทำงานอย่างไรเมื่อไม่มี Zone.js?"**

```typescript
// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import {
  provideExperimentalZonelessChangeDetection
} from '@angular/core';
import { AppComponent } from './app.component';

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

หากไม่มี Zone.js Angular จะไม่ patch async API ของเบราว์เซอร์ (setTimeout, Promise, addEventListener) อีกต่อไป Change detection จะถูก trigger ผ่าน Signals เท่านั้น ประโยชน์ที่วัดได้:

- ลดขนาด bundle ลง 10-15 KB (zone.js ถูกลบออก)
- Stack trace สะอาด ไม่มี frame ของ Zone.js
- Change detection แบบเฉพาะเจาะจง: เฉพาะ component ที่ได้รับผลกระทบจาก Signal ที่ถูกแก้ไขเท่านั้นที่จะ render ใหม่

> **Angular 20.2: zoneless กลายเป็นเสถียร**
>
> ตั้งแต่ Angular 20.2 โหมด zoneless เสถียรด้วย `provideZonelessChangeDetection()` (ไม่มีคำนำหน้า Experimental) การกล่าวถึงความก้าวหน้านี้ในการสัมภาษณ์แสดงถึงการติดตาม ecosystem อย่างต่อเนื่อง

## Standalone เป็นค่าเริ่มต้น: จุดสิ้นสุดของ NgModules

Angular 19 ทำให้ standalone component เป็นพฤติกรรมเริ่มต้น ไม่จำเป็นต้องใช้ flag `standalone: true` อีกต่อไป การตัดสินใจนี้ทำให้สถาปัตยกรรมง่ายขึ้นและลด boilerplate

**คำถามทั่วไป: "standalone-by-default ส่งผลกระทบต่อสถาปัตยกรรมของแอปพลิเคชัน Angular อย่างไร?"**

```typescript
// dashboard.component.ts
@Component({
  selector: 'app-dashboard',
  imports: [CommonModule, RouterModule, UserCardComponent],
  template: `
    <nav>
      <a routerLink="/home">Home</a>
    </nav>
    @for (user of users(); track user.id) {
      <app-user-card [firstName]="user.firstName" [lastName]="user.lastName" />
    }
  `
})
export class DashboardComponent {
  users = signal<User[]>([]);
}
```

แต่ละ component ประกาศ dependency ของตัวเองอย่างชัดเจนผ่าน `imports` NgModules ยังคงใช้ได้เพื่อความเข้ากันได้ย้อนหลัง แต่แอปพลิเคชัน Angular 19+ ใหม่ ๆ ไม่ต้องการอีกแล้ว ในการสัมภาษณ์ การอธิบายการย้ายแบบค่อยเป็นค่อยไป (component ต่อ component) แทนแนวทาง big bang เป็นที่ชื่นชม

## กลยุทธ์การตอบสำหรับการสัมภาษณ์ Angular 19

ผู้สัมภาษณ์ทางเทคนิคประเมินสามมิติเกี่ยวกับ Angular 19:

- **ความเข้าใจเชิงสถาปัตยกรรม**: อธิบายว่าทำไม Signals จึงค่อย ๆ แทนที่ Zone.js ไม่ใช่แค่วิธีใช้
- **การชั่งน้ำหนัก**: รู้ว่าเมื่อใดควรใช้ `computed()` เทียบกับ `linkedSignal` เทียบกับ `effect()` และเมื่อใดควรเก็บ RxJS ไว้
- **การย้าย**: อธิบายกลยุทธ์การย้ายแบบค่อยเป็นค่อยไปจากแอปพลิเคชัน Angular แบบดั้งเดิมไปยัง Signals และโหมด zoneless

กุญแจสำคัญ: หลีกเลี่ยงการท่องจำ [เอกสารทางการของ Angular](https://angular.dev) แต่ละคำตอบควรประกอบด้วยกรณีใช้งานจริงจากโปรเจกต์จริง ฟอร์มที่ซับซ้อน หน้า e-commerce ที่มี SSR แดชบอร์ดแบบเรียลไทม์

สำหรับแนวคิดพื้นฐานของ Angular ก่อนการสัมภาษณ์ โปรดดู [คู่มือฉบับสมบูรณ์เกี่ยวกับ 25 คำถามสัมภาษณ์ Angular](/blog/angular/top-25-angular-interview-questions)

## บทสรุป

- Signals ใน Angular 19 แทนที่รูปแบบ `@Input()` + `ngOnChanges` ด้วยโมเดล reactive แบบ synchronous ที่ละเอียด `signal()`, `computed()` และ `input()` ครอบคลุม 90% ของกรณีใช้งาน
- `linkedSignal` แก้ปัญหา state ที่ derived แบบ mutable โดยไม่ต้องใช้ anti-pattern `effect()` + `set()`
- Incremental hydration ผ่าน `@defer` ลด Time to Interactive โดยไม่กระทบ SEO แต่ละ component จะ hydrate ตาม trigger ของตน
- โหมด zoneless ลบ Zone.js ออกจาก bundle และพุ่งเป้า change detection ไปที่ component ที่ได้รับผลกระทบจาก Signal เท่านั้น
- Render mode ระดับ route ช่วยให้ผสม SSG, SSR และ CSR ในแอปพลิเคชันเดียวกันได้ตามความต้องการของแต่ละหน้า
- Component standalone-by-default ขจัดความจำเป็นในการใช้ NgModules ในแอปพลิเคชันใหม่
- ในการสัมภาษณ์ การแสดงการชั่งน้ำหนัก (Signals กับ RxJS, SSR กับ CSR, zoneless กับ Zone.js) สำคัญกว่า syntax

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/th/blog/angular/angular-19-interview-questions-signals-ssr-must-know