İlk sinyalinizi oluşturma ve güncelleme

Angular sinyalleri öğreticisine hoş geldiniz! Sinyaller, Angular'ın reaktif temel yapı taşıdır ve durumu yönetmenin ve bu durum değiştiğinde kullanıcı arayüzünüzü otomatik olarak güncellemenin bir yolunu sağlar.

Bu aktivitede şunları öğreneceksiniz:

• signal() fonksiyonunu kullanarak ilk sinyalinizi oluşturma
• Değerini bir şablonda görüntüleme
• set() ve update() metotlarını kullanarak sinyal değerini güncelleme

Sinyallerle etkileşimli bir kullanıcı durum sistemi oluşturalım!

1. Signal fonksiyonunu içe aktarın

   Bileşen dosyanızın en üstüne @angular/core paketinden signal fonksiyonunu içe aktarın.

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

2. Bileşeninizde bir sinyal oluşturun

   Bileşen sınıfınıza 'offline' değeriyle başlatılan bir userStatus sinyali ekleyin.

   @Component({
     /* Config omitted */
   })
   export class App {
     userStatus = signal<'online' | 'offline'>('offline');
   }

3. Sinyal değerini şablonda görüntüleyin

   Durum göstergesini, mevcut kullanıcı durumunu görüntüleyecek şekilde güncelleyin:

   1. Sinyali class niteliğine [class]="userStatus()" ile bağlama
   2. ??? yerine {{ userStatus() }} koyarak durum metnini görüntüleme

   <!-- Update from: -->
   <div class="status-indicator offline">
     <span class="status-dot"></span>
     Status: ???
   </div>
   
   <!-- To: -->
   <div class="status-indicator" [class]="userStatus()">
     <span class="status-dot"></span>
     Status: {{ userStatus() }}
   </div>

   Sinyalin değerini okumak için userStatus() şeklinde parantezlerle çağırdığımıza dikkat edin.

4. Sinyali güncellemek için metotlar ekleyin

   set() metodunu kullanarak kullanıcı durumunu değiştiren metotları bileşeninize ekleyin.

   goOnline() {
     this.userStatus.set('online');
   }
   
   goOffline() {
     this.userStatus.set('offline');
   }

   set() metodu, sinyalin değerini tamamen yeni bir değerle değiştirir.

5. Kontrol düğmelerini bağlayın

   Düğmeler zaten şablonda mevcut. Şimdi aşağıdakileri ekleyerek onları metotlarınıza bağlayın:

   1. (click) ile tıklama işleyicileri
   2. Zaten o durumda olunduğunda [disabled] ile devre dışı durumlar

   <!-- Add bindings to the existing buttons: -->
   <button (click)="goOnline()" [disabled]="userStatus() === 'online'">Go Online</button>
   <button (click)="goOffline()" [disabled]="userStatus() === 'offline'">Go Offline</button>

6. update() kullanarak bir geçiş metodu ekleyin

   update() metodunu kullanarak çevrimiçi ve çevrimdışı arasında geçiş yapan bir toggleStatus() metodu ekleyin.

   toggleStatus() {
     this.userStatus.update(current => current === 'online' ? 'offline' : 'online');
   }

   update() metodu, mevcut değeri alan ve yeni değeri döndüren bir fonksiyon alır. Bu, mevcut değeri geçerli durumuna göre değiştirmeniz gerektiğinde kullanışlıdır.

7. Geçiş düğmesi işleyicisini ekleyin

   Geçiş düğmesi zaten şablonda mevcut. Onu toggleStatus() metodunuza bağlayın:

   <button (click)="toggleStatus()" class="toggle-btn">Toggle Status</button>

Tebrikler! İlk sinyalinizi oluşturdunuz ve hem set() hem de update() metotlarını kullanarak nasıl güncelleneceğini öğrendiniz. signal() fonksiyonu, Angular'ın izlediği reaktif bir değer oluşturur ve siz onu güncellediğinizde, kullanıcı arayüzünüz değişiklikleri otomatik olarak yansıtır.

Ardından, computed kullanarak sinyallerden durum türetmeyi öğreneceksiniz!