Kali ini aku nyobain course JavaScript: Best Practices for Data dari Shasha Vodnik. Tapi rasanya gak afdol kalau cuma share sertifikatnya doang. Mana bukti belajarnya, kak? Jadi yaudah lah kita bahas.

Quick review aja, menurutku course dari Mas Shasha Vodnik ini worth it banget buat kalian enroll. Videonya singkat, penjelasannya compact tapi cukup nge-cover poin-poin penting. Solid 4/5⭐️

Sama kayak di course-nya, nanti aku mau bahas gimana cara nyusun data di JavaScript biar lebih rapi, gak cluttered, dan efisien. BTW, Karena pembahasannya lumayan panjang, aku bakal pisahin jadi 3 artikel biar kalian gak bosen. I know your attention span is already fucked. Kira-kira pembahasannya bakal kayak gini:

• Perkenalan soal best practice
• Cara deklarasi dan assign variabel
• Type casting dan perbandingan value

Gila, banyak banget yaa? But I promise the ride will be fun for you guys. And I’ll spill some tea along the way too, soo 🍵 🍵

Introduction: Why Best Practices?

Style Guide

Pas lagi ngoding pake JavaScript, apalagi kalau udah urusan data, pasti banyak banget pilihan mau nulis kode kayak gimana. Terus gimana sih cara nentuin mana style yang paling sesuai? Langkah pertama adalah menentukan style guide.

Style guide itu kaya kesepakatan soal cara nulis kode di dalam satu codebase. Ini penting banget, soalnya setiap orang (bahkan setiap bahasa pemrograman) punya banyak gaya penulisannya sendiri-sendiri.

Style guide ini bisa macem-macem levelnya bisa di level organisasi, proyek, bahkan spesifik di satu repo aja. Tapi biasanya di industri udah banyak style guide yang sering dipake dan dianggap sebagai best practice.

Meskipun namanya best practice, bukan berarti ada satu style guide untuk semua kasus. Kita tetap harus lihat kebutuhan dan tujuan proyeknya. Fungsi utama style guide itu ada dua:

✅ Biar kode kita tetap nyambung dan cohesive sama bagian lain di codebase.
✅ Biar kita bisa fokus ke logic dan fungsionalitasnya aja, tanpa harus pusing mikirin mau pakai style/syntax yang gimana.

Kalau mau cari contoh best practice populer, biasanya orang-orang referensinya ke style guide kayak:
→ Airbnb JavaScript Style Guide
→ Google JavaScript Style Guide

Waktu awal-awal aku kerja, gak ada style guide buat standarisasi kode ini. Satu proyek bisa dikerjain 5–10 orang yang punya style masing-masing. Awalnya sih bukan masalah ya, karena emang satu orang fokus ngerjain satu fitur. Tapi waktu bug fixing dan diminta ngelanjutin fiturnya, ya Allah jujur pusing sih. Gak ada standarisasi, gak tau alur kerjanya gimana, bahkan gak ada komen? GWS.

Akhirnya waktu bug fixing, harus melajarin dulu ini maksud programmer yang kemarin itu apaan. Pas masuk proyek baru, aku come up buat bikin standarisasi mulai dari foldering, terus penulisan function, variable, dan sebagainya. Mungkin lain kali aku bikin pembahasan yang lebih nyeluruh dan thought process waktu itu.

Jadi, menurutku setiap project yang dikerjain lebih dari 2 orang itu wajib banget punya style guide. Selain biar lebih gampang kerja bareng, juga biar gak pusing sendiri kalau harus ngelanjutin kerjaan orang lain.

Babel

Selain style guide, kalian juga harus integrate kode kalian sama Babel. Babel itu JavaScript transpiler, fungsinya buat mengubah kode JavaScript versi baru (ES6+, ES2020, dst.) jadi versi biar bisa kompatibel di semua browser.

JavaScript kan berkembang pesat, sedangkan browser kadang ketinggalan fitur baru. Makanya kita perlu transpiler kayak Babel. Selain itu, ada juga polyfills potongan kode untuk mimics fitur baru JavaScript (misalnya Promise atau fetch) agar tetap bisa jalan di browser lama.

Gimana cara kerjanya?

