Angular Signals: Bikin UI Masa Depan dengan Komponen Kreatif

Halo gaes! Balik lagi nih, siap-siap kita ngulik sesuatu yang lagi hype banget di dunia Angular. Kalau kamu pengen bikin antarmuka yang super reaktif, performanya ngebut, dan gampang banget dikelola, berarti kamu wajib banget kenalan sama Angular Signals. Ini bukan sekadar fitur baru, tapi game changer yang bakal bikin workflow development kamu makin asik dan anti pusing!

Di artikel ini, kita bakal spill habis-habisan gimana Angular Signals bisa bantu kamu bangun komponen kreatif yang future-proof. Skuy!

Vibes Baru di Angular: Ngapain Sih Pakai Signals?

Bayangin gini, ngab. Dulu, ngurusin state di komponen Angular itu kadang bikin mumet. Perlu RxJS, Observables, Subjects, Change Detection, dan segala macemnya. Emang powerful, tapi kadang bikin kaget kalau belum terbiasa. Nah, Signals ini hadir buat menyederhanakan itu semua, terutama buat state yang sifatnya granular dan berubah-ubah di komponen kita.

Kenapa Angular Signals ini mantul banget?

1. Performa Maksimal: Dengan Signals, Angular tahu persis bagian mana dari UI yang perlu di-update. Jadi, change detection-nya jauh lebih efisien dan terarah. UI kamu bakal kerasa lebih responsif dan ngebut!
2. Developer Experience (DX) Ciamik: Sintaksnya lebih simpel, lebih gampang dibaca, dan logikanya lebih straightforward. Bye-bye boilerplate yang bikin mager!
3. Reaktivitas Granular: Kamu bisa memantau perubahan pada state sekecil apa pun dengan presisi. Ini bikin kode kamu jadi lebih prediktif dan mudah di-debug.
4. Bukan Pengganti RxJS, Tapi Pelengkap: Penting nih digarisbawahi. Signals bukan berarti kamu harus buang RxJS. Justru, keduanya bisa kolaborasi manis banget. Signals buat state internal komponen, RxJS buat stream data yang kompleks, async operations, atau event handling global.

Ngulik Basic API Signals: Fondasi UI Reaktif

Oke, mari kita bedah inti dari Angular Signals. Ada tiga API utama yang wajib kamu tahu:

1. signal(): Sumber Kebahagiaan State Kamu

Ini adalah fungsi paling dasar buat mendeklarasikan sebuah state yang reaktif. Nilainya bisa kamu baca dan update kapan aja.

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

// Deklarasi signal dengan nilai awal 0
const counter = signal(0);

// Cara baca nilainya:
console.log(counter()); // Output: 0

// Cara update nilainya:
counter.set(5);
console.log(counter()); // Output: 5

// Bisa juga update pakai updater function (mirip setState di React, tapi lebih clean):
counter.update(currentValue => currentValue + 1);
console.log(counter()); // Output: 6

2. computed(): State Cerdas yang Ngikutin Perubahan Lain

Kalau kamu punya state yang nilainya bergantung pada signal lain, computed() adalah jawabannya. Dia bakal otomatis nge-update nilainya setiap kali signal yang jadi dependensinya berubah. Ini super efisien karena cuma dihitung ulang kalau emang perlu.

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

const firstName = signal('Budi');
const lastName = signal('Santoso');

// `fullName` akan otomatis berubah jika `firstName` atau `lastName` berubah
const fullName = computed(() => `${firstName()} ${lastName()}`);

console.log(fullName()); // Output: Budi Santoso

firstName.set('Andi');
console.log(fullName()); // Output: Andi Santoso (otomatis update!)

3. effect(): Ngejalanin Side Effects

effect() ini dipakai buat ngejalanin kode sebagai side effect setiap kali ada signal yang dibaca di dalamnya berubah. Misalnya, buat logging, menyimpan ke localStorage, atau sinkronisasi dengan non-reactive code.

