DEV Community

Signals: the Do-s and the Don't-s

Armen Vardanyan on February 06, 2024

Original cover photo by Shyam on Unsplash. If we ask any Angular developer "What is the hottest topic in Angular right now?", with almost 100% cer...

Read full post

Lars Rye Jeppesen • Feb 6 '24

Very informative, I have been guilty of using "allowSignalWrites" in effects, at least I updated signals :) .. but I love the patterns you showed here.

As a side note, I just ported one of our internal applications to use signal inputs(), and it's so awesome. The best thing? ngOnChanges are now no more needed, effect() and computed() to the rescue. Awesome.

NgOnChanges is really horrible to work with

Armen Vardanyan Playful Programming Angular • Feb 7 '24

Yes, signal inputs are clearly a superior approach! Totally agree. Thanks for appreciating the article :)

Danish Hafeez • Feb 6 '24

Informative Post well done keep it up

Regard
Danish Hafeez | QA Assistant
ictinnovations.com

Armen Vardanyan Playful Programming Angular • Feb 7 '24

Thanks for your appreciation!

Timur Mishagin • Feb 7 '24

Good article. Thanks.
Have recently upgraded to the latest Angular. Very excited to start working with Signal inputs!

Armen Vardanyan Playful Programming Angular • Feb 7 '24

Great to hear I have been of help to you!

Ricardo Esteves • Feb 8 '24

Thanks for sharing!

Okoro chimezie bright • Feb 8 '24

Thank you for sharing.

Lars Gyrup Brink Nielsen Playful Programming Angular • Aug 8 '24

Thank you for this amazing article, @armandotrue 👏

The toObservable-toSignal composition is elegant and it's the first time I've seen it.

export class SomeComponent {
  http = inject(HttpClient);
  query = signal<string>();
  items = toSignal(
    toObservable(this.query).pipe(
      debounceTime(500),
      switchMap(query => this.http.get<Item[]>(`/api/items?q=${query}`))
    ),
  );
}

However, doesn't this make the HTTP request side effect eager unless we use RxJS operators to guard against this? One thing you forgot is initializing the query signal with empty string ('') or another bottom value. The thing about signals is that they, like BehaviorSubjects alway must have a current value, causing the items signal and its built-in effect to immediately (well, after 500ms) kick off.