• Kita menulis kode pakai fitur modern JS (chaining, async/await, arrow function, dll.

const user = { profile: { name: "Andi" } };
const username = user?.profile?.name ?? "Guest";

const loadData = async () => {
  const res = await fetch("/data.json");
  return res.json();
};

• Babel parses kodenya menjadi Abstract Syntax Tree (AST).
• Babel plugins mentransform AST ke sintaks lama agar lebih kompatibel

var user = { profile: { name: "Andi" } };
var username = (user === null || user === void 0 ? void 0 : user.profile) === null || user.profile === void 0 ? void 0 : user.profile.name || "Guest";

var loadData = function loadData() {
  return regeneratorRuntime.async(function loadData$() {
    var res;
    return regeneratorRuntime.awrap(fetch("/data.json")).then(function (res) {
      return res.json();
    });
  });
};

• Polyfills seperti core-js bakal nambahin fitur baru kalau browser lama gak punya.

Sebenernya kalau kalian udah pake framework modern kaya React, Vue.js atau Angular mereka mostly udah ada built in transpiler jadi kalian gak perlu ngesetup lagi.

✅React/Vue/Svelte: Babel sudah di setup otomatis.
✅Angular: gak pakai Babel secara eksplisit, tapi pake tsc dan polyfills.ts untuk kompatibilitas browser.

ESLint

Waktu awal-awal kerja (lagi), setiap kali code review rasanya udah males duluan karena banyak banget PR noise. PR noise ini maksudnya file dan baris kode yang berubah, padahal gak ada logic yang beneran diubah cuma karena formatternya beda-beda, jadi Git nganggep itu perubahan.

Akhirnya, nyari bagian yang beneran diubah jadi makin males, karena harus scroll panjang-panjang buat nemuin satu-dua baris penting. PR history juga jadi gak jelas. Satu commit kelihatan gede banget, padahal cuma karena hapus spasi atau ubah indentasi doang 💀.

Kadang malah merge conflict gara-gara spasi, bukan karena logicnya beda. Dan yang paling ngeselin beda file beda juga formatnya. Mungin sepele, tapi bikin kode jadi gak enak dibaca dan gak konsisten. Rasanya kayak buka buku yang setiap halamannya pakai font beda-beda.

Akhirnya kita coba beresin semua itu pakai ESLint dan Prettier, terus kita samain config-nya. Akhirnya code jadi jauh lebih rapi dan enak dilihat, semua orang pakai style yang sama, dan codebase kita akhirnya terasa lebih cohesive.

“Terus apa ESLint dan gimana cara kerjanya? ☝🏻🤓”

ESLint adalah alat linting untuk JavaScript dan TypeScript. ESLint ngebaca kode kamu, terus make sure sesuai dengan aturan-aturan yang kamu tentukan sendiri. Kalau ada yang melanggar aturan itu baik karena typo, gaya penulisan yang gak konsisten, atau potensi bug ESLint bakal ngasih tau.

Yang menarik, ESLint gak fixed. Dia bisa dikonfigurasi. Kamu bisa:

• Custom aturan-aturan yang pengen dipake
• Mengatur level peringatan: mau cuma “warning” atau langsung dianggap “error”
• Bahkan mengintegrasikannya dengan tools lain seperti Prettier, atau framework seperti React, Vue, atau Next.js

Gimana cara kerja ESLint?

1. Membaca Kode (Parsing)
   ESLint tidak membaca kode sebagai teks biasa, tapi mengubahnya menjadi struktur pohon (AST — Abstract Syntax Tree).
2. Menjalankan Aturan-Aturan (Linting)
   Setelah punya pohon kode, ESLint mulai menjalankan aturan-aturan yang udah ditetapkan. Misalnya:
   - “Apakah variabel ini dipakai?
   - “Apakah perbandingan memakai == atau ===?"
   - “Apakah fungsi ini terlalu kompleks?”
3. Memberi Peringatan atau Error
   Kalau ada pelanggaran, ESLint akan menampilkan pesan di terminal atau langsung di editor. Kadang bahkan bisa otomatis memperbaikinya (auto-fix).
4. Integrasi ke Editor & CI/CD
   ESLint bisa langsung jalan di editor (VS Code misalnya), atau jadi bagian dari proses deploy (CI/CD pipeline), untuk memastikan kode yang di-push ke production udah bersih dan konsisten.

Use Strict

If you have a strict parent that wouldn’t let anything slide, this does the same. Strict mode ("use strict";) bakal ngebikin proses running jadi lebih strict. Contoh:

nama = "Fiska"; // Tanpa deklarasi

Kalau ga pake strict mode, code ini masih bisa jalan dan JavaScript bakal otomatis bikin variabel global. Tapi di strict mode, ini langsung error karena kamu belum deklarasi nama.

Kaya gini tuh perlu biar gak ada unwanted bugs yang muncul. Contoh:

function test() {
  nama = "Fiska"; // lupa pakai let/const
}
test();
console.log(nama); // jadi global!

function jumlah(x, x) {
  return x + x;
} // nggak error tanpa strict mode padahal parameternya duplicate

function show() {
  console.log(this); // this = window (bukan undefined)
}
show();

Framework modern kayak Nuxt, Next.js, Vite, bahkan Babel biasanya udah otomatis menjalankan kode dalam strict mode. Jadi walaupun kamu nggak eksplisit nulis "use strict";, mereka udah nge-compile kodenya ke bentuk strict.

Pembahasan kali ini sampai situ dulu, yah. Selanjutnya kita bahas part 2 soal deklarasi dan assign variabel, type casting, sama nge-compare value. In the meantime, baca Medium gwe yang lain. Babai 👋😄

Looping list itu hal dasar yang sering kita lakuin. Tapi udah pernah coba pakai trackBy belum? Kalau belum, gue bakal jelasin kenapa ini penting.

TL;DR Fungsi utama trackBy itu mencegah Angular ngerender ulang seluruh elemen list setiap kali ada perubahan, dengan cara melacak elemen berdasarkan ID atau properti unik lainnya.

Tanpa trackBy nih, setiap perubahan dalam array bakal bikin Angular menghapus dan membuat ulang semua elemen di DOM. Dengan trackBy, Angular cuma memperbarui elemen yang berubah aja, jadi lebih efisien dan smooth.

Yup, intinya emang gitu doang. Kalau lo pengen denger penjelasan lebih detail dan contoh penggunaannya, let’s go kita bahas.

Nature Javascript

Pertama lo perlu tau dulu nature dari Javascript (languange yang dipake Angular) itu kayak gimana. Jadi, Javascript itu pake object reference (objek yang disimpan di heap memory) untuk tipe data kompleks kayak Object dan Array. Gampangnya, kalau lo assign atau oper sebuah object ke variabel lain, yang dipindahkan itu bukan nilai asli si object, tapi referensinya.

Contohnya nih:

let arr1 = [1, 2, 3];
let arr2 = arr1;

Yang terjadi di memori:

• Heap Memory: Data array [1, 2, 3] disimpan di heap.
• Stack Memory: arr1 dan arr2 hanya menyimpan referensi ke lokasi heap yang sama.

➡️Jadi, kalau kita memodifikasi array langsung, kedua variabel akan melihat perubahan yang sama:

arr2.push(4);
console.log(arr1); // [1, 2, 3, 4]
console.log(arr2); // [1, 2, 3, 4]

Karena kedua variabel merujuk ke referensi heap yang sama, perubahan pada arr2 juga mempengaruhi arr1.

JavaScript milih pakai object reference buat objek karena efisiensi memori dan performance. Kalau setiap kali kita assign objek ke variabel lain itu selalu bikin salinan baru, program bakal jadi lambat dan makan banyak memori, apalagi kalau objeknya gede.

Default Behaviour Angular

Sebenernya behaviour default Angular juga kayak gini. Tapi pada realitanya, kebutuhan developer sering nge-update array yang ngubah referensi dari heap memory kayak nambahin, ngehapus, sorting, dan filtering.Kita breakdown dulu kapan referensi berubah dan kapan enggak:

Kapan dan Bagaimana Referensi Baru Terbentuk?

1️⃣ Spread Operator

let arr1 = [1, 2, 3];
let arr2 = [...arr1]; // Membuat array baru dengan isi yang sama

arr2.push(4);
console.log(arr1); // [1, 2, 3]
console.log(arr2); // [1, 2, 3, 4] ✅ Tidak mempengaruhi arr1!

🔍 Apa yang terjadi?

• [...arr1] membuat array baru di heap memory.
• arr1 dan arr2 sekarang memiliki referensi berbeda, meskipun isinya sama.

2️⃣ Pake .map(), .filter(), .slice(), .concat()

Fungsi ini gak mengubah array asli, tapi mengembalikan array baru:

let arr1 = [1, 2, 3];

let arr2 = arr1.map(num => num * 2); // [2, 4, 6]
let arr3 = arr1.filter(num => num !== 2); // [1, 3]
let arr4 = arr1.concat([4, 5]); // [1, 2, 3, 4, 5]

console.log(arr1); // [1, 2, 3] ✅ Tidak berubah

🔍 Apa yang terjadi?

• map(), filter(), slice()dan concat() gak memodifikasi array lama, melainkan membuat array baru di heap.
• arr1 tetap punya referensi lama, sementara arr2, arr3, dan arr4 punya referensi baru.

Masalah di Angular

Waktu Angular merender sebuah array menggunakan *ngFor, dia harus menentukan apakah elemen dalam daftar perlu diperbarui, dihapus, atau ditambahkan ke DOM. Secara default, Angular hanya membandingkan referensi array, bukan isinya.

Masalahnya, Setiap kali kita memodifikasi array (misalnya dengan filtering atau re-assign data dari API), Angular liatnya sebagai array yang berbeda karena dia pakai reference check, bukan deep comparison.

Karena itu, Angular bakal menganggap semua elemen dalam array berubah, walaupun isinya sama aja. Akibatnya:

• DOM akan di-update terus-menerus, bahkan untuk elemen yang nggak berubah.
• Performa turun drastis, terutama kalau list-nya besar (misalnya looping 50+ data).
• State di dalam elemen (kayak input yang lagi diketik) bisa hilang karena elemen dihapus dan dibuat ulang.

🫣 Contoh Kasus:

Misalnya lo punya list 50 data di UI, terus lo filter jadi 25 data. Karena referensinya berubah, Angular bakal render ulang semua elemen dari nol, bukan cuma update yang berubah.

Solusinya? Pake trackBy!

trackBy, bakal kasih tahu Angular gimana cara mengenali elemen dalam list berdasarkan properti unik (biasanya ID). Jadi, Angular cuma update elemen yang benar-benar berubah, bukan semuanya.

✅ Hasilnya:

• DOM lebih efisien, nggak nge-refresh elemen yang nggak perlu.
• Performa lebih cepat, karena Angular cuma update yang perlu.
• State di elemen UI tetap aman, nggak tiba-tiba hilang.

🔍 Apa yang terjadi di balik layar?

1. Saat pertama kali Angular merender daftar, dia menyimpan referensi ID tiap elemen.
2. Ketika data diperbarui (misalnya dari API), Angular akan:

• Membandingkan ID lama dan ID baru.
• Hanya memperbarui elemen yang ID-nya berubah.
• Membiarkan elemen yang ID-nya tetap sama (tidak dihapus dari DOM).

Jadi, hanya elemen yang benar-benar berubah yang akan diperbarui di DOM

Contoh:

Misalkan lo punya data awal ini:

this.users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
  { id: 3, name: "Charlie" }
];

