Introduction

Hey there Angular enthusiasts! Are you ready to level up your reactive game? Today, we'll dive into Angular Signals, a fresh take on reactive programming that'll send your apps soaring through the skies of performance and scalability! 🦸‍♀️🦸‍♂️

Angular Signals are here to save the day, simplifying how we manage reactive contexts and dependencies, and making our code cleaner and more efficient. In this post, we'll explore Angular Signals, learn how to use them, and might even crack a few jokes along the way! 🃏

1. Settable Signals - Unleashing the Power 💪

Settable Signals are superhero signals that can not only return values, but also mutate them! Let's create a Settable Signal for a counter and try out some of its superpowers

import { signal } from '@angular/core'

const counter = signal(0)

counter.set(42) // The answer to life, the universe, and everything!
counter.update((count) => count + 1) // 43, one step beyond the ultimate question!

Full example using a single Standalone component (main.ts file):

import 'zone.js/dist/zone'
import { Component, signal } from '@angular/core'
import { CommonModule } from '@angular/common'
import { bootstrapApplication } from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule],
  template: `
    <h1>{{ name }}</h1>
    <section>
      <h2>Counter</h2>
      <p>{{ counter() }}</p>
      <button (click)="increment()">Increment</button>
    </section>
  `,
})
export class App {
  name = 'Angular Signals'
  counter = signal(0)

  increment() {
    this.counter.set(this.counter() + 1)
  }
}

bootstrapApplication(App)

And for an even more complex example, consider a bucket list which we are directly mutating:

import { signal } from '@angular/core'
import { BucketItem } from './bucket-item.interface.ts'

@Component({...})
export class App {
  const bucketList = signal<BucketItem[]>([])

  newBucketItem() {
    const newItem: BucketItem = {
      title: 'Learn Angular Signals',
      completed: false
    };
    bucketList.mutate((list) => {
      list.push(newItem)
    })
  }
}

2. Computed Signals - The Sidekicks 🦹‍♀️🦹‍♂️

Computed Signals are the trusty sidekicks of Settable Signals, always ready to recalculate and update their values based on their superhero partners' changes.

Let's create a Computed Signal to determine if our counter is even:

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

@Component({...})
export class App {
  const counter = signal(0)
  const isEven = computed(() => counter() % 2 === 0)

  someFunction() {
    console.log(isEven()) // True - as cool as the other side of the pillow!
  }
}

3. Effects - The Superpower Boosters 💥

Effects are the superpower boosters of our Angular Signals, allowing us to run side-effectful functions in a reactive context. Let's create an effect to log the counter value:

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

...
export class App {
  name = 'Angular Signals';
  counter = signal(0);
  logger = effect(() => {
    console.log('counter is: ' + this.counter());
  });
  increment() {
    this.counter.set(this.counter() + 1);
    // "The counter is: <VALUE>" - printed faster than a speeding bullet 🚄
  }
}

4. Dynamic Dependency Tracking - The Shapeshifters 🦎

Dynamic Dependency Tracking is like a shapeshifter, allowing our reactive contexts to adapt and change their dependencies as needed. Consider this Computed Signal:

const dynamic = computed(() => (useA() ? dataA() : dataB()))

This Computed Signal can shape-shift its dependencies from [useA, dataA] to [useA, dataB] and vice versa, making it as flexible as a gymnast!

An app with complete example using Signals

Angular Signals Wishlist App Tutorial and code's links at the bottom

Conclusion

And that's a wrap, folks! 🎬 We've explored the superheroic world of Angular Signals and taken our reactive programming skills to new heights. With Angular Signals in our arsenal, we're ready to tackle even the most complex challenges and save the day for our apps and users! 🌟

Angular Signals - Taking Reactivity to New Heights 🚀