Pertanyaan wawancara Angular 19: Signals, SSR, dan konsep wajib diketahui

Wawancara Angular pada tahun 2026 jauh melampaui komponen dan service. Angular 19 yang dirilis pada November 2024 memperkenalkan pergeseran arsitektur fundamental: Signals stabil, SSR dengan hidrasi inkremental, dan zoneless change detection. Penguasaan konsep-konsep ini memisahkan kandidat mid-level dari kandidat senior.

Angular 19 Signals: model reaktivitas baru

Signals merupakan perubahan paling fundamental di Angular sejak diperkenalkannya change detection. Sebuah Signal adalah nilai reaktif sinkron yang secara otomatis memberi tahu konsumennya saat berubah.

Pertanyaan tipikal: "Apa perbedaan antara Signal dan Observable RxJS?"

Jawaban yang diharapkan dengan jelas membedakan kedua model:

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 menggunakan grafik dependensi berbutir halus. Berbeda dengan RxJS yang menangani alur kerja asinkron kompleks (retry, debounce, merge), Signals mengoptimalkan reaktivitas UI sinkron. Angular 19 merekomendasikan Signals untuk state komponen dan RxJS untuk stream asinkron (permintaan HTTP, WebSocket).

Signal Inputs dan Queries: migrasi dari @Input()

Angular 19 menstabilkan API berbasis signal untuk input, output, dan query. Pertanyaan ini muncul secara konsisten dalam wawancara.