Kemudian kita update array seperti ini:

this.users = [
  { id: 1, name: "Alice" },    // Tetap sama
  { id: 2, name: "Bob" },      // Tetap sama
  { id: 3, name: "Charles" },  // Nama berubah (Charlie → Charles)
  { id: 4, name: "David" }     // Elemen baru
];

👉 Tanpa trackBy

• Semua elemen akan dihapus dan dibuat ulang dari nol.
• UI akan flickering, input di dalamnya bisa hilang.

👉 Dengan trackBy

• Angular melihat ID Alice (1) dan Bob (2) masih sama, jadi tidak menyentuh mereka.
• Charlie diubah jadi Charles (ID tetap 3), jadi Angular hanya update teksnya, bukan buat ulang elemen.
• David elemen baru (ID 4), jadi Angular menambahkan elemen baru saja, bukan reset semuanya.

Hasilnya: Render lebih efisien, lebih cepat, dan UI tetap smooth tanpa flickering.

Contoh Penggunaan

HTML (Template)

<div *ngFor="let user of users; trackBy: trackById">
  {{ user.name }}
</div>

TypeScript (Component)

export class MyComponent {
  users = [
    { id: 1, name: "Alice" },
    { id: 2, name: "Bob" },
    { id: 3, name: "Charlie" }
  ];

  trackById(index: number, user: any): number {
    return user.id;
  }

  updateUsers() {
    this.users = [
      { id: 1, name: "Alice" },
      { id: 2, name: "Bob" },
      { id: 3, name: "Charles" }, // Nama berubah
      { id: 4, name: "David" }    // Elemen baru
    ];
  }
}

Kesimpulan: Bagaimana trackBy Bekerja?

1. Tanpa trackBy, Angular hanya membandingkan referensi array, bukan isinya.
2. Setiap kali array berubah, Angular menghapus & membuat ulang seluruh elemen di DOM.
3. Dengan trackBy, Angular membandingkan elemen berdasarkan nilai unik (misalnya ID).
4. Hanya elemen yang benar-benar berubah yang akan diperbarui di DOM, meningkatkan performa & menjaga state UI tetap stabil.

Kayaknya segitu dulu ya pembahasan singkat kali ini. Kalau ada hal yang kurang tepat atau mau nambahin, drop aja ya di kolom comment. In the meantime take care of yourself 😁👌

As a developer who has worked with Vue 3, transitioning to Angular 18 it felt so complicated. Vue’s reactivity model is intuitive, declarative, and straightforward something that makes state management feel almost effortless. Angular, on the other hand, leans heavily on RxJS and reactive streams, introducing a completely different way of thinking about state, events, and data flow.

Angular’s concepts like BehaviorSubject, Observables, and pipe operations seemed unnecessarily complex compared to Vue’s ref() and computed(). However, once I got the hang of Angular, I realized that despite the steep learning curve, RxJS offers a lot of power and scalability especially for handling complex, data-driven applications.

In this article, I’ll break down the key differences in reactivity between Vue and Angular, explore why Angular embraces RxJS, and help you understand why this shift in mindset is worth the effort.

Why Angular Feels So Different

Vue 3’s reactivity system is designed to be intuitive and developer-friendly. At its core, it relies on ref() and reactive(), which automatically track dependencies and update the DOM when the underlying state changes.

Example in Vue 3:

<script setup>
import { ref, computed } from 'vue';

const count = ref(0);
const double = computed(() => count.value * 2);

function increment() {
  count.value++;
}
</script>

<template>
  <p>Count: {{ count }}</p>
  <p>Double: {{ double }}</p>
  <button @click="increment">Increment</button>
</template>

Here, Vue automatically tracks reactivity through the ref() function. When count updates, double is recomputed, and the UI reflects the change instantly.

