DEV Community

Cover image for Signals: the Do-s and the Don't-s

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...
Collapse
 
spock123 profile image
Lars Rye Jeppesen

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

Collapse
 
armandotrue profile image
Armen Vardanyan

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

Collapse
 
ricardogesteves profile image
Ricardo Esteves

Thanks for sharing!

Collapse
 
danishhafeez profile image
Danish Hafeez

Informative Post well done keep it up

Regard
Danish Hafeez | QA Assistant
ictinnovations.com

Collapse
 
armandotrue profile image
Armen Vardanyan

Thanks for your appreciation!

Collapse
 
tmish profile image
Timur Mishagin

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

Collapse
 
armandotrue profile image
Armen Vardanyan

Great to hear I have been of help to you!

Collapse
 
mezieb profile image
Okoro chimezie bright

Thank you for sharing.

Collapse
 
layzee profile image
Lars Gyrup Brink Nielsen

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}`))
    ),
  );
}
Enter fullscreen mode Exit fullscreen mode

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.

Collapse
 
layzee profile image
Lars Gyrup Brink Nielsen

Do you have tips on the allowSignalWrites effect option, @armandotrue?

Collapse
 
jangelodev profile image
João Angelo

Hi Armen Vardanyan,
Excellent content, very useful.
Thanks for sharing.

Collapse
 
artak profile image
Artak Mkr

Good article. Thanks))

Collapse
 
fore profile image
Fore

Thank you for sharing, Armen! Really useful.

Question about companyEmployees. How it will get updated if a company value is updated with selector for example and it is untracked?