Episode 23/33: Signal Patterns, "The Women of Angular"
Tags: angular, webdev, javascript, programming
Published: 2023-08-24 07:52:15

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

{% embed https://youtu.be/wcgpEMWRNKQ %}

## 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. 

```typescript
@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),
    ),
  );
}

```


{% embed https://dev.to/this-is-angular/a-sweet-spot-between-signals-and-observables-4chb %}

### 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.

{% embed https://dev.to/mfp22/introducing-the-auto-signal-pattern-1a5h %}

### 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.


{% embed https://medium.com/@eugeniyoz/angular-signals-keeping-the-reactivity-train-c22511e72f5e %}

## 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.

{% embed https://youtu.be/gbwPoyxOw1c %}

## 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](https://github.com/nrwl/nx/releases/tag/16.7.0)

PrimeNg, a UI library, is available in 16.2

[PrimeNg 16.2 Release Notes](https://github.com/primefaces/primeng/releases/tag/16.2.0)

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

[Ionic 7.3 Release Notes]
(https://github.com/ionic-team/ionic-framework/releases/v7.3.0)

---

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](https://github.com/angular/angular/releases/tag/17.0.0-next.0)