Angular’s reactive system is fundamentally different. Instead of using direct state manipulation like Vue, Angular relies on RxJS, where data flows through streams using Observable and Subject.

Example in Angular 18 (Using RxJS for State Management):

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

@Component({
  selector: 'app-counter',
  template: `
    <p>Count: {{ count$ | async }}</p>
    <button (click)="increment()">Increment</button>
  `,
})
export class CounterComponent {
  private countSubject = new BehaviorSubject<number>(0);
  count$ = this.countSubject.asObservable();

  increment() {
    this.countSubject.next(this.countSubject.value + 1);
  }
}

How Angular Handles Data Flow Through Streams (Behind the Scenes)

Angular’s reactivity is built around Observables and RxJS operators, making it fundamentally different from Vue’s dependency-based tracking.

1. Data as a Stream Instead of a Direct Value

In Vue, when a reactive value like ref(0) changes, Vue’s reactivity system automatically detects the update and triggers re-renders.

In Angular, however, state is not stored as a direct value but as an Observable stream. This means:

• Data flows through the application as an event-driven stream.
• Components subscribe to these streams instead of accessing values directly.
• The UI updates only when new data is emitted by the Observable.

2. Event-Driven Updates Instead of Dependency Tracking

Vue tracks dependencies automatically and updates computed values whenever dependencies change. Angular, on the other hand, doesn’t track dependencies — instead, it relies on event-driven updates:

• Components don’t “watch” state; they listen to Observables.
• No implicit reactivity: Changes must be explicitly emitted through Subjects/BehaviorSubjects.

Example: Counter with BehaviorSubject

export class CounterComponent {
  private countSubject = new BehaviorSubject<number>(0);
  count$ = this.countSubject.asObservable(); // Exposing as an Observable

  increment() {
    this.countSubject.next(this.countSubject.value + 1);
  }
}

📍 Behind the scenes:

• countSubject holds the state and emits new values.
• The UI subscribes to count$ using async, so it updates when new values are emitted.
• No automatic tracking — everything is event-driven.

3. RxJS Operators Transform Data Before It Reaches Components

Vue’s computed properties provide declarative transformations. In Angular, RxJS operators handle this within the stream itself.

Example: Instead of modifying values directly, you can use map() to transform data before it reaches the component.

this.doubleCount$ = this.count$.pipe(map(value => value * 2));

📍 Key Difference: In Vue, computed(() => count.value * 2) would do the same thing, but Angular forces you to transform within the stream itself.

4. Subscriptions Control Data Flow (Explicit Lifecycle Management)

In Vue, computed properties and watchers are automatically cleaned up. Angular, however, requires manual subscription management to avoid memory leaks.

ngOnInit() {
  this.subscription = this.count$.subscribe(value => console.log(value));
}

ngOnDestroy() {
  this.subscription.unsubscribe();
}

📍 Why? Because Observables can emit infinite values, they must be explicitly unsubscribed when a component is destroyed.

Why Does Angular Choose RxJS?

The reason Angular adopts RxJS is scalability and flexibility. While Vue’s reactivity system works well for small to medium applications, it can become challenging to manage complex state interactions and side effects in large applications. RxJS, despite its complexity, offers powerful tools for handling:

• Asynchronous Data Streams (e.g., API responses, WebSockets)
• Complex Event Handling (e.g., user inputs, debouncing, combining events)
• State Synchronization (e.g., keeping multiple components in sync)

1. Asynchronous Data Streams (Handling API Calls Efficiently)

Vue uses watch() or fetch inside onMounted(), but Angular can handle async calls declaratively using RxJS:

Vue Example:

<script setup>
import { ref, watch } from 'vue';
import axios from 'axios';

const query = ref('');
const results = ref([]);

watch(query, async (newQuery) => {
  const response = await axios.get(`/search?q=${newQuery}`);
  results.value = response.data;
});
</script>

Angular Example:

this.results$ = this.query$.pipe(
  debounceTime(300),
  distinctUntilChanged(),
  switchMap(query => this.http.get(`/search?q=${query}`))
);

📍 Angular’s advantage: No redundant API calls — only the latest query triggers a request.

2. Complex Event Handling (Debouncing User Input)

Debouncing in Vue requires manual handling, whereas Angular can manage it elegantly via RxJS operators:

Vue Example:

const searchQuery = ref('');
const debouncedQuery = ref('');
let timeout;

watch(searchQuery, (newValue) => {
  clearTimeout(timeout);
  timeout = setTimeout(() => {
    debouncedQuery.value = newValue;
  }, 300);
});

Angular Example:

this.searchQuery$.pipe(
  debounceTime(300),
  distinctUntilChanged(),
  switchMap(query => this.searchService.search(query))
).subscribe(results => this.results = results);

📍 Angular’s advantage: Streams handle debouncing, ensuring performance efficiency.

3. State Synchronization (Keeping Components in Sync)

Vue requires manual prop drilling or Vuex/Pinia for complex state sharing, while Angular’s RxJS allows reactive state management:

Vue Example (Vuex/Pinia):

const store = useStore();
const count = computed(() => store.count);
function increment() {
  store.increment();
}

Angular Example (RxJS State Management):

this.count$ = this.stateService.count$;
increment() { this.stateService.increment(); }

📍 Angular’s advantage: No need for a centralized state library — RxJS handles reactivity natively.

Understanding RxJS: The Key to Angular’s Reactivity

RxJS (Reactive Extensions for JavaScript) is the backbone of Angular’s reactivity system. It introduces a declarative approach to handling data streams, making it easier to deal with asynchronous operations and event-driven programming.

Core Concepts of RxJS

RxJS is built around a few core concepts that make it a powerful tool for managing asynchronous data in a declarative way. Let’s break them down in depth so you truly understand how RxJS works at its core.

1. Observables: The Foundation of RxJS

An Observable is like a function that:

1. Produces multiple values over time.
2. Can be subscribed to.
3. Can be transformed using operators.

Example:

import { Observable } from 'rxjs';

const observable = new Observable<number>((subscriber) => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.next(3);
  subscriber.complete();
});

observable.subscribe({
  next: (value) => console.log(value),
  complete: () => console.log('Stream completed'),
});

✅ Output:

1
2
3
Stream completed

2. Observers & Subscriptions

An Observer listens to an Observable. The Subscription represents the connection to the stream.

const observable = new Observable<string>((subscriber) => {
  subscriber.next('Hello');
  subscriber.next('RxJS');
});

