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
