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:
control.valueChanges
mat-select
default value be steak-0
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", styleUrls: ["./app.component.css"] }) export class AppComponent…
Updated version of this article here:
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.
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 {…
There is an updated version of this article here:
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:
Both libraries reside in a workspace called fs-modules
. …
There’s an updated version of this article here:
Before publishing our NPM Package we want to automatically bump the semver patch
version.
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…
There’s an updated version of this article here:
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…
There’s an updated version of this article here:
We have an customers$:Observable<string[]>
that we want to iterate over in our Angular template.
<ul>
<li *ngFor="let customer of customers$ | async; index as i">
{{ customer.name }}
</li>
</ul>
There’s an updated version of this article here:
A block chain block contains the following:
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…
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.
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.
When our Observable<E>
errors out, we want to emit the string fallback value OOOPS
.
oops.pipe(catchError(err => of('OOOPS')))
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.
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.
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…
Founder of Firefly Semantics Corporation