Forem: Cyrill Brito

Angular Computed Signal with an Observable

Cyrill Brito — Sun, 18 Feb 2024 22:36:58 +0000

Angular signals provide a robust reactivity system, streamlining the data flow within Angular applications and also improving the developer experience.
However, their integration with RxJS can sometimes present challenges, leading to messy and less straightforward code.

In this blog post, we'll explore a strategy to streamline the interaction between Angular signals and RxJS, making their combined usage more straightforward and efficient.

Scenario - Pokédex

In an attempt to show some of the problems I created this simple scenario where we have a simple Pokémon display, and we use an API to get the Pokémon information. We can click on the Previous and the Next to iterate over the Pokédex, and the Refresh should re-fetch the information from the API.

There are only two components, the AppComponent that contains the buttons, and the PokemonComponent that displays the information and makes the API calls.

The PokemonComponent has an id signal input and if it changes the component makes a new API call to get the Pokémon info. There is also the refresh() that must re-call the API for the current id.



@Component({
  selector: 'app-root',
  template: `
    <button (click)="id=id-1">Previous</button>
    <button (click)="pokemonComp.refresh()">Refresh</button>
    <button (click)="id=id+1">Next</button>
    <app-pokemon #pokemonComp [id]="id"/>
  `
})
export class AppComponent {
  id = 1;
}

@Component({
  selector: 'app-pokemon',
  template: `
    <h1>{{ pokemon()?.name }}</h1>
    <img [src]="pokemon()?.sprites?.front_default">
  `,
})
export class PokemonComponent {
  http = inject(HttpClient);

  id = input.required<number>();

  id$ = toObservable(this.id);
  refresh$ = new BehaviorSubject(null);
  pokemon$ = combineLatest([this.id$, this.refresh$]).pipe(
    switchMap(([id]) => this.http.get(`https://pokeapi.co/api/v2/pokemon/${id}`)),
  );

  pokemon = toSignal(this.pokemon$);

  refresh() {
    this.refresh$.next(null);
  }
}

How to improve - computedAsync

The code above works but there is a lot of code gymnastic needed to make sure the Signal world and the RxJs world work together, from the toObservable, toSignal, and the combileLatest, and refresh$ it all feels a bit too clunky.

If we forget the observables and focus on what we are trying to do, we want a kind of computed that could unwrap the observable and store its value in the signal.



// Receives a function that must return an observable
function computedAsync<T>(computation: () => Observable<T>): Signal<T> {

  // Creates a signal that where the observable result will be stored
  const sig = signal<T>(null);

  // Uses effect to make sure that if there are changes in the computation
  // that it gets re-runned
  effect(() => {
    // Reset signal value
    sig.set(null);
    // Get the observable
    const observable = computation();
    // Subscribe and store the result in the signal
    observable.subscribe((result) => sig.set(result));
  }, { allowSignalWrites: true });

  return sig;
}

With this, we already gain the amazing power of working the RxJs while depending on signals, this will simplify the code a lot as we will see soon.
But there are a few problems that we still need to solve, first, we need to find a way to replicate the refresh functionality, and second, we need to make sure to not leave open observable subscriptions.



function computedAsync<T>(computation: () => Observable<T>): Signal<T> & { recompute: () => void } {

  const sig = signal<T>(null);

  // Save current subscription to be able to unsubscribe 
  let subscription: Subscription;

  // Create an arrow function that contains the signal updating logic
  const recompute = () => {
    sig.set(null);
    // Before making the new subscription, unsub from the previous one
    if (subscription && !subscription.closed) {
      subscription.unsubscribe();
    }
    const observable = computation();
    subscription = observable.subscribe((result) => sig.set(result));
  };

  effect(recompute, { allowSignalWrites: true });

  // Add the recompute function to the returned signal, so that it can be called from the outside
  return Object.assign(sig, { recompute });
}

Let's put it to use

Let's see how our PokemonComponent looks if we use the computedAsync.



@Component({
  selector: 'app-pokemon',
  template: `
    <h1>{{ pokemon()?.name }}</h1>
    <img [src]="pokemon()?.sprites?.front_default">
  `,
})
export class PokemonComponent {
  http = inject(HttpClient);

  id = input.required<number>();

  pokemon = computedAsync(() => this.http.get(`https://pokeapi.co/api/v2/pokemon/${this.id()}`));

  refresh() {
    this.pokemon.recompute();
  }
}

I don't know about you but this feels like a huge improvement to the original code, there are no gymnastics to make sure the observables are triggered at the right time and no boilerplate toObservable and toSignal.

I think that the signals API is one of the best things that Angular added, it is very powerful and flexible, and with the deeper integration in the framework with will for sure get better. Let me know our thoughts about this in the comments. 🙂

Stop re-implementing ControlValueAccessor

Cyrill Brito — Mon, 05 Jun 2023 11:31:55 +0000

Almost every developer has come to the point where he wants to create his own form components, like a custom text input, a pretty file picker, or just a wrapper component of a library.

To make sure that this custom component works on Template and Reactive forms you will need to implement the ControlValueAccessor, but some of the times this can be receptive and unnecessary if all you want is to pass the value without changing it.

In this article, I will showcase a way to avoid re-implementing the ControlValueAccessor but still be able to use the Forms API.

ControlValueAccessor

Defines an interface that acts as a bridge between the Angular forms API and a native element in the DOM. - Angular Docs

I will not dive into the ways this interface works, but here is a basic implementation example:



@Component({
  standalone: true,
  imports: [FormsModule],
  selector: 'app-custom-input',
  template: `
    <input
      [ngModel]="value"
      (ngModelChange)="onChange($event)"
      [disabled]="isDisabled"
      (blur)="onTouched()"
    />
  `,
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    multi: true,
    useExisting: CustomInputComponent,
  }],
})
export class CustomInputComponent implements ControlValueAccessor {

  value: string;
  isDisabled: boolean;
  onChange: (value: string) => void;
  onTouched: () => void;

  writeValue(value: any) {
    this.value = value || '';
  }

  registerOnChange(fn: any) {
    this.onChange = fn;
  }

  registerOnTouched(fn: any) {
    this.onTouched = fn;
  }

  setDisabledState(isDisabled: boolean) {
    this.isDisabled = isDisabled;
  }
}

Implementing this is not hard, but it can be lengthy and repetitive. Most of the time we don't even want to change the way the value is bound to the input, so using the angular provided binds would be enough.
Let's look at a way we can stop re-implementing the same logic once and once again.

NgModel under the hood

Let's have a peek at how the ngModel directive syncs its value with the component.

The directive injects the NG_VALUE_ACCESSOR to be able to interact with the underlying component, this is the reason why we always need to provide it in our form components.
For the browser native inputs, angular includes some directives that provide NG_VALUE_ACCESSOR, one of them being the DefaultValueAccessor.

The ngModel creates a FormControl that it uses to keep the state of the control, like value, disabled, touched...

Based on this we can see that our custom component looks like a bridge between the app and the DefaultValueAccessor, we can also see that there are 2 FormControl being created in this example, one on each ngModel.

Taking into account that our custom component is just a bridge and that the 1st ngModel already has a FormControl, we can grab this control and just pass it to the input without modifying it in any way.

Accessing the directive control

The ngModel, formControl, and formControlName are the 3 directives that allow a component to interact with the forms API. From inside a component, we can have access to these directives by injecting the token NgControl.

So doing this we will have access to the directive that in turn has the FormControl that we can use.

Here is an example of how this would look like, but for now we still need a dummy value accessor for Angular to see the component as valid for form use.



@Component({
  standalone: true,
  imports: [ReactiveFormsModule],
  selector: 'app-custom-input',
  template: `
    <input [formControl]="control" />
  `,
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    multi: true,
    useExisting: CustomInputComponent,
  }],
})
export class CustomInputComponent implements ControlValueAccessor, OnInit {

  control: FormControl;
  injector = inject(Injector);

  ngOnInit() {
    // ⬇ It can cause a circular dependency if injected in the constructor
    const ngControl = this.injector.get(NgControl, null, { self: true, optional: true });

    if (ngControl instanceof NgModel) {

      // ⬇ Grab the host control
      this.control = ngControl.control;

      // ⬇ Makes sure the ngModel is updated
      ngControl.control.valueChanges.subscribe((value) => {
        if (ngControl.model !== value || ngControl.viewModel !== value) {
          ngControl.viewToModelUpdate(value);
        }
      });

    } else {
      this.control = new FormControl();
    }
  }

  // ⬇ Dummy ValueAccessor methods
  writeValue() { }
  registerOnChange() { }
  registerOnTouched() { }
}

We need to also make sure the viewToModelUpdate is called when the value changes, so that the ngModel is kept updated and that the ngModelChange is triggered.

FormControl and FormControlName

Let's have a look at how this can the extended to also work with the other directives. The formControl is the simplest one, all you need to add is this.



if (ngControl instanceof FormControlDirective) {
  this.control = ngControl.control;
}

When using formControlName, to make sure we have the correct fromControl we need the ControlContainer, this is what keeps and manages all the controls in a form/group.

So we can inject it and grab the control using the name of the control, like so.



if (ngControl instanceof FormControlName) {
  const container = this.injector.get(ControlContainer).control as FormGroup;
  this.control = container.controls[ngControl.name] as FormControl;
  return;
}

Reuse with Directive Composition

With the 3 directives working, we can look at how to arrange this in a way that is simple to use. I think that the Directive Composition API is a good fit for this.

So if we put all the pieces together in a Directive, this is how it should look like.



@Directive({
  standalone: true,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      multi: true,
      useExisting: HostControlDirective,
    },
  ],
})
export class HostControlDirective implements ControlValueAccessor {

  control: FormControl;

  private injector = inject(Injector);
  private subscription?: Subscription;

  ngOnInit() {
    const ngControl = this.injector.get(NgControl, null, { self: true, optional: true });

    if (ngControl instanceof NgModel) {
      this.control = ngControl.control;
      this.subscription = ngControl.control.valueChanges.subscribe((value) => {
        if (ngControl.model !== value || ngControl.viewModel !== value) {
          ngControl.viewToModelUpdate(value);
        }
      });

    } else if (ngControl instanceof FormControlDirective) {
      this.control = ngControl.control;

    } else if (ngControl instanceof FormControlName) {
      const container = this.injector.get(ControlContainer).control as FormGroup;
      this.control = container.controls[ngControl.name] as FormControl;

    } else {
      this.control = new FormControl();
    }
  }

  writeValue() { }
  registerOnChange() { }
  registerOnTouched() { }

  ngOnDestroy() {
    this.subscription?.unsubscribe();
  }
}

And with all the code being in the reusable directive, our custom components looks very clean.



@Component({
  standalone: true,
  imports: [ReactiveFormsModule],
  selector: 'app-custom-input',
  template: `
    <input [formControl]="hcd.control" />
  `,
  hostDirectives: [HostControlDirective],
})
export class CustomInputComponent {
  hcd = inject(HostControlDirective);
}