DEV Community: Joaquin Cid

NGXS loading spinners and actions executing

Joaquin Cid — Wed, 30 Oct 2019 13:59:20 +0000

In our web-apps, we deal with async communication to our servers every day, and in order to give our users a better UX we usually display spinners or disable certain pieces of UI while an operation is being executed.

Although this is a very common feature to build, it is never as trivial as one may think so.

If you are using NGXS as your state management library, now you can use a new plugin to know when an action is being executed and control UI elements accordingly.

Async actions

One of the nice things about NGXS is that supports async actions (observables or promises) out of the box, and you can easily implement them like this:

@Action(MyAction)
myAction(ctx: StateContext<StateModel>){
  // ... asyncMethod
  return this.service.get();
}

Now, if we want to display a loading spinner, the preferred way to implement this is to use a loading property in the state, and set it true when the action is executed, and set it false once the async method returns the response.

@Action(MyAction)
myAction(ctx: StateContext<StateModel>){
  // ... asyncMethod
  ctx.patchState({loading: true});
  return this.service.get().pipe(
    tap(response => {
      //...
      ctx.patchState({loading: false});
    })
  );
}

New @ngxs-labs/actions-executing plugin

actions-executing is a new plugin that provides the state of an action being executed. It works by leveraging the actions lifecycle from the Actions stream class, and provides a very easy way to know when an action is being executed.

So, instead of manually setting loading to true or false, we just select the action we can to listen to via @Select

@Select(actionsExecuting([MyAction])) myActionIsExecuting$;

and we can use it on our templates like this:

<span *ngIf="myActionIsExecuting$ | async">
  Loading...
</span>

How to use it

First we need to install the package:

npm install --save @ngxs-labs/actions-executing

Then, we import it in our module:

//...
import { NgxsModule } from '@ngxs/store';
import { NgxsActionsExecutingModule } from '@ngxs-labs/actions-executing';

@NgModule({
    //...
    imports: [
        //...
        NgxsModule.forRoot([
          //... your states
        ]),
        NgxsActionsExecutingModule.forRoot(),
    ],
    //...
})
export class AppModule { }

Finally, as shown before, we just call @Select on the actions we want to listen, and bind it to our template, i.e.:

//...
import { actionsExecuting, ActionsExecuting } from '@ngxs-labs/actions-executing';

//...
export class SingleComponent {

  @Select(actionsExecuting([MyAction])) myActionIsExecuting$: Observable<ActionsExecuting>;

}

<button [disabled]="myActionIsExecuting$ | async"
        (click)="doSomething()">
  My Action
</button>

<span *ngIf="myActionIsExecuting$ | async">
  Loading...
</span>

If you want to see @ngxs-labs/actions-executing you can check out a demo here

Hope you enjoyed this post, and if you did, please show some ❤️. I often write about Angular, Firebase and Google Cloud platform services. If you’re interested on more content, you can follow me on dev.to, medium and twitter.

Angular Reactive Forms typed!

Joaquin Cid — Mon, 26 Aug 2019 12:35:51 +0000

Angular Reactive Forms are great, they come with two way data-binding between the model and view, support for sync/async validation, event handling, and status; but they don't come with typing support.

Lucky for us, adding this feature to Reactive Forms is very easy, and we'll see how we can do that in this tutorial.

First, we'll create our own generic versions of FormGroup<T> and AbstractControl<T> class. We'll just override the minimum required methods and properties to make our forms typed. Let's create a file called forms.ts and the following code.

import {
  FormGroup as NgFormGroup,
  AbstractControl as NgAbstractControl,
  ValidatorFn,
  AbstractControlOptions,
  AsyncValidatorFn
} from '@angular/forms';
import { Observable } from 'rxjs';

export abstract class AbstractControl<T = any> extends NgAbstractControl {

  readonly value: T;
  readonly valueChanges: Observable<T>;

