Scenario
We need a minimal Typescript class that will store the median of a set of numbers:
Approach
The file Median.ts contains the class.
import { median } from './median';export class Median {
result: number = undefined;
constructor(arr: number[]) {
this.result = median(arr);
}
}
The function computing the median is contained in median.ts . See the demo:
https://stackblitz.com/edit/typescript-2njmx7
Demo
Notice that we have broken off the function median from the class. This allows us to:
- Easily place the function in a utility library if it’s reused outside of the context of the class.
- View the class in a more minimal uncluttered form
- Code tests that are smaller and more focused
This is just my opinion as to why we see so many kids on ADD medication, etc. and it’s based on the personal progress I’ve made described here:
One of the things that I found interesting about my eyes getting so much better is that I can feel the work my body / energy is doing on them and the corresponding brain connection, I realize that the degeneration of that area of my body before was causing “Noise” and that source of noise caused considerable “Distraction”.
And I think that’s the root of why we see so many kids on…
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-selectdefault value besteak-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…
