Forem: Steven Boyd-Thompson

RxJS Operators: bufferCount

Steven Boyd-Thompson — Mon, 10 Jul 2023 21:08:09 +0000

RxJS is a JavaScript library that enables the creation of asynchronous and event-based programs. The main type is the Observable and a suite of functions and operators are provided to make it easier to work with the data coming through. This series will detail those operators (and a few stand-alone functions) and provide examples of their use.

In this post, we’re going to cover the bufferCount operator.

What does it do?

The bufferCount operator is used to batch a certain number of values together. When we add bufferCount to our pipeline we pass it a number that indicates the number of values to batch. Once enough values have been received, bufferCount will combine all values into an array and send them through the pipeline.

Example

import { bufferCount, interval } from 'rxjs';

interval(1000)
    .pipe(bufferCount(10))
    .subscribe(x => {
        console.log(x);
    });

We’re using interval to provide us with incrementing numbers every second. When we add bufferCount we’re telling it to wait for 10 values, so every time it receives 10 from interval an array will be sent down the pipeline. Running this will print:

[
  0, 1, 2, 3, 4,
  5, 6, 7, 8, 9
]
[
  10, 11, 12, 13, 14,
  15, 16, 17, 18, 19
]

If the original observable completes the buffer will send whatever values it has collected through the pipeline immediately.

The source code for this example is available on GitHub:

drownedintech / rxjs-operators

Getting Started with Angular: Inputs & Outputs

Steven Boyd-Thompson — Thu, 29 Jun 2023 20:57:25 +0000

In the last post, we covered the creation and usage of components in Angular. When we left it we had created some standalone components, but they had a few problems.

In this post, we’re going to cover how we can use @Input and @Output decorators to communicate between parent and child components. At the end of the last post, I said we would also be covering some of the built-in directives and elements as well. To be honest, covering just those two decorators took more than I expected so I’ll be covering the rest in subsequent posts.

The starting code for this post can be found here:
https://github.com/drownedintech/getting-started-with-angular/tree/posts/inputs-outputs

💡 If you’ve been following along with these posts you will notice some differences from the end of the last post. The product list page has been restyled and the product page has been tidied up. Functionally it’s the same though.

@Input

To start we’re going to take a look at our product image component. Last time we created a new standalone component that we could share across our application, but everywhere it was used ended up showing the same image. We'll fix this now with @Input.

The @Input decorator allows us to specify a field on a component that can receive a value from a parent component. We’ll add an input to product-image.component.ts called imageUrl:

@Input()
public imageUrl: string | undefined;

Now we can start using this for our image source in product-image.component.html:

<img src="{{ imageUrl }}" />

💡 I’ve shown a feature above that we haven’t previously discussed, template binding with double curly brackets ({{ }}). This allows us to use properties from our .ts file in our templates. There are a few different methods for achieving this, and we’ll cover more of them in the future. For now, just know that you can use {{ }} to access a value to provide content or as inputs to HTML attributes (whether base HTML or your own). One caveat I will mention is to avoid binding to accessors or methods. By default, these will get rerun on every change detection cycle regardless of any changes to the value. Depending on the logic being run this can have severe performance implications.

Now we’ve got our product image component set up to accept the image URL, let’s use it. We’ll now go to product-list.component.ts and add a new imageUrl attribute to our app-product-image elements:

<app-product-image mat-card-image class="product-image" [imageUrl]="'../../assets/images/taco.png'" />

There are 3 images available in our assets for this, so update each product with a different one to see our new input in action. We can now see our product list has a different image for each product. However, if we go to the product page we can see we’ve lost our image there.

Adding the new attribute here is easy enough, but in a large application, it would be easy for a missing attribute to go unnoticed. Previously we would have had to just suck it up and put extra checks in place to ensure we had all the data we needed. The Angular team has got our backs though, and with v16 we now have the ability to set an input as required. Let’s do that now, in product-image.component.ts we change our @Input decorator to required:

@Input({ required: true })
public imageUrl: string | undefined;

When we build our application we’ll now get the following error:

Error: src/app/product/product.component.html:2:5 - error NG8008: Required input 'imageUrl' from component ProductImageComponent must be specified.

We can now rest easy knowing that our app with fail to build if we’ve missed something. We’re going to fix this in our product component, but first we’re going to use this to cover another option in inputs: transform.

💡 Before we go over transform, we’re going to need to check our version of Angular. Everything I’ve covered so far is available in Angular v16. The transform configuration requires Angular v16.1. So, check your Angular version in package.json, if it’s below 16.1 you’ll need to run ng update @angular/core@16.1 @angular/cli@16.1.

Let’s start by adding the imageUrl attribute to our product component. Go to product.component.html and update the image element to look like this:

<app-product-image [imageUrl]="undefined" />

Since we set our data type to string | undefined this won’t cause an error when building, but if we run our app nothing will be shown. This example might seem a little forced, but that’s because we’re hard-coding our image URLs. In a real-world scenario it’s perfectly reasonable to expect a placeholder to be shown when an image hasn’t been provided, and that’s what we’re going to do with transform.

