blog/angular-signal-inputs

[giscus[bot]]

blog/angular-signal-inputs

Revolutionize Your Angular Components with the brand new Reactive Signal Inputs.

https://angularexperts.io/blog/angular-signal-inputs

[Ban117]

It's a tad frustrating that effects have to run (at least once) unlike a setter. I'm guessing there's no elegant way around this right?

[nivekcode]

Yes you are right, effects run at least once. I guess the only way around this is to add some extra checks inside the effect.

[fpl1976]

Do you have an example on how to test a component with a required input signal, and some computed values depending on it?

[willydee]

After a lot of hacking around, and failing to find any relevant test code examples, I finally managed to put something together:

todo-item.component.ts

import { Observable, EMPTY, of, switchMap } from 'rxjs';
import { Injectable, Component, inject, input } from '@angular/core';
import { toSignal, toObservable } from '@angular/core/rxjs-interop';

@Injectable({ providedIn: 'root' })
class TodosService {
  getTodo(id: number): Observable<string> {
    return id > 0 ? of('todo') : EMPTY;
  }
}

@Component({
  standalone: true,
  selector: 'todo-item',
  template: `{{ todo() | json }}`,
  imports: [JsonPipe],
})
export default class TodoItemComponent {
  private todoService = inject(TodosService);
  id = input.required<number>();
  todo = toSignal(
    toObservable(this.id).pipe(switchMap((id) => this.todoService.getTodo(id))),
  );
}

todo-item.component.spec.ts

import { TestBed, ComponentFixture } from '@angular/core/testing';
import { ComponentRef } from '@angular/core';
import TodoItemComponent from './todo-item.component';

describe('TodoItemComponent', () => {
  let fixture: ComponentFixture<TodoItemComponent>;
  let component: TodoItemComponent;
  let ref: ComponentRef<TodoItemComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({ imports: [TodoItemComponent] });
    fixture = TestBed.createComponent(TodoItemComponent);
    component = fixture.componentInstance;
    ref = fixture.componentRef;
  });

  describe('todo signal', () => {
    it('should return expected string', () => {
      expect(component.todo()).toBeUndefined();
      ref.setInput('id', 1);
      fixture.detectChanges(); // <-- this is important, even when template is not affected
      expect(component.todo()).toBe('todo');
    });
  });
});

[fpl1976]

Have you tried to not convert the id Signal to Observable before querying the TodoService?

[willydee]

Nope. The use case I had to solve is a bit more complex, so I needed an Observable anyway. In the example I posted, when passing the signal result to the getTodo() method directly, it throws an error:

Error: NG0950: Input is required but no value is available yet.

Which is caused by executing the signal immediately at construction time.

[RobertBune]

I have a slightly different use case which I am not sure how I should solve.

I am using an input signal to bind to a property from the parent component, I also have a local writeable signal for managing the state of a checkbox. The checkbox should be deselected when a new dialogue loads.

  dialogue = input.required<Dialogue>();
  showTranslation = signal(false);

If the user selects a new route the component is reused, it is not destroyed, the dialogue signal will be updated but showTranslation is not reset.

I have two solutions, neither of which feel right.

  // Solution #1 simple but is this really the correct approach in a new signal based world?
  ngOnChanges(changes: SimpleChanges) {
    if (changes['dialogue']) {
      this.showTranslation.set(false);
    }
  }

Or...

  // Solution #2 works ok but seems complicated and messy.
  subscription!: Subscription;
  dialogue$ = toObservable(this.dialogue);
  ngOnInit() {
    const dialogue$ = toObservable(this.dialogue);
    this.subscription = this.dialogue$.subscribe(val => this.showTranslation.set(false));
  }
  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

I also looked at using effect() or toSignal()/toObservable(), but neither of these allow me to also use the signal set() function to update the state of showTranslation.

Is there a better way to handle this?

[RobertBune]

SOLVED!

I have spent a couple days trying to solve this. Numerous searched resulted in many articles on signals but none matching my use case. Most examples of using an effect() only did a simple console.log(). Some more advanced examples used an untracked() block to call a service API etc. None demonstrated using one signal to trigger an update of another (non-computed) signal.

Then shortly after posting my comment above, I did some more research I finally discovered the solution. I was missing the allowSignalWrites: true option.

  // Solution #3 I think this option is the best fit?
  constructor() {
    effect(() => {
      this.dialogue();
      untracked(() => {
        this.showTranslation.set(false);
      })
    }, {
      allowSignalWrites: true
    })
  }

I have included and untracked() block above as I do not want this triggered when showTranslation is updated. I did observe that angular was smart enough to figure out it was only being use here to set a new value, so even without the untracked() block it still worked just fine. Even so, it still felt more correct and safer to wrap the signal setting inside untracked().