⚠️ PENTING BANGET: Gunakan effect() dengan bijak! Hindari penggunaan effect() buat nge-update state lain atau ngubah DOM secara langsung. Sebisa mungkin, effect() itu buat hal-hal di luar rendering UI.

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

const count = signal(0);

// Setiap kali `count` berubah, effect ini bakal jalan
effect(() => {
  console.log(`Current count is: ${count()}`);
});

count.set(1); // Output: Current count is: 1
count.update(val => val + 1); // Output: Current count is: 2

Skuy, Bikin Komponen Kreatif Pakai Signals!

Sekarang, gimana kita aplikasiin Signals ini buat bikin komponen yang kece badai? Mari kita bikin contoh sederhana tapi fungsional: sebuah komponen rating bintang yang reaktif.

Struktur File:

src/app/
├── app.component.ts
├── app.component.html
├── app.component.css
└── components/
    └── star-rating/
        ├── star-rating.component.ts
        ├── star-rating.component.html
        └── star-rating.component.css

1. star-rating.component.ts Kita bakal pakai signal buat nyimpen rating yang dipilih dan computed buat nentuin bintang mana yang harus nyala.

import { Component, Input, Output, EventEmitter, signal, computed } from '@angular/core';
import { CommonModule } from '@angular/common'; // Jangan lupa import CommonModule

@Component({
  selector: 'app-star-rating',
  standalone: true, // Pakai standalone component biar gampang!
  imports: [CommonModule],
  templateUrl: './star-rating.component.html',
  styleUrls: ['./star-rating.component.css']
})
export class StarRatingComponent {
  // Input: nilai rating awal dari parent
  @Input()
  set initialRating(value: number) {
    // Update signal saat input berubah
    this.selectedRating.set(value);
  }

  // Output: kirim nilai rating yang dipilih ke parent
  @Output() ratingChange = new EventEmitter<number>();

  // State internal komponen pakai signal
  // selectedRating: menyimpan rating yang sedang dipilih
  selectedRating = signal(0);
  // hoverRating: menyimpan rating saat mouse hover, buat preview
  hoverRating = signal(0);

  // Computed: menentukan rating yang aktif (saat hover atau sudah dipilih)
  activeRating = computed(() => this.hoverRating() > 0 ? this.hoverRating() : this.selectedRating());

  // Buat array bintang, misal 5 bintang
  stars = [1, 2, 3, 4, 5];

  // Handler saat mouse masuk ke bintang
  onStarHover(star: number) {
    this.hoverRating.set(star);
  }

  // Handler saat mouse keluar dari area bintang
  onStarLeave() {
    this.hoverRating.set(0); // Reset hover
  }

  // Handler saat bintang diklik
  onStarClick(star: number) {
    this.selectedRating.set(star);
    this.ratingChange.emit(star); // Emit event ke parent
  }

  // Cek apakah bintang harus aktif atau tidak (CSS class)
  isStarActive(star: number): boolean {
    return star <= this.activeRating();
  }
}

2. star-rating.component.html Template-nya simpel, looping bintang dan kasih class sesuai state activeRating.

<div class="star-rating">
  <span
    *ngFor="let star of stars"
    class="star"
    [class.active]="isStarActive(star)"
    (mouseenter)="onStarHover(star)"
    (mouseleave)="onStarLeave()"
    (click)="onStarClick(star)"
  >
    &#9733; <!-- Unicode karakter bintang -->
  </span>
</div>
<p>You rated: {{ selectedRating() }} stars</p>

3. star-rating.component.css Sedikit styling biar cakep.

.star-rating {
  display: flex;
  font-size: 2em;
  cursor: pointer;
  color: #ccc; /* Warna default bintang */
}

.star {
  transition: color 0.2s ease-in-out;
}

.star.active {
  color: gold; /* Warna bintang aktif */
}

p {
  margin-top: 10px;
  font-size: 0.9em;
  color: #555;
}

4. app.component.ts (Parent Component) Gimana cara kita pakai app-star-rating di parent?