So, what does it do? The transform configuration takes a function that will be applied to the value being set on the input. Previously, we would have needed to implement this ourselves with getters/setters and possibly a private field. This all gets tidied up by being able to apply a transformation. We’ll add it now by going back to product-image.component.ts and changing our input to:

@Input({
  required: true,
  transform: (value: string | undefined) => value ?? '/assets/images/image-placeholder.png'
})
public imageUrl: string | undefined;

You will need an image to point it to. If you don’t have anything available just change the image-placeholder.png to one of the images we use elsewhere, the effect is the same. Once we’ve got our image in place we can see the product page is now showing it. Here we’ve just used a null-coalescing operator to return either the actual value if it has one or the placeholder URL if not. Now we don’t need to rely on actually getting a value passed in.

The final configuration we can pass to our input is alias. This gives us the option to use one name for our variable within the component but have any parent components pass it in as something else. We’ll update our input decorator one final time:

@Input({
  required: true,
  transform: (value: string | undefined) => value ?? '/assets/images/image-placeholder.png',
  alias: 'ThisIsAnAlias'
})
public imageUrl: string | undefined;

When we now try another build we’ll see errors start to show up. This is because we’ve passed imageUrl when using this component, but that’s no longer valid. We now have to pass the image URL in as an attribute named ThisIsAnAlias. I won’t be keeping the alias configuration, but it doesn’t hurt to know it’s available.

That covers getting data into our components, let’s move on to sending data the other way with outputs.

@Output

Outputs are the opposite of inputs. Where inputs are used by the parent component to pass relevant data down to the child, outputs are used by the child component to notify the parent of changes. All outputs must be typed as EventEmitter, but they can be used to just notify (by specifying void as the generic type) or to pass data to the parent.

To demonstrate this we’re going to use our add-to-basket component. Here we’re going to add an output that fires whenever a button is clicked and sends the number of times it has been clicked. We’ll start by going to add-to-basket.component.ts and adding the following code:

@Output()
public itemAdded = new EventEmitter<number>();

private currentAmount: number = 0;

public addItemToBasket(): void {
  this.itemAdded.emit(++this.currentAmount);
}

We now have an output (itemAdded), indicated by the @Output decorator. We’ve also added a method that will send values through the output with the emit call. And finally, we’ve got a variable holding the current count. Now we need something to call this, we’ll go and change add-to-basket.component.html:

<button mat-button color="primary" (click)="addItemToBasket()">Add to Basket</button>

<button mat-icon-button color="primary" (click)="addItemToBasket()">
    <mat-icon>add_shopping_cart</mat-icon>
</button>

Now we’ve got everything we need to make use of our output. We’ll move over to our product component to add some handling and see this in action. First, we’ll open product.component.ts and add the following:

public amountInBasket: number = 0;

public handleAddedToBasket(currentAmount: number): void {
  this.amountInBasket = currentAmount;
}

And in product.component.html we’ll change add to basket component usage:

<div class="buttons">
    <app-add-to-basket (itemAdded)="handleAddedToBasket($event)" />

    <p>Amount added: {{ amountInBasket }}</p>
</div>

This will now handle the output from our add-to-basket component, keep track of the last value, and display that in our template. Now we can try this on our product page and see the number incrementing each time we click add to basket.

You’ll notice that each time we’re using our add to basket component we’re getting 2 buttons. We’ll tackle this next using our built-in directives, starting with ngIf.

💡 The only configuration option provided by the @Output decorator is alias. This works the same way as the alias operator for @Input, so we won’t cover it again.

What’s next?

While inputs and outputs have helped us add communication between our components, we’ve still got problems. Two buttons for our add-to basket? Repeating code for our product list? I know, I know. There are ways to deal with all of this, and in the next post, we’ll be covering the built-in directives and elements that will help us do just that.

For now, please bear with me.

The final code for this post can be found here:
https://github.com/drownedintech/getting-started-with-angular/tree/posts/inputs-outputs-complete

RxJS Operators: buffer

Steven Boyd-Thompson — Mon, 26 Jun 2023 20:39:07 +0000

In this post, we’re going to cover the buffer operator.

What does it do?

The buffer operator lets us bundle together values from an observable and process them all together. We pass buffer a second observable that controls when to output values. Once the second observable emits a message all the collected values will be pushed through the rest of the pipeline as an array.

Example

import { Subject, buffer, interval } from 'rxjs';

const bufferTrigger$ = new Subject<void>();

interval(1000)
    .pipe(buffer(bufferTrigger$),)
    .subscribe(x => {
        console.log(x);
    });

setInterval(() => {
    bufferTrigger$.next();
}, 5000);

We’re using interval to provide us with incrementing numbers every second. Every 5-seconds bufferTrigger$ will fire and force buffer to pass whatever values it has to the rest of the pipeline. If we run this we see:

[ 0, 1, 2, 3 ]
[ 4, 5, 6, 7, 8 ]
[ 9, 10, 11, 12, 13 ]
[ 14, 15, 16, 17, 18 ]

