Updated Version

Updated version of this article here:

Scenario

We want to create a Angular Material Google Social Login Button in a shared library that has a signIn event that we can listen to in order to trigger social authentication and we also want to reactively disable the button until terms of service have been accepted.

Approach

The button design looks like this. It is disabled by default, and can be enabled by assign an Observable<boolean> to the property isTOSAccepted$ that emits true when the button should be enabled.

import { Component, OnInit } from '@angular/core'; import { SVG } from '@fireflysemantics/assets' import {…

Updated Version

There is an updated version of this article here:

Scenario

We have setup an Angular Workspace containing two library projects:

• @fireflysemantics/forecasting
• @fireflysemantics/optimization

Both are Angular Package Format libraries. The library@fireflysemantics/forecasting has @fireflysemantics/optimization as a peer dependency.

Whenever we publish updates of @fireflysemantics/optimization to Verdaccio we want those updates to be available within the @fireflysemantics/forecasting library.

We want to manage this using NPM Scripts.

For general instruction on how to create an Angular Package Format library see:

For instructions on how to setup Verdaccio see:

Approach

Both libraries reside in a workspace called fs-modules . …

Updated Version

There’s an updated version of this article here:

Scenario

Before publishing our NPM Package we want to automatically bump the semver patch version.

Approach

We will be using the NPM package @jsdevtools/version-bump-prompt to perform the automatic bump.

In the scripts section add the install script for it, such that users of the package know where the bump command comes from.

"scripts": {
    "ig": "npm install -g @jsdevtools/version-bump-prompt"
}

Now to install the bump command globally run npm run ig .

Next add a script that bumps the projects patch version:

"scripts": {
...
    "bp": "bump patch"
}

To bump the projects patch…

Updated Version

There’s an updated version of this article here:

Scenario

We have defined an interface for error types:

export interface ErrorTypes {
   [key: string]: string;
}

We want an Angular Component that can display an enumeration of error types defined by the ErrorTypes interface when the components error$:Observable<string> emits an error key.

For example we may implement the interface like this:

errorTypes: ErrorTypes = {
    NETWORK_ERROR: "Network Error",
    DATA_ERROR: "Data Error"
};

Note that the ErrorTypes instance values will be used to display the type of error that occurred in the components template.

Create the dataError$:Observable<string> = of('DATA_ERROR') .

And trigger data…

Updated Version

There’s an updated version of this article here:

Scenario

We have an customers$:Observable<string[]> that we want to iterate over in our Angular template.

Approach

<ul>   
    <li *ngFor="let customer of customers$ | async; index as i">
        {{ customer.name }}   
   </li> 
</ul>

Updated Version

There’s an updated version of this article here:

A block chain block contains the following:

• Transaction Data
• A cryptographic hash ( fingerprint / signature ) of it’s content
• A nonce value ( A random number used for cryptographic computation )
• The hash of the previous block
• A time stamp of a recent verified transaction

Lets look at an example. We will use the NPM Packages CryptoJS and NanoID to generate the signature and nonce.

Here’s our block:

import { SHA256 } from "crypto-js";
import { nanoid } from "nanoid";class Block { constructor( public index: number, public timestamp: string, public…

Scenario

We access our CSV data via a Slice Object Store observable like this:

this.s.os.S.CSV_DATA.obs.subscribe(data=>console.log(data))

We want to automatically unsubscribe when the component is destroyed.

Approach

Use the library @ngneat/until-destroy:

npm i @ngneat/until-destroy

Decorate the component with @UntilDestroy() :

@UntilDestroy()
@Component({
...
})

And pipe through untilDestroy :

this.s.os.S.CSV_DATA.obs.pipe(untilDestroyed(this)).subscribe(...)

The Subscription instance will now be automatically unsubscribed.

Scenario

When our Observable<E> errors out, we want to emit the string fallback value OOOPS .

Approach

oops.pipe(catchError(err => of('OOOPS')))

Demo

The first part of the demo uses throwError to error out the catchMeIfYouCan:Observable<string> , and therefore only the error handler is called, and neither the next nor the complete handlers are called.

let catchMeIfYouCan: Observable<string> = throwError("Catch me if you can");catchMeIfYouCan.subscribe(() => console.log("Next handler will not execute"),e => console.log(e),() => console.log("Completion handler will not execute"));

In the second part we pipe through catchError and emit the fallback, and now both the next and complete handlers are called and the error handler is not called.