Country Code

Angular Named RouterOutlets

The Angular Router is an essential part of most Angular applications.  It has a lot of capabilities but often much of it is not used.  In this post we'll look at named routes and how they can be used.  Named routes are also sometimes referred to as secondary

Serve Angular Over HTTPS

Sometimes you need to serve your application using https and your in luck because Angular makes this very simple. First update your angular.json to set ssl: true as shown below. Next you need to update Chrome to allow invalid certificates for resources loaded from localhost. chrome://flags/#allow-insecure-localhost Then

https

Run Web Application Over HTTPS

Sometimes you need to run your app locally and use HTTPS.  Below are steps that worked for me. Install http-server npm i -g http-server Create a local certificate and key openssl req -x509 -out localhost.crt -keyout localhost.key -newkey rsa:2048 -nodes -sha256 -subj '/CN=localhost' -extensions

GitHub Actions with Monorepos

In this post we'll look at setting up a Monorepo and integrating it with GitHub Actions.  Nx will be used as our monorepo tool.  We'll use a GitHub Action to deploy an application to Firebase and another Github Action to deploy an API to Firebase. Our

Web Application Checklist

Developing web applications can be tricky.  There is a lot to consider.  Each time I start one I need to decide what is important for this particular application, each will be different and have it's own considerations. So below, in no order, is my checklist when starting a

Getting started with AngularFire and Firebase

In this post we'll look at setting up a Firebase project and use AngularFire to interact with our Firestore database.  We'll cover basic Create, Read, Update and Delete (CRUD) operations. The repository below contains the demo application used to perform these operations, I recommend cloning/forking

Deno WebSocketServer with HTTP API and EventSource Client

Deno is an anagram of Node and is written by the same person, Ryan Dahl, not exactly a successor but a fresh approach. What we'll build.  Essentially it's a WebSocket proxy, it will take existing WebSocket connections and pass events to the connected client if requested.

Angular Observable Inputs

Sometimes using an Observable for an Angular @Input is a good idea as it simplifies handling changes in your components.  In this post we'll look at using Observable @Input to do just that. We'll use two components AdminComponent (the parent) and EmployeeComponent (the child).  The AdminComponent

Angular 12 Development Configuration

If you recently upgraded to Angular 12 and run ng serve you may be wondering what happened, as you'll no longer get a development build by default.  Luckily it's straightforward to provide you own development configuration. In your angular.json file find you apps "build&

Angular Injection Token use cases

In this post we'll explore Angular Injection Tokens, what they are and why you might want to use them. Understanding Injection Tokens will be useful to help you gain a deeper understanding of Angular Dependency Injection.  That said, you shouldn't use Injection Tokens unless they are

Serve Content When User is Offline with Service Workers in Angular

There may be times when your users won't have internet access.  This means when they attempt to load or reload your app they'll see the dreaded "No internet" page. It doesn't need to be this way as Progressive Web Applications [https://web.

angular Featured

Creating a WebSocket in a WebWorker with Angular

In this post we'll cover using the Angluar CLI to create a Dedicated WebWorker and then open a WebSocket in the worker thread and post messages to and from the worker thread.

angular Featured

Angular Performance Monitoring with Custom Typescript Decorators

This post follows on from the last post on Angular Performance monitoring [https://country-code.ghost.io/angular-with-web-performance-api/]. The code is updated to use some custom Typescript decorators to add marks and measures to the component. Below is the mark decorator. Simply takes the mark name and creates the mark. export

angular Featured

Getting Started with Angular Performance Monitoring

Below are some results of some initial experimentation with Web Performance API [https://developer.mozilla.org/en-US/docs/Web/API/Performance] and Angular. I started out by adding a performance.mark('constructor') to a component constructor. To perform a measure you need at least two marks, so next

Exposing Angular Components as Custom Elements From a Custom Angular Library

Since Angular 6 "Angular Elements" and "Angular Library" creation are possible via the CLI.  This post covers how to create a library and share components from that library as "Angular/Custom Elements" so any third party application can consume them. In the age of

RXJS Custom Lettable Operators

Reminder for myself on how to work with custom lettable operator in rxjs. Below shows takeEven as lettable operator that emits for people with even ages. /** * an operator that emits only even numbers */ const takeEven = (fn) => <T>(source: Observable<T>) => new Observable<T&

Featured

Angular ViewChild Reference undefined

I ran into this the other day. I had a ViewChild reference and after initializing the ViewChild reference was undefined. This was understandable as I'd made an update to wrap the ViewChild reference in an ngIf which was not resolved. This posed the question as to what happens

RxJS mergeMap (flatMap) vs switchMap

mergeMap What the doc says: Maps each value to an Observable, then flattens all of these inner Observables using mergeAll. mergeMap (aka flatMap) consumes all values on all streams. let outer = Observable.interval(1000).take(2); let source = outer.mergeMap(function (x) { return Observable.interval(500).take(3).map(y

RxJS Scan vs Reduce

Scan will show all values emitted on source observable. Reduce will show only the final value emitted on source observable. var obsScan = Observable.from([1,2,3,4,5,6]); var count1 = obsScan.scan((acc, one) => acc + one, 0); count1.subscribe(x => { console.log('scan shows incremental

angular Featured

Angular with RxJS - Observable vs Subject vs BehaviorSubject

Been working with Angular for awhile and wanted to get down some detail on the differences between Observable vs Subject vs BehaviorSubject. It's a bit of a mind shift but well worth the effort. To that end I find it's best to get hands on so

Fixing sudo access on ubuntu

Recently I had to bring up a dev environment, I'm using Ubuntu via VirtualBox. I needed to fix my NPM permissions and followed the npm guide [https://docs.npmjs.com/getting-started/fixing-npm-permissions]. I ran option 1, without paying attention to the warning. Ouch, sudo permissions were hosed. Fortunately,

Web Components

A quick reference guide to Web Components for yours truly or anyone else who happens by. MDN [https://developer.mozilla.org/en-US/docs/Web/Web_Components] is the source, as ever. The four building blocks of Web Components are: * Custom Elements * HTML Template * HTML Import * Shadow DOM Custom Elements Custom

Functional Programming Resources

When I was a (not so fresh faced) student a lecturer attempted to teach us functional programming in the guise of Haskell [https://www.haskell.org/]. Around the same time our maths lecturer was expousing the joys of Lamba Calculus [https://en.wikipedia.org/wiki/Lambda_calculus] and the brilliance

SVG viewBox and preserveAspectRatio

I've been experimenting with viewBox and preserveAspectRatio recently. Here's a pen [http://codepen.io/tomeustace/pen/Wwppma] that helped me get to grips with it. As ever MDN [https://developer.mozilla.org/en/docs/Web/SVG/Attribute/preserveAspectRatio] are a great resource. Also, found this [https:

fzf

FZF Usage Guide

I've been using FZF for a little while, but not very effectively. So thought I'd get down some usage guides to help me when I turn to it in future and get the muscle memory firing. As ever, fzf --help is your friend. In Vim :help