You have the natural ability to heal. If you cut your finger or break a bone your body goes to work on it immediately.

Your’e body is constantly repairing things inside you the same way bees collect pollen.

The body is is a complex organism with many interrelated and co dependent parts and they all depend on each other in some way.

There is one healer that understands all that and that is you. Your energy knows how to repair things. …

Updated Version

Scenario

We have a reactive form control:

control:FormControl = new FormControl('steak-0')

And we want to bind it to our mat-select element such that we can:

• Receive reactive notifications from control.valueChanges
• Have the mat-select default value be steak-0

Approach

Within the app.module.ts we have imported both FormsModule and ReactiveFormsModule as these are necessary.

In the below app.component.ts component we have created an control:FormControl instance and initialized the value to steak-0 .

import { Component, VERSION } from "@angular/core";
import { FormControl } from "@angular/forms";
interface Food {
    value: string;
    viewValue: string;
}@Component({
    selector: "my-app",
    templateUrl: "./app.component.html"…

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 { Input }…

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(…