import { Component, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { StarRatingComponent } from './components/star-rating/star-rating.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, StarRatingComponent], // Jangan lupa import!
  template: `
    <div class="container">
      <h1>Halo, Gaes! Kasih Rating Dong!</h1>
      <app-star-rating
        [initialRating]="myInitialRating()"
        (ratingChange)="onRatingChanged($event)"
      ></app-star-rating>
      <p>Rating kamu sekarang: <strong>{{ userRating() }}</strong></p>
      <button (click)="resetRating()">Reset Rating</button>
    </div>
  `,
  styles: `
    .container {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      max-width: 600px;
      margin: 50px auto;
      padding: 30px;
      border-radius: 12px;
      box-shadow: 0 8px 16px rgba(0,0,0,0.1);
      background-color: #fff;
      text-align: center;
    }
    h1 {
      color: #333;
      margin-bottom: 30px;
      font-size: 2.2em;
    }
    strong {
      color: #007bff;
      font-size: 1.2em;
    }
    button {
      background-color: #6c757d;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 5px;
      cursor: pointer;
      font-size: 1em;
      margin-top: 20px;
      transition: background-color 0.3s ease;
    }
    button:hover {
      background-color: #5a6268;
    }
  `
})
export class AppComponent {
  // State rating dari user, pakai signal juga di parent
  userRating = signal(3);
  myInitialRating = signal(3); // Contoh initial rating dari parent

  onRatingChanged(rating: number) {
    this.userRating.set(rating);
    console.log('Rating baru dari child:', rating);
  }

  resetRating() {
    this.userRating.set(0);
    this.myInitialRating.set(0); // Update initialRating juga biar child reset
  }
}

Gimana? Simpel banget kan? Kita pakai signal buat state internal yang dinamis (selectedRating, hoverRating), computed buat logic tampilannya (activeRating), dan @Input @Output buat komunikasi antar komponen. Semuanya terasa lebih reaktif dan mudah dikelola.

Tips & Best Practices Biar Ngoding Makin Asik

1. Kapan Pakai Signals, Kapan RxJS?
   • Signals: Buat state granular dalam komponen, props komponen, atau state UI lokal yang berubah-ubah. Cocok banget buat performa OnPush detection strategy.
   • RxJS: Buat data stream asynchronous, event global, operasi kompleks seperti debounce/throttle, atau integrasi dengan API backend. Bisa juga pakai toSignal() dari @angular/core/rxjs-interop buat konversi Observable ke Signal.
2. Hati-hati dengan effect(): Ingat, effect() itu buat side effects! Jangan pakai buat update state lain atau re-render UI. Kalau kamu perlu nilai reaktif lain, pakai computed().
3. Memanfaatkan OnPush Strategy: Ketika kamu pakai Signals, komponen dengan ChangeDetectionStrategy.OnPush bakal bekerja lebih optimal lagi. Angular tahu persis kapan harus re-render karena Signals-nya berubah.
4. Testing Signals: Signals mudah di-test karena mereka adalah plain JavaScript function dan object. Kamu bisa langsung panggil signal(), computed(), dan cek nilainya.
5. Think Reactive: Biasakan berpikir dalam paradigma reaktif. Daripada memanipulasi DOM secara imperatif, pikirkan bagaimana kamu bisa merepresentasikan state kamu sebagai signal, dan biarkan Angular yang mengurus render-nya.

Kesimpulan: Masa Depan UI Ada di Tangan Kita!

Nah, gaes. Dari sini kita bisa lihat kalau Angular Signals ini emang ngebawa angin segar banget buat pengembangan UI. Dengan performa yang ngebut, DX yang makin mulus, dan reaktivitas yang presisi, kamu bisa banget bikin antarmuka yang nggak cuma fungsional tapi juga super responsif dan maintainable.

Signals ini bukan cuma tren, tapi evolusi yang emang kita butuhin. Jadi, yuk buruan eksplorasi lebih jauh, coba di proyek-proyek kamu, dan rasakan sendiri kemudahannya. Bikin antarmuka masa depan yang ciamik itu ternyata nggak seribet yang dibayangkan, kok! Gaspol terus, ngab!