const observer = {
  next: (value: string) => console.log(`Received: ${value}`),
};

const subscription = observable.subscribe(observer);

// Later, if needed, we can unsubscribe
subscription.unsubscribe();

✅ Unsubscribing prevents memory leaks, especially in Angular components.

3. Subjects: Multicasting and Sharing Streams

A Subject is both an Observable and an Observer, meaning it can both emit values and subscribe to them.

📍Basic Subject Example

import { Subject } from 'rxjs';

const subject = new Subject<number>();

subject.subscribe((value) => console.log('Subscriber 1:', value));
subject.subscribe((value) => console.log('Subscriber 2:', value));

subject.next(42);
subject.next(100);

✅ Output:

Subscriber 1: 42
Subscriber 2: 42
Subscriber 1: 100
Subscriber 2: 100

📍BehaviorSubject: Keeping the Last Value

import { BehaviorSubject } from 'rxjs';

const count$ = new BehaviorSubject<number>(0);

count$.subscribe((value) => console.log('Subscriber 1:', value));
count$.next(10);
count$.subscribe((value) => console.log('Subscriber 2:', value));

✅ Output:

Subscriber 1: 0
Subscriber 1: 10
Subscriber 2: 10

📍ReplaySubject: Replaying Multiple Past Values

import { ReplaySubject } from 'rxjs';

const replay$ = new ReplaySubject<number>(2); // Buffer size = 2
replay$.next(1);
replay$.next(2);
replay$.next(3);

replay$.subscribe((value) => console.log('Subscriber:', value));

✅ Output:

Subscriber: 2
Subscriber: 3

4. Operators: The Power of RxJS

Operators allow you to transform, filter, combine, and manipulate Observables.

📍 Transforming Streams with map()

import { of } from 'rxjs';
import { map } from 'rxjs/operators';

of(1, 2, 3)
  .pipe(map((x) => x * 10))
  .subscribe(console.log);

✅ Output:

10
20
30

📍 Filtering Streams with filter()

import { of } from 'rxjs';
import { filter } from 'rxjs/operators';

of(1, 2, 3, 4, 5)
  .pipe(filter((x) => x % 2 === 0))
  .subscribe(console.log);

✅ Output:

2
4

📍 Handling Async Streams with switchMap()

import { fromEvent, of } from 'rxjs';
import { debounceTime, switchMap } from 'rxjs/operators';

const searchInput = document.getElementById('search') as HTMLInputElement;
const search$ = fromEvent(searchInput, 'input').pipe(
  debounceTime(300),
  switchMap((event) => of((event.target as HTMLInputElement).value))
);

search$.subscribe(console.log);

✅ Why switchMap()?

• Cancels the previous API call before making a new one.
• Reduces unnecessary network requests.

5. Managing Subscriptions in Angular

📍 Using async Pipe (Recommended)

<p *ngIf="user$ | async as user">User: {{ user.name }}</p>

📍 Using takeUntil() for Cleanup

import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

private destroy$ = new Subject<void>();

this.someObservable.pipe(takeUntil(this.destroy$)).subscribe();

ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

Real-Life Example: Search Autocomplete with RxJS

Imagine building a search bar that fetches results dynamically as the user types. Without RxJS, handling API calls while avoiding unnecessary requests would be tedious. With RxJS, it’s more efficient:

import { Component } from '@angular/core';
import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
import { Subject, Observable } from 'rxjs';
import { SearchService } from './search.service';

@Component({
  selector: 'app-search',
  template: `
    <input type="text" (input)="search($event.target.value)" placeholder="Search..." />
    <ul>
      <li *ngFor="let result of results$ | async">{{ result }}</li>
    </ul>
  `
})
export class SearchComponent {
  private searchSubject = new Subject<string>();
  results$: Observable<string[]>;

  constructor(private searchService: SearchService) {
    this.results$ = this.searchSubject.pipe(
      debounceTime(300),
      distinctUntilChanged(),
      switchMap(query => this.searchService.search(query))
    );
  }

  search(query: string) {
    this.searchSubject.next(query);
  }
}

Conclusion: Vue vs. Angular Reactivity — A Matter of Perspective

Switching from Vue 3 to Angular 18 is more than just adapting to different syntax — it’s about embracing a completely different mental model of reactivity.

• Vue’s reactivity is simple, automatic, and dependency-tracked, making it intuitive for most developers.
• Angular’s RxJS approach introduces a powerful but more explicit way of handling data flow, offering better scalability and control over complex, event-driven applications.

Understanding RxJS is essential to mastering Angular’s reactive ecosystem. Though the learning curve may feel steep at first, the benefits — such as efficient data handling, real-time updates, and streamlined API communication make it a worthwhile investment for large-scale applications.

At the end of the day, both frameworks solve the same problem in different ways. If you’re coming from Vue, Angular might feel like a puzzle at first — but once the pieces click, you’ll appreciate the control and flexibility it offers.

Thanks for joining me on this deep dive! If you enjoyed this, let’s talk about another programming concept next. Maybe state management across different frameworks? Or how modern web apps handle performance optimizations? Let me know what you’d love to explore next!

What’ll you need

• Node.js and npm (Node Package Manager) installed on your system
• Angular CLI installed globally (npm install -g @angular/cli)
• A code editor (e.g., Visual Studio Code, WebStorm, or Sublime Text)
• Basic knowledge of TypeScript and Angular concepts

To check whether those installed or not, you can run these commands:

code -v
node -v 
npm -v
ng version

If it’s unrecognizable by your machine run these commands to download the unnecessary dependencies; PS this is for macOS.

brew update
brew tap homebrew/cask
brew install visual-studio-code
brew install node@20
npm install -g @angular/cli

For more detail guide about downloading, you can read here:

• https://nodejs.org/en/download/package-manager
• https://angular.dev/installation
• https://code.visualstudio.com/download

To create a functional login page, we’ll cover:

1. Setting up a new Angular project
2. Creating the login component
3. Designing the login page UI
4. Implementing reactive forms for input handling
5. Adding form validation
6. Configuring routes for the login page
7. Implementing error handling and user feedback

Setting up a new Angular project

To set up a new Angular project, run the following command in your terminal. We’ll name our project “login”:

ng new login