We can see that buffer has spent 5 seconds collecting values. Once the trigger fired it built them into an array and forwarded that on. Just make sure the number of values coming from the original observable and the timing on the trigger are aligned. Otherwise, buffer will end up collecting a lot more values than you expect, which may cause issues. We don’t want to run out of memory because we’ve not cleared the buffer.

The source code for this example is available on GitHub:

drownedintech / rxjs-operators

RxJS Operators: auditTime

Steven Boyd-Thompson — Fri, 23 Jun 2023 20:46:12 +0000

In this post, we’re going to cover the auditTime operator.

What does it do?

The auditTime operator is similar to the audit operator. Rather than providing an observable to control the handling, we provide a time in milliseconds. When the time has elapsed the last emitted value will be sent through the pipeline.

Example

import { auditTime, interval } from 'rxjs';

interval(1000)
    .pipe(auditTime(5000))
    .subscribe(x => {
        console.log(x);
    });

We’re using interval to send a value through every second. We’ve configured auditTime to only allow a value every 5 seconds. So if we run this we’ll see:

It’s important to note here that auditTime won’t send out the last value every 5 seconds. The timer only starts when a new value comes in. We can demonstrate this behaviour with a change to the above example. Rather than using interval we’ll create our own subject and send a value out after 10 seconds.

import { Subject, auditTime, interval } from 'rxjs';

const value$ = new Subject<string>();

value$
    .pipe(auditTime(5000))
    .subscribe(x => {
        console.log(x);
    });

setTimeout(() => value$.next('First Value'), 10000);

When we run this we will only see the value logged out after 15 seconds. Calling value$.next('First Value') gave the value to auditTime and started the timer running. Once the 5-second timer on auditTime completed it sent the last (and in this case only) value through the rest of the pipeline.

This behaviour makes this useful when dealing with high-throughput observables that don’t need every value handling. A good example of this is user input. If we’re using RxJS to listen for input into a text field, we don’t want to respond to every keypress as the user is typing. Using auditTime the first keypress will start the timer running and we’ll process the input at regular intervals as the user is still typing.

The source code for this example is available on GitHub:

drownedintech / rxjs-operators

Getting Started with Angular: Components

Steven Boyd-Thompson — Wed, 21 Jun 2023 21:10:53 +0000

In the last post, we covered the elements of routing in Angular. This post is going to cover what we’re routing to, Components. The starting code can be found here: https://github.com/drownedintech/getting-started-with-angular/tree/posts/components

To demonstrate this we’re going to add a page for a single product. We’ll demonstrate:

The configuration available in the @Component decorator
How to reference additional components on your page
Creating new components
Creating and using standalone components

Let’s get started, shall we?

What is a Component?

Components are the main elements of Angular applications. Each component can be configured with a variety of options, which we’ll get into soon. However, there are 2 main parts to a component; the template and the code.

The template holds all of the HTML for your component. This is the part that will be rendered when our component is loaded up in a browser. The template can be made up of standard HTML elements, component selectors (which will be discussed soon), and built-in Angular elements. A template can either be specified within the component configuration or as a separate file. Built-in elements will be discussed in a future post alongside some of the built-in directives.

The code is a Typescript class marked with the @Component decorator. When we’re adding logic to our components this is where we’ll be putting the changes. It’s best practice to avoid putting logic directly in the template and handle it using Typescript instead.

What can be configured?

We’ll start by creating a new module and component for our product page. We’ll do this by running:

ng g module Product --module app --route product

As well as creating our module and component it will also configure the declarations and routing for it to work. Now we can go to http://localhost:4200/product and see our product works! message.

Now we’ve got our component we can take a look at the configuration options. If we open product.component.ts we can see the default options added to the Component decorator:

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.scss']
})

Let’s start with covering the defaults:

selector

Specifies the element we use to include this component in other components. We’ll cover how to make use of this soon.

templateUrl

The path to an HTML file containing the content to be displayed for this component. We define either the templateUrl or template, not both.

styleUrls

An array of paths to files containing the styles to be imported for this component.

There are a whole host of other options we have for configuration. Some of these are quite niche, so I won’t cover them here (looking at you interpolation). Here are some of the more widely applicable ones:

template

Like templateUrl, this defines the content to be displayed for this component. Rather than defining it in a separate file, we can define it in line with the component configuration. We define either the templateUrl or template, not both.

styles

Gives us a way to specify styles within the component configuration rather than a separate file. Unlike templateUrl/template we can specify both the styleUrls and styles values, they will be combined in the built version.

changeDetection

The strategy to use for responding to change detection in this component. Change detection and the Angular lifecycle are important topics for working effectively with Angular, so we’ll cover those in detail in a separate post.

encapsulation

Allows us to specify how we want styles to be scoped. This is another one that deserves its own post, but I’ll summarize the three options we have:

Emulated - Styles are only applied to elements within the current component. This is the default.
None - Styles are applied globally and may affect elements outside of the current component. Only use this if you’re really, really sure there’s no other way.
ShadowDom - Like Emulated, styles are only applied to elements within the current component. Also prevents global styles from being applied to this component or any of its children.

