Episode 23/33: Signal Patterns, "The Women of Angular"

We got new content centring around Signal patterns, and the Angular Community meetup published the recording of their special event, "The Women of Angular".

Signal Patterns

Combining Signals and Observables: Enea Jahollari & Chau Tran

The future ubiquity of signals demands that we come up with new patterns. Last week, Enea Jahollori and Chao Tran did exactly that.

They developed a utility function that applies the RxJs pipe operators to one signal or an array containing both Signals and Observables.

Internally, it comes down to going back and forth between the methods toSignal and toObservable.

There are definitely quite a number of use cases for it.

---

This example shows a signal representing a post. There is also an Observable which contains the amount of likes for that post.

We want to come up with a qualityPost of type Signal that requires that post has at least 10 likes.

computedFrom combines both post and likes$ and runs the filter and map operators from RxJs to the source.

@Component({
  selector: 'app-post',
  template: `<p>{{ qualityPost() }}</p>`,
  standalone: true,
})
export class QualityPostComponent {
  post = signal('The weather is nice today');
  likes$ = interval(1000);

  // switches to value of post after 10 seconds
  qualityPost = computedFrom(
    [this.post, this.likes$],
    '',
    pipe(
      filter(([, likes]) => likes >= 10),
      map(([post]) => post),
    ),
  );
}

A sweet spot between signals and observables 🍬

Enea Jahollari for This is Angular ・ Aug 18 '23

#angular #javascript #webdev #signals

Auto Signal: Mike Pearson

Mike Pearson recently also introduced a pattern scope called the "Auto Signal" pattern. The use case here is for shared signals that depend on an underlying Observable.

His utility method works like toSignal but also handles automatic unsubscription when the component holding that signal gets destroyed.

Introducing the auto-signal pattern

Mike Pearson ・ Aug 2 '23

#angular #rxjs #signals

Dos and Don'ts: Yevgeny Tuboltsev

Yevgeny Tuboltsev published an article with a list of do's and don'ts - or simply anti-patterns - for Signals.

Angular Signals: Keeping the Reactivity Train | by 🪄 OZ 🎩 | Medium

🪄 OZ 🎩 ・ Jun 13, 2024 ・

Medium

The Women of Angular

The Angular Meetup published their recording of a very special meetup titled "The Women of Angular". There were two talks.
Maria Korneeva talked about "What do great women in IT and Angular have in common", and Martina Kraus about Signals and RxJs.

And there was a panel discussion with popular or famous women from the Angular community.

New Releases

Nx, an alternative to the Angular CLI, came out in version 16.7. For E2E testing, it gives us now the choice between Playwright and Cypress.

Nx 16.7 Release Notes

PrimeNg, a UI library, is available in 16.2

PrimeNg 16.2 Release Notes

Ionic, a cross-platform toolkit, went up to 7.3.

Ionic 7.3 Release Notes

---

Angular 17 had its first pre-release. It already contains the first step towards the control-flow syntax in the template.

Angular 17 Pre-Release