  abstract setValue(value: Partial<T> | T, options?: {
    onlySelf?: boolean;
    emitEvent?: boolean;
  }): void

  abstract patchValue(value: Partial<T> | T, options?: {
    onlySelf?: boolean;
    emitEvent?: boolean;
  }): void
}

export class FormGroup<T = any> extends NgFormGroup {
  readonly value: T;
  readonly valueChanges: Observable<T>;

  constructor(controls: { [key in keyof T]?: AbstractControl; },
    validatorOrOpts?: ValidatorFn | Array<ValidatorFn> | AbstractControlOptions | null,
    asyncValidator?: AsyncValidatorFn | Array<AsyncValidatorFn> | null) {
    super(controls, validatorOrOpts, asyncValidator);
  }

  patchValue(value: Partial<T> | T, options?: {
    onlySelf?: boolean;
    emitEvent?: boolean;
  }): void {
    super.patchValue(value, options);
  }

  get(path: Array<Extract<keyof T, string>> | Extract<keyof T, string> | string): AbstractControl | never {
    return super.get(path);
  }

  controls: {
    [key in keyof T]: AbstractControl<T[key]>;
  };
}

Next, we'll create the form model, in this case a simple sign-up. Let's create a file called sign-up-form.ts.

export type SignUpForm = {
  email: string,
  password: string,
  optInNewsletter: boolean
}

Finally, we'll implement the generic FormGroup in our component. We instantiate the generic FormGroup with the SignUpForm type. Notice we import our FormGroup and not Angular's.

//...
import { FormGroup } from './forms';

export class AppComponent implements OnInit {

  form = new FormGroup<SignUpForm>({
    email: new FormControl(''),
    password: new FormControl(''),
    optInNewsletter: new FormControl('')
  })

  ngOnInit() {
    this.form.patchValue({
      email: 'joaqcid@gmail.com',
      optInNewsletter: true
    })
  }

  submit() {
    console.log("typed forms", this.form.value)
  }
}

Here we can see, how Typescript picks the Type used, and type-checks when we create the FormGroup, or we patchValue and returns the Type defined when we get the value

Type-check form value

Type-check form model when instantiating FormGroup

Type-check form model when patching value

Type-check field value when patching value

Cool! Isn't this great? Forms on steroids! 💉💊💉💊

Finally let's extend the FormControl<T> class in case we want to need to work with them as well.

On forms.ts let's add the followring code.

import {
  FormControl as NgFormControl,
  //...
} from '@angular/forms';

//...
export class FormControl<T = any> extends NgFormControl {
  readonly value: T;
  readonly valueChanges: Observable<T>;

  setValue(value: Partial<T> | T, options?: {
    onlySelf?: boolean;
    emitEvent?: boolean;
  }): void {
    super.setValue(value, options);
  }

  patchValue(value: Partial<T> | T, options?: {
    onlySelf?: boolean;
    emitEvent?: boolean;
  }): void {
    super.patchValue(value, options);
  }
}

On our component lets import our own FormControl implementation and build one. Notice I'm using a custom type NgbDate from ng-bootstrap.

import { ..., FormControl } from './forms';
import { NgbDate } from '@ng-bootstrap/ng-bootstrap';

export class AppComponent implements OnInit {
    //...
    formControl =  new FormControl<NgbDate>('')

    ngOnInit() {
    //...
    this.formControl.patchValue(new NgbDate(2019, 9, 11))
    }
}

Again, by using the typed version of our FormControl, we can type-check the FormControl when we patch, set or get the value.

FormControl typed

Conclusion

With these few lines of code we were able to extend Angular's Reactive Forms to make them typed, this can help us to type our form and add other custom functionality if we need too. Be careful when modifying behaviour as it may impact the current Form behaivour.

You can check the full example in this StackBlitz.

This post have been written after reading different approaches in an open Angular's github issue, there are also libraries such as ngx-typed-forms, that also provide similar functionality.