standalone

This is a boolean value indicating whether the component should be treated as standalone. We will discuss standalone components shortly.

That was a lot of information without actually getting us anywhere. We’ll move on to something more interesting, building our component.

Populating the template

Let's start by getting some content on the page. We'll start by entering the following in product.component.html:

<div class="product-image">
    <img src="../../assets/images/taco.png" />
</div>

<div class="buttons">
    <button mat-button color="primary">Add to Basket</button>
</div>

<mat-divider></mat-divider>

<p class="product-description">
    <span>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua. Arcu dictum varius duis at consectetur lorem. Aenean vel elit scelerisque mauris
            pellentesque
            pulvinar pellentesque habitant. Congue eu consequat ac felis donec et odio pellentesque. Consectetur lorem
            donec massa sapien faucibus et. Mi bibendum neque egestas congue. Morbi blandit cursus risus at ultrices mi
            tempus
            imperdiet. Ut porttitor leo a diam sollicitudin tempor. Lacus vel facilisis volutpat est velit egestas dui
            id. Nam at lectus urna duis convallis convallis. Neque aliquam vestibulum morbi blandit cursus risus. Semper
            eget duis at tellus at urna condimentum mattis. Eu volutpat odio facilisis mauris. Lectus arcu bibendum at
            varius
            vel pharetra vel. Nec feugiat nisl pretium fusce id velit ut. Etiam erat velit scelerisque in. Sit amet
            purus
            gravida quis blandit turpis cursus in hac.
        </p>
    </span>
</p>

<mat-divider></mat-divider>

<div class="product-reviews">
    <div class="review-entry">
        <textarea matInput></textarea>
    </div>

    <div class="review-buttons">
        <button mat-button color="primary">Post Review</button>
    </div>

    <div class="reviews-list">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua. Arcu dictum varius duis at consectetur lorem. Aenean vel elit scelerisque mauris
            pellentesque
            pulvinar pellentesque habitant.
        </p>
    </div>
</div>

This is a good start, but if we load it up we'll see it doesn't look quite right. So, let's style it. In product.component.scss we'll enter:

.product-image {
    display: flex;
    justify-content: center;

    img {
        object-fit: scale-down;
        max-width: 500px;
    }
}

.buttons {
    width: 100%;
    display: flex;
    justify-content: center;
}

.product-description {
    flex: 1;
}

.product-reviews {
    width: 80%;
    display: block;
    margin-right: auto;
    margin-left: auto;
    margin-top: 20px;

    .review-entry textarea {
        width: 100%;
    }

    .review-buttons {
        display: flex;
        justify-content: flex-end;
    }
}

There, looking much better now.

We've got our page now, but we're not taking advantage of the component system. If we look at product.component.html we'll see 4 elements that could be their own components:

Product image
Description
Add to basket button
Reviews

We'll create a component for each of these in our existing product module.

Creating new components

We’ll start with the product reviews. We can create a component under our existing product module by running:

ng g component  product/product-reviews --module product

We can now move the implementation from product.component.html and the related styles to product-reviews.component.html.

<div class="review-entry">
    <textarea matInput></textarea>
</div>

<div class="review-buttons">
    <button mat-button color="primary">Post Review</button>
</div>

<div class="reviews-list">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
        dolore magna aliqua. Arcu dictum varius duis at consectetur lorem. Aenean vel elit scelerisque mauris
        pellentesque
        pulvinar pellentesque habitant.
    </p>
</div>

.review-entry textarea {
    width: 100%;
}

.review-buttons {
    display: flex;
    justify-content: flex-end;
}

Now we’ve moved this HTML into the new component we can go to product.component.html and replace it with <app-product-reviews />. If everything has gone to plan the page should look the same as it did before. This allows us to simplify our higher-level components while building up functionality by composing lower-level components.

This is only one advantage of using the component system though. If we compare our product component with our product list component we can see they both need the other components we’re going to create. We’re going to make them reusable between both by declaring them as standalone components.

Standalone components

Let’s start by defining what standalone components are. Standalone components work in the same way as standard components, but they don’t require a declaration in a module. This gives us a lot of flexibility in where and how we make use of our components.

Rather than importing a full module and dragging in everything that has been declared, we can import specific components at either a module level (for standard components) or component level (for use in other standalone components).

We’re going to use the CLI to generate our new components for us, but I’ll start by discussing how to convert existing components. Converting should be an easy process, consisting of three steps:

Add standalone: true to the component configuration
Move any declarations of the component to the imports section of the relevant modules/standalone components
Add imports to the configuration of the converted component to pull in any required elements

Depending on the component being converted and the size of the project this could be a fairly sizeable imports list. If you find this happening it might be that your component could do with some refactoring into smaller subcomponents.

Since we don’t have an existing component to convert, we can just run:

ng g component  shared/product-image --standalone

This is going to create a product-image.component in the shared folder. We can now use the template from product.component:

<img src="../../assets/images/taco.png" />

And for the styles, I’ve modified the styles to work a bit better as a shared component:

img {
    object-fit: scale-down;
    max-width: 100%;
}

img:hover {
    transition: ease 2s;
    transform: scaleY(-1);
}

You may notice I’ve added a hover style. This is just to demonstrate how easy it is to share additional functionality when reusing components. This particular function might be useless (what’s life without a little whimsy?), but we could just as easily implement something like opening a carousel of images on click.

Now we’ve got our standalone component in place we need to add it to the imports of both product.module.ts and product-list.module.ts. With that imported, we’re just going to replace our <img /> elements with <app-product-image />.

Reloading the page we can now see the image flip when we hover our mouse over. We’ll also see the images are much larger than they were before. The styling will need to be modified slightly to account for the new component. However, I won’t detail that here. Nor will I cover creating the other two components we need. Instead, I’m going to come to the end of this post. Go ahead and have a go at sorting the rest out yourself, and when you’re ready you can compare against the complete code for this post.

Detour: Getting to the product page

Something I haven’t covered is how to link to the product page. This is easy to do in Angular (at least with our simple structure) using routerLink. We’re going to go to product-list.component.html and replace our instances of <li> with <li [routerLink]="'/product'">. Now we will be taken to the product page when we click on one of our products.

Note that we’ve set the path to /product rather than product. If we omit the slash the router will attempt to append the string to the end of whatever path we’re already on. So instead of being taken to http://localhost:4200/product like we want, we’ll actually end up being taken to http://localhost:4200/products/product.

What’s next?

You may have noticed that something has gone wrong when we added our new product image component. We’ve now got the same image for everything!

We’re going to fix this in the next post. We’ll cover how to pass data in and out of our components using the @Input and @Output decorators. We’re also going to take some time to discuss the built-in elements and directives that can help us take more control of our template.

The final code for this post can be found here: https://github.com/drownedintech/getting-started-with-angular/tree/posts/components-complete

RxJS Operators: audit

Steven Boyd-Thompson — Tue, 20 Jun 2023 19:43:56 +0000

In this post, we’re going to cover the audit operator.

What does it do?

The audit operator can be used to limit the number of values that are handled by the pipeline. We pass audit a function that returns a second observable, that observable then controls which values get handled. All values coming from the original observable will be ignored. When the second observable sends out a value, audit will allow the last value from the original observable through the pipeline.

This can be hard to get your head around just by having it explained. Let’s take a look at an example that will clear it up.

Example

import { Subject, audit, interval } from 'rxjs';

const auditTrigger$ = new Subject<void>();

interval(1000)
    .pipe(audit(() => auditTrigger$))
    .subscribe(x => {
        console.log(x);
    });

setInterval(() => {
    auditTrigger$.next();
}, 5000);

Here we’re using the interval function as our observable. This sends out incrementing numbers every second, but when we run it we will see:

This is the audit operator in action. We have set up audit to respond to events from auditTrigger$, which sends out a message every 5 seconds. So, every 5 seconds audit gets the message to output that last value handled. We can see the emitted values being sent if we update our pipeline to log the emitted value before it gets to the audit function.

import { Subject, audit, interval, tap } from 'rxjs';

const auditTrigger$ = new Subject<void>();

interval(1000)
    .pipe(
        tap(x => console.log(`Value emitted: ${x}`)),
        audit(() => auditTrigger$)
    )
    .subscribe(x => {
        console.log(`Value handled: ${x}`);
    });

setInterval(() => {
    auditTrigger$.next();
}, 5000);

We’ve added the tap operator to our pipeline and configured it to log the value. Now if we run this we see:

Value emitted: 0   
Value emitted: 1   
Value emitted: 2   
Value emitted: 3   
**Value handled: 3**   
Value emitted: 4   
Value emitted: 5   
Value emitted: 6   
Value emitted: 7   
Value emitted: 8   
**Value handled: 8**   
Value emitted: 9

This would come in useful if we’ve got an observable that sends out a lot of values, but we don’t need to handle all of them. We could set it up to only process the values when another, less chatty, observable gets an update.

The source code for this example is available on GitHub:

drownedintech / rxjs-operators

RxJS Operators: catchError

Steven Boyd-Thompson — Fri, 16 Jun 2023 05:30:00 +0000

In this post, we’re going to cover the catchError operator.

What does it do?

This operator, as the name suggests, is used to catch errors that are thrown from our observable. This gives us the ability to add special handling for errors and, more importantly, control what happens with our subscription.

Example

Here we’re going to use the interval function and the map operator. The interval function will provide us with an observable outputting incrementing numbers. We’ll be using the map operator to throw an error when the value reaches 10:

import { catchError, interval, map, of } from 'rxjs';

interval(1000)
    .pipe(
        map(count => {
            if (count === 10) {
                throw new Error('Error thrown at count of 10');
            }

            return count;
        }),
        catchError((error: Error) => {
            return of('Error handled: ' + error.message)
        }))
    .subscribe(x => {
        console.log(x);
    });

This gives us the output:

0
1
2
3
4
5
6
7
8
9
Error handled: Error thrown at count of 10

