At NG Conf 2020, NgRx Core Team member Mike Ryan gave a talk titled “State of NgRx”. In it, Mike introduced the newest section of the NgRx family, NgRx View, which includes the @ngrx/component and @ngrx/router libraries.

In this blog, we’ll look at @ngrx/component, which rethinks how change detection works for Angular applications, and improves the handling of RxJS Observables directly in our Angular templates.

Out of the box, Angular 9 uses Zone.js to run change detection. …


NgRx v7.0 included the released of a new @ngrx/store/testing module that features a mock Store to be used in testing NgRx applications. The module was introduced in #1027 with some documentation following in #1591.

Note: You can use this API and functionality in NgRx v5 and v6 using the standalone ngrx-mockstore package.

Currently, the documentation is light and doesn’t include a complete working code sample. I’ll provide two examples that should help clear things up.

Existing: StoreModule

It has been possible to condition the NgRx store in a unit test by providing the StoreModule in the testing module configuration. The StoreModule creates…


A common use of the RxJs filter operator is to only allow or prevent certain types from being passed to the next pipe operator or subscribe function.

const scrollEvents$ = router.events.pipe(
filter(event => event instanceof Scroll)
);

However, you’ll notice in the above snippet that scrollEvents$ is inferred to be of type Observable<Event> instead of Observable<Scroll>. This inability to correctly infer type is not an issue with RxJs, but rather Typescript (open issues: #10734 and #16069).

Review: Type Checking in Typescript

Feel free to skip this section if you are familiar with type checking in Typescript.

You can use typeof to check the primitive type:


Motivation

Angular is a fast evolving framework. At a similar pace, there is a growing set of tools to improve our usage of it, including UI tests. Although Protractor is the Angular designated UI testing framework, there has been excitement about Cypress.

Most development teams who use one UI testing framework wouldn’t dare switch, because it would include a total rewrite of their suite.

What if we used a UI testing pattern that allowed us to swap frameworks in and out more easily?

In addition to changing testing frameworks, as a part of the development lifecycle, front-end application are subject to…


Many Angular developers chose to use Angular Material because it provides a huge set of components that reduce the complexity of building user experiences. One of my favorites has been the Dialog component.

The default functionality provided by Material allows developers to launch a dialog by injecting the MatDialog service in a component’s constructor, then calling the service's open function, passing in the component to be shown in a dialog. We can also pass data to the dialog component and configure the layout of the dialog:

But as users of the web, we expect to be able to navigate…


Inspiration

Angular Version 6.1 added the “Scroll Position Restoration” feature. It allows configuration of the scroll position on navigation.

`ScrollPositionRestoration` has been added to the option of the second argument of `RouterModule.forRoot` method, usually imported in the App Module. It includes three options with the following functionality:

* ‘disabled’ — does nothing (default).

* ‘top’ — set the scroll position to 0,0..

* ‘enabled’ — set the scroll position to the stored position. This option will be the default in

In my use case, the three “out of the box” solutions did not provide my desired solution. I want the same…

John Crowson

Angular & iOS developer. Engineer @ Apple 🔗: johncrowson.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store