Pertanyaan tipikal: "Bagaimana cara migrasi @Input() klasik ke Signal Input?"

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()}`);
}

Keunggulan utama: Signal Inputs memungkinkan pembuatan nilai computed() secara langsung tanpa lifecycle hook. Tidak diperlukan lagi ngOnChanges untuk merespons perubahan input. Angular menyediakan schematic signal-input-migration untuk mengotomatiskan migrasi.

linkedSignal: menyinkronkan state dependen

linkedSignal adalah API eksperimental Angular 19 yang membuat signal yang dapat ditulis dan terhubung ke sumber. Konsep ini sering muncul di wawancara level senior.

Pertanyaan tipikal: "Bagaimana menangani state turunan yang mutable dengan linkedSignal?"

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'

Kasus penggunaan konkret: dropdown filter yang pilihannya direset saat daftar sumber berubah. Tanpa linkedSignal, pola ini memerlukan effect() dengan set() — sebuah anti-pattern yang menciptakan loop pembaruan.

Resource API: memuat data asinkron dengan Signals

Angular 19 memperkenalkan API eksperimental resource untuk pemuatan data asinkron. API ini menggantikan pola klasik service + subscribe di komponen.

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

Menunjukkan pengetahuan tentang resource versus rxResource (versi RxJS) dalam wawancara membuktikan kewaspadaan teknologi yang aktif. rxResource menggunakan Observables sebagai loader, berguna untuk tim dengan basis kode RxJS yang sudah ada.

SSR dan hidrasi inkremental di Angular 19

Angular 19 membawa SSR ke level berikutnya dengan hidrasi inkremental dalam developer preview. Fitur ini, yang diuji pada skala Google Search, menjadi topik wawancara yang semakin umum.

Pertanyaan tipikal: "Bagaimana hidrasi inkremental Angular 19 bekerja?"

Hidrasi klasik membangun ulang seluruh pohon komponen di sisi klien setelah server rendering. Hidrasi inkremental hanya menghidrasi komponen yang diperlukan, pada saat menjadi terlihat atau interaktif.

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';
}

Direktif @defer mengontrol secara presisi kapan hidrasi terjadi. Trigger yang tersedia: on viewport (terlihat), on interaction (klik, focus), on idle (browser idle), on timer(5s) (penundaan). Konten tetap terlihat sebagai HTML statis sebelum hidrasi, tanpa flash konten.

Render mode level rute: SSR granular per rute

Angular 19 memperkenalkan render mode di level rute, memungkinkan koeksistensi SSR, SSG, dan CSR dalam aplikasi yang sama.

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 },
];

Dalam wawancara, kemampuan untuk membenarkan pemilihan render mode per rute menunjukkan pemahaman tentang trade-off antara performa, SEO, dan interaktivitas. Halaman statis (landing, blog) mendapat manfaat dari prerender. Halaman dinamis dengan data pengguna menggunakan SSR. Aplikasi yang sangat interaktif tetap di CSR.

Zoneless change detection: arsitektur tanpa Zone.js

Zoneless change detection adalah evolusi arsitektural paling signifikan di Angular 19. Pertanyaan ini telah menjadi wajib dalam wawancara senior.

Pertanyaan tipikal: "Bagaimana change detection bekerja tanpa Zone.js?"

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

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

Tanpa Zone.js, Angular tidak lagi mem-patch API asinkron browser (setTimeout, Promise, addEventListener). Change detection dipicu secara eksklusif melalui Signals. Manfaat yang dapat diukur:

• Pengurangan ukuran bundle 10-15 KB (zone.js dihapus)
• Stack trace bersih tanpa frame Zone.js
• Change detection tertarget: hanya komponen yang dipengaruhi oleh Signal yang dimodifikasi yang akan di-render ulang

Standalone secara default: akhir dari NgModules

Angular 19 menjadikan komponen standalone sebagai perilaku default. Flag standalone: true tidak lagi diperlukan. Keputusan ini menyederhanakan arsitektur dan mengurangi boilerplate.

Pertanyaan tipikal: "Apa dampak standalone-by-default pada arsitektur aplikasi Angular?"

@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[]>([]);
}

Setiap komponen secara eksplisit mendeklarasikan dependensinya melalui imports. NgModules tetap tersedia untuk kompatibilitas mundur, tetapi aplikasi Angular 19+ baru tidak lagi membutuhkannya. Dalam wawancara, menjelaskan migrasi inkremental (komponen demi komponen) alih-alih pendekatan big bang sangat dihargai.

Strategi jawaban untuk wawancara Angular 19

Pewawancara teknis mengevaluasi tiga dimensi tentang Angular 19:

• Pemahaman arsitektural: menjelaskan mengapa Signals secara progresif menggantikan Zone.js, bukan hanya bagaimana menggunakannya
• Trade-off: mengetahui kapan menggunakan computed() versus linkedSignal versus effect(), dan kapan mempertahankan RxJS
• Migrasi: mendeskripsikan strategi migrasi inkremental dari aplikasi Angular klasik ke Signals dan mode zoneless

Kuncinya: hindari membaca ulang dokumentasi resmi Angular. Setiap jawaban harus diilustrasikan dengan kasus penggunaan konkret dari proyek nyata, sebuah formulir kompleks, halaman e-commerce dengan SSR, dashboard real-time.

Untuk konsep dasar Angular sebelum wawancara, lihat panduan lengkap 25 pertanyaan wawancara Angular.

Kesimpulan

• Signals Angular 19 menggantikan pola @Input() + ngOnChanges dengan model reaktif sinkron yang berbutir halus. signal(), computed(), dan input() mencakup 90% kasus penggunaan
• linkedSignal menyelesaikan state turunan yang mutable tanpa menggunakan anti-pattern effect() + set()
• Hidrasi inkremental melalui @defer mengurangi Time to Interactive tanpa mengorbankan SEO. Setiap komponen dihidrasi sesuai trigger-nya
• Mode zoneless menghapus Zone.js dari bundle dan menargetkan change detection hanya pada komponen yang dipengaruhi Signal
• Render mode level rute memungkinkan pencampuran SSG, SSR, dan CSR dalam aplikasi yang sama berdasarkan kebutuhan setiap halaman
• Komponen standalone-by-default menghilangkan kebutuhan akan NgModules dalam aplikasi baru
• Dalam wawancara, mendemonstrasikan trade-off (Signals vs RxJS, SSR vs CSR, zoneless vs Zone.js) lebih penting daripada sintaksis