-> i use scss       
? Which stylesheet format would you like to use?
  CSS             [ <https://developer.mozilla.org/docs/Web/CSS>                     ]
❯ Sass (SCSS)     [ <https://sass-lang.com/documentation/syntax#scss>                ]
  Sass (Indented) [ <https://sass-lang.com/documentation/syntax#the-indented-syntax> ]
  Less            [ <http://lesscss.org>                                             ]

-> i enable ssr
? Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? (y/N) y

Let’s change our directory to the project that we’ve created and initialize git

cd login
git init

Project Structure

Now that we’ve successfully set up our Angular project, let’s take a moment to familiarize ourselves with its structure. Understanding the project layout is crucial before we start building components and diving deeper into development. As a fellow Angular newcomer, I’ve found that a well-organized folder structure can significantly improve our workflow and code maintainability. You can read more here. Let’s take a quick tour of our project’s anatomy:

• Core: This folder contains the core functionality of your application, like services, interceptors, guards, and configuration files that are essential for your app but not tied to any specific feature. It's the backbone of the application and handles global logic.
• Features: This is where the main modules of your app reside. Each feature, like login, dashboard, or user management, has its own dedicated folder, keeping the logic for individual functionalities well-organized and modular.
• Shared: The shared folder holds reusable components, directives, pipes, and services that can be used across multiple features of your app. It encourages code reuse and keeps things DRY (Don't Repeat Yourself).
• APIs: This folder contains API service files responsible for making HTTP calls to your backend. It's the interface for your app to communicate with external data sources, keeping API logic centralized.
• Types: This folder is where you define TypeScript types and interfaces. By maintaining all the data structures and models in one place, it ensures consistency and type safety across your application.
• Store: this folder manages your global app state, including actions, reducers, effects, and selectors, making it easier to handle complex state login

Configuring routes for the login page

To make the login component as our login, we need to set the login router inside of the app.routes.ts file. Now, if you access the auth/login page, you’ll see login component.

import { Routes } from '@angular/router';
import { LoginComponent } from './features/auth/login/login.component';

export const routes: Routes = [
  { path: 'auth/login', component: LoginComponent },
];

Creating the login component

We’re going to recreate a design I found in the Figma Community. Check it out 👉🏻 here. It’s a slick layout that’ll really make our app pop.

To create the login functionality, we need a login page with a form containing email and password inputs, a captcha for added security, and a submit button. Let’s set this up by running the following command:

ng generate component features/auth/login

By running those command, you’ll have a directory like this:

├── app
├───features
│   └───auth
│       └───login
│               login.component.html
│               login.component.scss
│               login.component.spec.ts
│               login.component.ts

It’s necessity to understand what’s going on before doing any coding. So we will try to understand how to component works.

By default, this command creates the following:

• A directory named after the component
• A component file, <component-name>.component.ts
• A template file, <component-name>.component.html
• A CSS file, <component-name>.component.css
• A testing specification file, <component-name>.component.spec.ts

//Inside login.component.ts
@Component({
 /*
   This selector will determine how the HTML tag will look like
   <app-login></app-login>
 */
  selector: 'app-login',
  
  //to import the template file into the component
  templateUrl: './login.component.html',
  
  //to import the template file into the component
  styleUrl: './login.component.scss',
  
  /*
   Indicating it's stand alone
   (Standalone components provide a simplified way to build Angular applications.
   Standalone components, directives, and pipes aim to streamline the authoring experience by reducing the need for NgModule
  */
  standalone: true,
  
  //placing our imports here later
  imports: [],
  
})

Next up, we’re gonna style our component. To make this quick and easy, I’m using Tailwind CSS and Daisy UI. Here’s why:

• Tailwind CSS: A super flexible CSS framework. It lets us style stuff right in our HTML using utility classes.
• Daisy UI: It’s like a booster pack for Tailwind. It gives us ready-made components to work with.

Together, these tools will help us style our app fast, keep things consistent, and save us from writing tons of custom CSS. To do that we need to install and setup those two.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
npm i -D daisyui@latest

Edit this inside of the tailwind config. I also add custom color and font that we will setup later.

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: false,
  content: ["./src/**/*.{html,ts}"],
  theme: {
    extend: {
      fontFamily: {
        sans: ["Afacad Flux", "sans-serif"],
        roboto: ["Roboto", "sans-serif"],
        display: ["Nunito Sans", "sans-serif"],
      },
      colors: {
        primary: {
          blue: "#000842",
        },
      },
    },
  },
  plugins: [require("daisyui")],
  daisyui: {
    themes: ["light"],
  },
};

Add this inside styles.css

@tailwind base;
@tailwind components;
@tailwind utilities;

To test whether the installation is success or not, you can modify app.component.html

<div>
  <span class="font-bold text-red-400">Test Login</span>
  <router-outlet />
</div>

And, last i want to use certain font style in my code. To add them just edit the index.html and add these inside the head tag. What this code does is basically importing the necessary font and icons.

    <link
      href="https://fonts.googleapis.com/css2?family=Afacad+Flux:slnt,wght@9,100..1000&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined"
      rel="stylesheet"
    />

For every dependency we’ve installed so far you can their documentation here 😁👍

• https://tailwindcss.com/docs/installation
• https://daisyui.com/docs/install/
• https://fonts.google.com/
• https://fonts.google.com/icons

Let’s start slicing 😆‼️

The layout use half-half approach. so we need to separate our page into two section using flex.

//Inside login.html
<div class="flex w-screen h-screen font-display">
  <div class="form-layout">
    <div class="image-layout image-background"></div>
  </div>
</div>

//inside login.scss
.form {
  &-layout {
    @apply w-1/2 h-screen flex flex-col gap-4 px-[6%] justify-center;
  }
}

.image {
  &-layout {
    @apply w-1/2 h-screen flex flex-col items-center justify-end py-[5%];
  }

  &-background {
    @apply bg-primary-blue;
  }
}

For the image adds inside the public folder.

├── public
│   ├── assets
│   │   └── images
│   │       ├── illustrasi.svg
│   └── favicon.ico

<div class="flex w-screen h-screen font-display">
  <div class="form-layout">
    <div class="heading-layout">
      <h1 class="heading-title leading">Sign in here</h1>
      <span class="subtitle">
        If you don’t have an account register You can
        <span class="font-bold text-blue-800">Register here !</span>
      </span>
    </div>
  </div>
  <div class="image-layout image-background">
    <img
      src="assets/images/illustrasi.svg"
      alt="login-illustration"
      class="image-illustration"
    />
  </div>
</div>

.image {
  &-layout {
    @apply w-1/2 h-screen flex flex-col items-center justify-end py-[5%];
  }

  &-background {
    @apply bg-primary-blue;
  }

  &-illustration {
    @apply object-fill w-3/4;
  }
}

.heading {
  &-layout {
    @apply flex flex-col gap-1;
  }
  &-title {
    @apply text-4xl text-slate-700 font-bold;
  }
  &-subtitle {
    @apply text-base font-medium text-gray-400;
  }
}

Implementing reactive forms for input handling

After this, global input techniques will be covered to improve code readability and adhere to the DRY (Don’t Repeat Yourself) principle.

To handle the inputs, we’ll make reusable components to improve code readability and maintainability. To create these components, run the following commands:

ng generate component shared/components/input/text
ng generate component shared/components/input/password
ng generate component shared/components/captcha

├── app
├───features
│   └───auth
│       └───login
│               login.component.html
│               login.component.scss
│               login.component.spec.ts
│               login.component.ts
│
└───shared
    └───components
        ├───captcha
        │       captcha.component.html
        │       captcha.component.scss
        │       captcha.component.spec.ts
        │       captcha.component.ts
        │
        └───input
            ├───password
            │       password.component.html
            │       password.component.scss
            │       password.component.spec.ts
            │       password.component.ts
            │
            └───text
                    text.component.html
                    text.component.scss
                    text.component.spec.ts
                    text.component.ts

To create a highly flexible component, the label, placeholder, validation, class, and icon will be made customizable. This will be achieved by creating bindable properties using the @Input decorator. For more details, see the Angular documentation:https://angular.dev/guide/components/inputs and https://angular.dev/api/core/Input

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

@Component({
  selector: 'global-input-text',
  standalone: true,
  imports: [],
  templateUrl: './text.component.html',
  styleUrl: './text.component.scss',
})
export class TextComponent {
  @Input({ required: true }) name!: string;
  @Input() icon: string = 'mail_outline';
  @Input() type: string = 'text';
  @Input() label: string = '';
  @Input() placeholder: string = '';
  @Input() required: boolean = false;
  @Input() inputClass: string = '';
  @Input() labelClass: string = 'w-full form-control';
}

Next, we need to register our component so we can access the value of the component inside another component. To do that we can use ControlValueAccessor

• ControlValueAccessor Interface: The ControlValueAccessor interface is central to making this component work with Angular forms, ensuring that values can be passed between the component and its parent form.
• Providers: NG_VALUE_ACCESSOR:Provider register the component as a custom form control

How It Works

ControlValueAccessor Interface: This interface makes sure the component can act as a form control. It requires implementing three main functions:

• writeValue(value: any): void This function is called by the parent form when the form control needs to update the value of the input field. It ensures that when the form has a value, it is “written” into the component:

registerOnChange(fn: any): void {
  this.onChange = fn;
}

• registerOnTouched(fn: any): voidThis registers a callback to notify the parent form when the input field is “touched” (i.e., when the user interacts with it but then moves away). It’s useful for showing validation messages when the user finishes interacting with the input:

registerOnTouched(fn: any): void {
  this.onTouched = fn;
}

• When the user types in the input, this function captures the value and passes it to the parent form control:

handleInput(event: Event): void {
    const input = event.target as HTMLInputElement;
    this.value = input.value;
    this.onChange(this.value);
    this.onTouched();
  }

Providers: NG_VALUE_ACCESSOR These are added as providers inside the @Component decorator.

• NG_VALUE_ACCESSOR: This provider registers the TextComponent as a custom form control in Angular’s form system. When Angular sees this component inside a form (for example, with formControlName), it will treat it like a native form control and call the functions like writeValue and registerOnChange. The forwardRef is used to reference the component in the provider declaration before it's fully defined (to avoid circular dependencies).

Putting It All Together

• Value Binding: The writeValue, onChange, and handleInput functions ensure that data flows between the parent form and the component, allowing the input value to be controlled by the form.
• Two-Way Binding: The parent form control can both set the initial value of the input and listen to changes as the user interacts with the component.

Adding form validation

After we made custom component, we need to import them inside our login page.

//Inside login.ts
import { Component, ViewChild } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { TextComponent } from '@app/shared/components/input/text/text.component';
import { PasswordComponent } from '@app/shared/components/input/password/password.component';
import { CaptchaComponent } from '@app/shared/components/captcha/captcha.component';
import {
  FormsModule,
  ReactiveFormsModule,
  FormGroup,
  FormBuilder,
  Validators,
} from '@angular/forms';

@Component({
  selector: 'app-login',
  standalone: true,
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule,
    TextComponent,
    PasswordComponent,
    CaptchaComponent,
  ],
  templateUrl: './login.component.html',
  styleUrl: './login.component.scss',
})

//Inside login.html
<div class="flex w-screen h-screen font-display">
  <div class="form-layout">
    <div class="heading-layout">
      <h1 class="heading-title leading">Sign in here</h1>
      <span class="subtitle">
        If you don’t have an account register You can
        <span class="font-bold text-blue-800">Register here !</span>
      </span>
    </div>
    <form
      class="flex flex-col gap-2"
    >
      <global-input-text
        formControlName="email"
        label="Email or NPP"
        placeholder="Input email or NPP here"
        labelClass="w-full form-control custom-label-class"
        inputClass="w-full cutom-input-class text-md"
        type="email"
        [required]="true"
        icon="mail"
      ></global-input-text>
      <button class="mt-2 text-white btn bg-primary-blue" type="submit">
        Login
      </button>
    </form>
  </div>
  <div class="image-layout image-background">
    <img
      src="assets/images/illustrasi.svg"
      alt="login-illustration"
      class="image-illustration"
    />
  </div>
</div>

.image {
  &-layout {
    @apply w-1/2 h-screen flex flex-col items-center justify-end py-[5%];
  }

  &-background {
    @apply bg-primary-blue;
  }

  &-illustration {
    @apply object-fill w-3/4;
  }
}

.form {
  &-layout {
    @apply w-1/2 h-screen flex flex-col gap-4 px-[6%] justify-center;
  }
}

.heading {
  &-layout {
    @apply flex flex-col gap-1;
  }
  &-title {
    @apply text-4xl text-slate-700 font-bold;
  }
  &-subtitle {
    @apply text-base font-medium text-gray-400;
  }
}

The page now resembles an actual login page. However, the task isn’t complete. Form validation is necessary to validate user input. For security reasons, it’s important to restrict and validate what users can enter.

To do that add this code and pass it into our component

  getEmailErrorMessage(): string {
    const emailControl = this.email;
    if (
      emailControl &&
      (emailControl?.touched || emailControl?.dirty || this.submitted == true)
    ) {
      if (emailControl.hasError('required')) {
        return 'Email is required.';
      }

      if (emailControl.hasError('email')) {
        return 'Please enter a valid email address.';
      }
    }
    return '';
  }

      <global-input-text
        formControlName="email"
        label="Email or NPP"
        placeholder="Input email or NPP here"
        labelClass="w-full form-control custom-label-class"
        inputClass="w-full cutom-input-class text-md"
        type="email"
        [required]="true"
        icon="mail"
        [errorMessage]="getEmailErrorMessage()"
      ></global-input-text>

Then inside our component we need to show the error massage that has been passed.

  @Input() errorMessage: string = '';

  <span *ngIf="!!errorMessage" class="mt-1 text-sm text-red-500">
    {{ errorMessage }}
  </span>

Now, we need to make form works properly.

import { Component, ViewChild } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { TextComponent } from '@app/shared/components/input/text/text.component';
import { PasswordComponent } from '@app/shared/components/input/password/password.component';
import { CaptchaComponent } from '@app/shared/components/captcha/captcha.component';
import {
  FormsModule,
  ReactiveFormsModule,
  FormGroup,
  FormBuilder,
  Validators,
} from '@angular/forms';

@Component({
  selector: 'app-login',
  standalone: true,
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule,
    TextComponent,
    PasswordComponent,
    CaptchaComponent,
  ],
  templateUrl: './login.component.html',
  styleUrl: './login.component.scss',
})
export class LoginComponent {
  submitted = false;
  loginForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.loginForm = this.fb.group({
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required]],
    });
  }

  @ViewChild(CaptchaComponent) captchaComponent!: CaptchaComponent; 

  get email() {
    return this.loginForm.get('email');
  }

  get password() {
    return this.loginForm.get('password');
  }

  getEmailErrorMessage(): string {
    const emailControl = this.email;
    if (
      emailControl &&
      (emailControl?.touched || emailControl?.dirty || this.submitted == true)
    ) {
      if (emailControl.hasError('required')) {
        return 'Email is required.';
      }

      if (emailControl.hasError('email')) {
        return 'Please enter a valid email address.';
      }
    }
    return '';
  }

  getPassErrorMessage(): string {
    const passControl = this.password;
    if (
      passControl &&
      (passControl?.touched || passControl?.dirty || this.submitted == true)
    ) {
      if (passControl.hasError('required')) {
        return 'Password is required.';
      }
    }
    return '';
  }

  handleCaptchaVerification(isVerified: boolean) {
    if (isVerified) {
      console.log('CAPTCHA is verified!');
    } else {
      console.log('CAPTCHA verification failed.');
    }
  }

  handleVerfitication() {
    this.captchaComponent.verifyCaptcha();
    this.getEmailErrorMessage();
    this.getPassErrorMessage();
  }

  onSubmit() {
    this.submitted = true;
    this.handleVerfitication();
  }
}

