Image for post
Image for post
Image by GUILHERME BERNARDO from Pixabay

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…


Image for post
Image for post
Image by Pexels from Pixabay

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>

Image for post
Image for post
Image by tarakko from Pixabay

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…


Image for post
Image for post
Image by Friedrich Frühling from Pixabay

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.


Image for post
Image for post
Image by Foto-Rabe from Pixabay

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.


Image for post
Image for post
Image by Ronny Overhate from Pixabay

Scenario

If a user visits our app and the user is already signed in, then we want to redirect the user to the /app route.

We will be using a Firefly Semantics Slice Object Store to implement the reactive event handling.

Approach

The below onAuthRedirectToApplication utility method takes a route argument and directs to it when the user is already signed in.

/**
* Redirect the user to the application
* when the user is authenticated.
* @param route
*/
public onAuthRedirectToApplication(route:string) {this.s.OS.S.IS_AUTHENTICATED.obs.subscribe(auth => {
auth && this.r.navigate([route])
})
}

Note that when the application loads it should check whether the…


Image for post
Image for post
Image by Ian Lindsay from Pixabay

An Observable<E> can emit zero or more values of type E . The E typed values can be mouse click events, price updates on a stock, etc., and are emitted until the observable stream completes or errors out.

The Observable does not have to complete or error out. Both are optional and mutually exclusive. If the Observable errors out it cannot complete and if it completes it cannot error out.

Both completion and erroring out end the Observable<E> lifecycle, and no more values will be emitted.

Demo

In the below demo we use of to create an Observable<string> of the greeting…


Image for post
Image for post
Image by ju Irun from Pixabay

Updated Version

There’s an updated version of this article here:

Scenario

Our application calculates an Observable<Result>. We store this result in our Firefly Semantics Slice Object Store.

We want to know when the result is ready, such that we can enable the save button.

Approach

First we will create our object store with an initial value of null for RESULT :

export const OSK: OStoreStart = {
RESULT: { value: null }
};
export interface OSKI {
RESULT: ObsValueReset;
}
const OS: OStore<OSKI> = new OStore<OSKI>(OSK);

Then we will observe this value:

const isResultReady$: Observable<boolean> = OS.S.RESULT.obs.pipe(
map(r => { return !!r;})
);

Demo

When…


Image for post
Image for post

Updated Version

There is an updated version of this article here:

Scenario

We want all the Angular Material components available in our project for prototyping.

Approach

We will install and import this module:

ng new prototype --routing --style=scss --defaults
ng add @angular/material
npm i @fireflysemantics/material-base-module

Import and add MaterialBaseModule to app.module.ts :

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialBaseModule } from '@fireflysemantics/material-base-module';
@NgModule({
declarations: [
AppComponent
],
imports: [
MaterialBaseModule,
BrowserModule,
BrowserAnimationsModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Brought to You By


Image for post
Image for post
Image by jplenio from Pixabay

Updated Version

There is an updated version of this guide here:

The Firefly Semantics Slice Entity Store ( EStore<E> ) contains an observable array of entity instances.

Use it in single page, web, mobile, and server side applications for reactive state management.

In this guide we will use it to store Todo entities and show applications of the API that EStore<E> supports.

Will will also add reactive Slice instances that track which Todo entities are complete and which are incomplete.

Stackblitz

Open a new Stackblitz Typescript project and add @fireflysemantics/slice to the dependencies. Notice the peer dependencies that are automatically pulled in.

This…

Ole Ersoy

Founder of Firefly Semantics Corporation

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