Testing Reducers in NGRX Store

Next in this series, we’re going to learn how to test Reducers in NGRX Store. In the previous testing post we explored Testing Actions. As we know, Reducers are just pure functions. This makes it extremely easy to test your reducers - which control state changes - and respond to actions accordingly. Another reason to adopt the Redux pattern with...

Feb 2018

Testing Actions in NGRX Store

In this small NGRX Store testing series, we’re going to learn how to test Actions, Reducers and Selectors. Let’s begin with Actions, or more specifically Action Creators and how to test them. Table of contents Testing Actions What we’ll test Spec File Creating an instance Assertions Testing Actions Ideally,...

Feb 2018

Angular Classes with NgClass

With Angular, we have many approaches to adding, removing, toggling classes. We can choose single classes and bind a property, or we can use the awesome NgClass directive from Angular. In this post, we’ll explore class bindings, and also Angular’s NgClass directive, the syntaxes and also some best practice ideas. Table of contents Property...

Jan 2018

Typing Arrays in TypeScript

There are many ways we can type a property to declare to TypeScript something is an array, or contains an array of “something”. We have generic types, array types and type assertions. For the purposes of this article, we’ll simply use a TypeScript class to demonstrate how we can declare some of these properties, in the various forms. ...

Jan 2018

Step by Step Custom Pipes in Angular

Angular has many Pipes built-in, but they only take us so far. Ideally we’d like to extend our applications by creating custom Pipes. Custom Pipes (previously Filters in AngularJS) allow us to essentially create a pure function, which accepts an input and returns a different output via some form of transformation. That’s the essence of a Pipe....

Jan 2018

Handling Observables with NgIf and the Async Pipe

Dealing with async operations with the async pipe takes care of subscribing to Observable streams/async stuff like Promises for us. There are a few common gotchas when dealing with purely cold Observables that somewhat pull in data (over perhaps, Http). There are also a few tricks we can use to mitigate common async issues, whilst being productive...

Jan 2018

Angular's NgIf, Else, Then - Explained

Using the ngIf directive allows us to simply toggle content based on a conditional. But is it as simple as we think? Not quite, the directive has a heap of helpful syntaxes that can help us deal with conditionals far better, and also asynchronous objects coming from perhaps an Observable. Let’s explore the ins and outs of ngIf, and how we can utilise...

Jan 2018

Introduction to TypeScript

Since its inception, JavaScript has experienced monumental growth - especially in recent years. The language has expanded its application domain far beyond the browser. It is now used to power backends, create hybrid mobile applications, architect cloud solutions, design neural networks and even control robots. The versatility of JavaScript paired...

Jan 2018

Classes vs Interfaces in TypeScript

Classes and interfaces are powerful structures that facilitate not just object-oriented programming but also type-checking in TypeScript. A class is a blueprint from which we can create objects that share the same configuration - properties and methods. An interface is a group of related properties and methods that describe an object, but neither provides...

Dec 2017

NGRX Store: Understanding State Selectors

Selectors are pure functions that take slices of state as arguments and return some state data that we can pass to our components. To better understand what selectors are and what they do, it helps see ngrx state as a data structure - a tree that can be serialised to JSON. Data is added to the state tree by composing state in reducers - that’s the easy...

Dec 2017