<div class="flex w-screen h-screen font-display">
  <div class="form-layout">
    <div class="heading-layout">
      <h1 class="heading-title leading">Sign in here</h1>
      <span class="subtitle">
        If you don’t have an account register You can
        <span class="font-bold text-blue-800">Register here !</span>
      </span>
    </div>
    <form
      [formGroup]="loginForm"
      (ngSubmit)="onSubmit()"
      class="flex flex-col gap-2"
    >
      <global-input-text
        formControlName="email"
        label="Email or NPP"
        placeholder="Input email or NPP here"
        labelClass="w-full form-control custom-label-class"
        inputClass="w-full cutom-input-class text-md"
        type="email"
        [required]="true"
        icon="mail"
        [errorMessage]="getEmailErrorMessage()"
      ></global-input-text>
      <global-input-password
        formControlName="password"
        label="Password"
        placeholder="Input password "
        labelClass="w-full form-control custom-label-class"
        inputClass="w-full custom-input-class text-md"
        type="password"
        [required]="true"
        icon="lock"
        [errorMessage]="getPassErrorMessage()"
      >
      </global-input-password>
      <global-captcha
        label="Captcha"
        placeholder="e.g.MUHSH"
        labelClass="w-full form-control custom-label-class text-md"
        inputClass="w-full custom-input-class text-md"
        [required]="true"
        icon="new_releases_outline"
      ></global-captcha>
      <button class="mt-2 text-white btn bg-primary-blue" type="submit">
        Login
      </button>
    </form>
  </div>
  <div class="image-layout image-background">
    <img
      src="assets/images/illustrasi.svg"
      alt="login-illustration"
      class="image-illustration"
    />
  </div>