We’ll see the program end at this point. This is due to a quirk of using interval rather than being expected behaviour. When the subscription to interval ends it will stop outputting values and by default an error being thrown will end the subscription.

What do we do if we want the subscription to continue? Well, the catchError operator has us covered. In the example above we’ve passed catchError a function with a single parameter, error. The optional second parameter provides us with a reference to the originally subscribed observable.

Let’s see an example of this. We’re going to create an observable for this one to avoid the quirks of interval:

import { Observable, Subject, catchError, map } from 'rxjs';

const provider$ = new Subject<number>();
let count = 0;

provider$
    .pipe(
        map((x) => {
            if ((x % 5) === 0) {
                throw new Error('Error thrown at multiple of 5');
            }

            return x;
        }),
        catchError((error: Error, caught: Observable<number>) => {
            console.error('Error handled: ' + error.message);
            return caught;
        }))
    .subscribe(x => {
        console.log(x);
    });

setInterval(() => {
    count++;

    provider$.next(count);
}, 1000);

It looks like there’s a lot more going on here, but we’ve just implemented our own version of interval. Now the map operator will throw an error every time we reach a multiple of 5. The important change is in the catchError handling:

catchError((error: Error, caught: Observable<number>) => {
    console.error('Error handled: ' + error.message);
    return caught;
}))

Our error handling now takes caught(the original observable), logs an error, and returns caught. This will just force our pipeline to resubscribe on error. So now we get:

1
2
3
4
Error handled: Error thrown at multiple of 5
6
7
8
9
Error handled: Error thrown at multiple of 5

As we see, each time an error is thrown we just resubscribe and wait for the next value. There are a couple of things to watch out for with this approach though:

caught will return the original subscription with all the operators you’ve added. This may be what you’re looking for, but if there’s something in your pipeline throwing the error (like we have above) it’s going to keep happening
If you’re using a BehaviorSubject the resubscribe is going to attempt to reprocess the last value that was sent from the observable. Like the first point, if you’re pipeline caused this error you risk it happening again.

So just bear in mind the observable you’re returning. You don’t want to end up with:

Error handled: Error thrown at multiple of 5
Error handled: Error thrown at multiple of 5
Error handled: Error thrown at multiple of 5
Error handled: Error thrown at multiple of 5
Error handled: Error thrown at multiple of 5
Error handled: Error thrown at multiple of 5

Because the programming is repeatedly attempting to process a bad value.

The source code for this example is available on GitHub:

drownedintech / rxjs-operators

RxJS Operators: takeUntil

Steven Boyd-Thompson — Thu, 15 Jun 2023 05:30:00 +0000

In this post, we’re going to cover the takeUntil operator.

What does it do?

The takeUntil operator gives us a way to cancel a subscription to an observable. We add the operator to our observable pipeline and provide it with a subject. Whenever that subject emits a value the subscription will be cancelled.

Without using this we would need to track all the subscriptions individually. When it came time to cancel them we would have to run through them all. This can be error-prone since it’s easy to miss one or incorrectly track a reference. Using takeUntil means we just need to add the method and make a single call to cancel all the subscriptions.

Example

We’ll use interval as our observable:

import { Subject, interval, takeUntil } from 'rxjs';

const unsubscribe$ = new Subject<void>();

interval(1000)
    .pipe(takeUntil(unsubscribe$))
    .subscribe(x => {
        console.log(x);
    });

setTimeout(() => {
    unsubscribe$.next();
}, 10000);

A few things are going on here. We’ll break it down and see what’s happening bit by bit.

const unsubscribe$ = new Subject();

We create a new subject to pass to takeUntil. This is what we’ll be triggering later.

interval(1000)
    .pipe(takeUntil(unsubscribe$))
    .subscribe(x => {
        console.log(x);
    });

Subscribe to the observable and include takeUntil in the pipeline. This will handle every value until it has been unsubscribed.

setTimeout(() => {
    unsubscribe$.next(undefined);
}, 10000);

Use setTimeout to wait 10 seconds and send a value through the unsubscribe$ subject. This will cancel the subscription of the above observable. If we run this we’re going to see values emitted for 10 seconds and then stop, since we’re emitting an incremented number every second we should see:

Since we’re using interval the subject will complete and the program will end at this point. If we were using a typical long-lived observable the values would continue being sent out, we’re just not subscribing to them anymore.

This is the operator I use most when working in Angular. Since Angular is a single-page application framework, observables will never unsubscribe unless explicitly told to do so. This means I can set up subscriptions in components, configure them with takeUntil, and make a .next() call in the destroy handling.

That’s just one use case. There are other scenarios where this can be useful. The point is takeUntil makes it easy to control the lifetime of our subscriptions.

The source code for this example is available on GitHub:

drownedintech / rxjs-operators

RxJS Operators: map

Steven Boyd-Thompson — Wed, 14 Jun 2023 05:30:00 +0000

In this post, we’re going to cover the map operator.

What does it do?