</div>

Understanding formControlName and Form Groups

In Angular Reactive Forms, the form is managed by a FormGroup, which holds multiple FormControl instances (for each input field, like email, password, etc.).

Each form control in the FormGroup is uniquely identified by a name (e.g., email and password in your case). The formControlName directive is used to bind a specific field in the form (i.e., a FormControl) to a specific form input component.

How formControlName Connects the Form and Component

When you use formControlName="email" inside your form, Angular links this directive to the corresponding FormControl in the FormGroup. So, when the formControlName="email" is applied to a custom component (like your TextComponent), Angular expects that this component can interact with the form just like a native <input> would.

The Role of ControlValueAccessor

In a native HTML <input> field, Angular can directly read and write values using standard DOM methods (value, input events, etc.). However, for a custom component like your TextComponent, Angular needs to know how to interact with it—that's where ControlValueAccessor comes in.

By implementing ControlValueAccessor, your custom component tells Angular how to:

• Set its value: When the parent form changes, the writeValue() method in your component is called with the new value.
• Get its value: When the user types something, the onChange callback function gets triggered, and Angular updates the form control’s value.
• Track its touched state: registerOnTouched is used to let Angular know when the user interacts with the form control, which is important for handling validation.

In summary….

• When we use formControlName="email", we bind the email form control in your FormGroup to the TextComponent.
• The TextComponent behaves like a standard form control because it implements ControlValueAccessor.
• Whenever the user types in the TextComponent, it updates the corresponding form control (email or password) in the parent component’s form (loginForm).
• You can access or manipulate the form values in the parent component just like you would with a regular HTML form input, using methods like this.loginForm.get('email').value.

Closing

And that wraps up today’s tutorial! We still have some exciting things to cover, like setting up protected routes, handling HTTP requests, and diving into testing — but we’ll save those for the next episode. If you have any questions or feedback, feel free to drop them in the comments below. Thanks for tuning in, and I’ll catch you in the next one. Until then, take care and happy coding! 👋