The map operator works the same way as the Array function by the same name. We pass in a function that accepts the current values, performs an operation, and returns the new result. Any operators that come after the map operator will then be using the new value returned from the function.

Example

import { interval, map } from 'rxjs';

interval(1000)
    .pipe(map(x => `Value mapped: ${x}`))
    .subscribe(x => {
        console.log(x);
    });

Here interval is providing sequential integers. The function we pass to the map operator creates a string including that value and returns it. If we run this we will see:

Value mapped: 0
Value mapped: 1
Value mapped: 2
Value mapped: 3
Value mapped: 4
Value mapped: 5

This is a simple example that shows the basic usage of the map operator. More complicated implementations may be used to select specific values of objects that are passed. Or we could apply calculations and return that. The point is, there’s not really a limit to what we can do within the map operator.

There is one caveat. Don’t try and utilise other observables as part of your function. If we want to make use of other observables there are specialised methods to handle this:

concatMap
exhaustMap
mergeMap
switchMap

These will be covered in future posts. For now, just stick to basic operations when using map.

The source code for this example is available on GitHub:

drownedintech / rxjs-operators

RxJS Operators: interval

Steven Boyd-Thompson — Tue, 13 Jun 2023 07:21:31 +0000

In this post, we’re going to cover the interval function.

What does it do?

Like the of function, this isn’t an operator. I realised in a lot of the examples I was putting together I had implemented my version of interval. This was adding pointless complications to the examples just to avoid using something we hadn’t discussed. So I’m covering it now to simplify future examples. So what does it do?

The interval function is called with a time in milliseconds. When that time interval is reached it will emit a progressively incrementing number.

Example

The usage looks like this:

import { interval } from 'rxjs';

interval(1000).subscribe(x => {
    console.log(x);
});

If we run this we will see a number written to the console every second, starting at 0 and incrementing from there. That’s all there is to it. This may not seem like much, but let's take a look at what it’s replacing. Originally I had this:

import { BehaviorSubject, Observable } from "rxjs";

const value$ = new BehaviorSubject<number>(0);

export function getObservable(): Observable<number> {
    return value$.asObservable();
}

export function start(): void {
    setInterval(() => {
        const count = value$.getValue() + 1;
        value$.next(count);
    }, 1000);
}

Using interval means I can get rid of that entire file and replace it with:

interval(1000);

Getting exactly the same behaviour. As you can see, this will simplify all the examples and allow us to focus on the operators being discussed.

The source code for this example is available on GitHub:

drownedintech / rxjs-operators

Getting Started with Angular: Routing

Steven Boyd-Thompson — Mon, 12 Jun 2023 20:36:22 +0000

In the last post we learned all about modules and how we can use feature modules to organize our code, but how do we connect them? That’s where the routing configuration comes in. Using this configuration we can define which URLs should load which modules and components. We’ll start by discussing the root module and work our way down from there.

Sample Project

Before we get started I think it will be easier to discuss this with a more concrete example. From now on each post will start with a link to the starting source code. Feel free to grab a copy and follow along as we’re going through it. I’ll still try and put enough detail in the post so you can understand the concepts if you’re not in a position to run the code.

The source code for this post can be found here: Getting Started with Angular: Routing

The project will be a simple e-commerce website. We’ll develop this as we go along and progressively add features with each post. To start with we’ve got:

The root module with the bootstrapped app component
A home component declared in the app module
A feature module called ProductList to display, surprisingly, a list of products

At the moment everything is hard-coded, but in a future post, we’ll cover retrieving data using services and requests to an API. I have also included Angular Material, a component library built for Angular using the Material Design specification. This shouldn’t interfere with an understanding of the base Angular concepts but I will highlight and discuss any usages I think may confuse.

What is a Route?

Since Angular is a single-page application framework we’re not getting a new page whenever the URL changes. Instead, we configure the routes in our application so Angular knows which components are required. This is done by providing a pattern and an action. The pattern is checked against the current URL. If the pattern matches it will run the action, which involves either loading in a component or passing the processing on to another module.

Routing Module

If we go to our AppModule we can see one of the things it imports is AppRoutingModule. Opening the AppRoutingModule we can see it’s split into 2 parts; the route configuration and the registration. I’ll start with the registration since there’s not a lot to cover:

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

The import call here is RouterModule.forRoot(routes). Adding this line is where the routes are being registered with the application. Having a separate module just for routing is another stylistic preference. We could just as easily put the RouterModule.forRoot call directly in our root module and it would work the same.

Something to note here, root modules and features modules use a different method to provide their route configuration. As we’ve just seen the root module uses the forRoot method. Feature modules must use the forChild method. If you configure the routes in your feature modules using forRoot you will get an error in the console when you attempt to load that module. This happens because forRoot creates and provides a new Router service, of which there can be only one.

Now, on to our route configuration:

const routes: Routes = [
  {
    path: 'products',
    loadChildren: () => ProductListModule
  },
  {
    path: '',
    component: HomeComponent
  }
];

Here we can see we’re attempting to match the URL against 2 paths; “products” and an empty string. When setting up your paths you don’t need to use absolute paths, the matching only starts on the sections after your domain.

We’ll start at the bottom with the empty path. This is the path that will match against your base URL, so when running it locally this will be http://localhost:4200. This has been configured to just use a component, in this case, the HomeComponent. This component must be declared in the module these routes are being configured for since there’s no guarantee it will be loaded otherwise. There is an exception to this which we’ll discuss soon.

The other configuration is where we start getting feature modules involved. This will match the path http://localhost:4200/products. The loadChildren action accepts a callback that needs to return the module to be loaded. In the example above we directly return the ProductListModule. If we run the app we will see that this runs and loads the page we expect. There is a problem with this approach though, the ProductListModule is being eagerly loaded.

Lazy Loading

Eagerly loaded modules will be downloaded, along with the dependent components, when the parent route module is initiated. This can slow down the initial page load and causes unnecessary downloads for pages we may never use.

Since our sample application is so small this won’t cause a problem. What happens if we add another 100 components, directives, and pipes? Each with dependent services? Suddenly we’re downloading a lot more than we need to and our page load time has tanked. Ideally, we only want to download these components if and when they’re required. We can do this with lazy loading.

Thankfully, setting up lazy loading is easy to do in the routing configuration. It will even be automatically configured this way if generating modules using the Angular CLI. We just need to change:

loadChildren: () => ProductListModule

To:

loadChildren: () => import('./product-list/product-list.module').then(m => m.ProductListModule)

And the product is now being loaded only when we navigate to the product list page. Simple as that. It looks a little more daunting, but there’s nothing to it. Only 2 things are happening:

We’re importing a file inline (./product-list/product-list.module)
Once we have this file we’re specifying what to load from it

Wildcard Matches

There’s another problem with our routing. What happens if we go to a page that doesn’t exist? If we navigate to http://localhost:4200/fake-page we’re just presented with a blank page. If we open the devtools and look in the console we’ll see an error like this:

Error: NG04002: Cannot match any routes. URL Segment: 'fake-page'

Since we’ve not configured a route for fake-page it doesn’t know where to direct the request. We can fix this by declaring a wildcard route. We’ll start by creating a new component. To do this we go back to the command line and run:

ng generate component page-not-found

This will create a new PageNotFoundComponent and declare it in our root module. Now we’re going back to app-routing.module.ts and adding a new entry to the end of our routes:

{
  path: '**',
  component: PageNotFoundComponent
}

Now when we go to http://localhost:4200/fake-page we don’t get a blank page. We should get this:

It’s important to note here, the order of the routes matters. If we put the wildcard route at the start of our configuration we’ll only ever get the PageNotFoundComponent loaded. When processing a URL Angular will stop at the first match and provide that. Keep that in mind when constructing your routes.

What else?

I’ll be honest, there are a lot more intricacies to the routing configuration than I realised when I started this post. In the interest of moving forward, I won’t be covering everything in this post. I will try and write an in-depth post about the options provided to us through the routing configuration in the future. There are a few parts that will be covered in later posts, including:

Routing and lazy-loading of stand-alone components
Child routes in feature modules
Route guards and their configuration

We’re not there yet. We haven’t even got to the core of outputting content in Angular. We’re going to fix that in the next post where we’re going to be covering components.

Updated code can be found here: Getting Started with Angular: Routing Complete

RxJS Operators: of

Steven Boyd-Thompson — Sun, 11 Jun 2023 21:18:11 +0000

In this post, we’re going to cover the of function.

What does it do?

Strictly speaking, this isn’t an operator, but it is useful in its own right. I’ll be making use of it to simplify the examples presented.

The of function allows us to turn a normal value, or series of values, into an observable. When we subscribe to this observable it will emit all the values that were provided to it. Once all values have been emitted it will be automatically completed.

Example

of can be used just like we would any other observable:

import { of } from 'rxjs';

of('Test Value')
    .subscribe(x => {
        console.log(x);
    });

Running this we will see

Test Value

The of function is that simple. It takes in a value and gives us back an observable.

If we need the observable to emit multiple values we can do that by passing multiple values to the of function:

import { of } from 'rxjs';

of('Test Value', 'And a second', 'Third and final')
    .subscribe(x => {
        console.log(x);
    });

Test Value
And a second
Third and final

While it is simple, don’t underestimate its utility. Here are a few example use cases:

Unit testing - Being able to mock external dependencies is essential for effective unit testing. The of function makes it easy to specify return values from observable functions.

Caching - If we’ve got an observable call that we know doesn’t change often, we may want to cache the result. On subsequent calls, we can just return the cached result rather than running the query repeatedly. of allows us to return the cached value as an observable, meaning the calling code doesn’t need any knowledge of the internal handling to process the result.

Error handling - If we have an HTTP call implemented using observables (like the Angular HTTP client) there is a chance of errors. While these should always be handled, we might not want to throw the exception back to the initiator. In this case, we can handle the error (using the catchError operator) and use of to return a default value.

These are just a few of the areas I see this used in. The point is, it comes in handy more often than you might expect.

The source code for this example is available on GitHub: