A type safe way of creating Angular ReactiveForms and FormGroups

If, like myself, you prefer as many of your coding mistakes to be identified at compile time as possible then you might like the following example. The FormBuilder in Angular expects us to identify our FormControls with a string name. If ever the API of your server changes then of course the names of those …
Continue reading A type safe way of creating Angular ReactiveForms and FormGroups

Failed to execute ‘send’ on ‘XMLHttpRequest’: Failed to load ng:///DynamicTestModule – Solved (Angular testing)

If when you run your tests you see an error similar to this Failed to execute ‘send’ on ‘XMLHttpRequest’: Failed to load ‘ng:///DynamicTestModule/xxxxxxComponent_Host.ngfactory.js It means something in your component is throwing an exception and the test framework is returning a wrapped exception. To see the actual exception run ng test with -sm=false as a parameter …
Continue reading Failed to execute ‘send’ on ‘XMLHttpRequest’: Failed to load ng:///DynamicTestModule – Solved (Angular testing)

Angular – How to create a data aware custom component

Introduction This blog will demonstrate how to create an Angular component that you are able to add [ngModel] [formControl] and [formControlName] attributes to your custom component, and have your component correct implement the features required to work with Angular forms. Setting up the ngModule First add FormsModule and ReactiveFormsModule to your main NgModule’s import declaration …
Continue reading Angular – How to create a data aware custom component

TypeScript – A polyfill to extend the Object class to add a values property to complement the keys property

I expect you’ve used Object.keys at some point. Here is how to extend the Object class to add a values property. This kind of thing is useful when you have a lookup of keys where all of the values are the same type, such as the following object you’d expect to see in a Redux …
Continue reading TypeScript – A polyfill to extend the Object class to add a values property to complement the keys property

TypeScript – Get a Lambda expression as a string

One of the things I really like about C# is the ability to convert a lambda into a string. It’s useful for doing all kinds of things, especially when you are calling a 3rd party library’s method that expects a string identifying a member of an object. I saw this was lacking in TypeScript, which …
Continue reading TypeScript – Get a Lambda expression as a string

Angular – How to create composite controls that work with formGroup/formGroupName and ReactiveForms

This blog post will show you how to create composite controls in AngularX that allow you to reuse them across your application using the formGroupName directive to data-bind them. We’ll start off with a very basic component that uses a reactive form to edit a person and their address. Editing a person’s name and address …
Continue reading Angular – How to create composite controls that work with formGroup/formGroupName and ReactiveForms

Redux sub-reducer pattern for complex / nested data structures

I love the idea of the Redux pattern, the way all reducers are pure and predictable. I love the way they are effectively listeners that act on event notifications received from a central dispatcher, and I really like the way the whole approach simplifies the application and makes code in my Angular app’s components only …
Continue reading Redux sub-reducer pattern for complex / nested data structures

Loading an assembly from a specific path, including all sub dependencies

public static class AssemblyLoader { private static readonly ConcurrentDictionary<string, bool> AssemblyDirectories = new ConcurrentDictionary<string, bool>(); static AssemblyLoader() { AssemblyDirectories[GetExecutingAssemblyDirectory()] = true; AppDomain.CurrentDomain.AssemblyResolve += ResolveAssembly; } public static Assembly LoadWithDependencies(string assemblyPath) { AssemblyDirectories[Path.GetDirectoryName(assemblyPath)] = true; return Assembly.LoadFile(assemblyPath); } private static Assembly ResolveAssembly(object sender, ResolveEventArgs args) { string dependentAssemblyName = args.Name.Split(’,’)[0] + ".dll"; List<string> directoriesToScan = AssemblyDirectories.Keys.ToList(); …
Continue reading Loading an assembly from a specific path, including all sub dependencies

Running dotnet core xUnit tests on Visual Studio Team Services (VSTS)

1: Run dotnet restore to restore package dependencies. 2: Run dotnet build to build the binaries. 3: Run dotnet test to run the tests. Note the additional parameters –no-build to prevent a rebuild and –logger “trx;LogFileName=tests-log.trx” to ensure the test results are written to disk, 5: Use  a Publish Test Results tasks to output the …
Continue reading Running dotnet core xUnit tests on Visual Studio Team Services (VSTS)

Get list of object keys in Angular

import { PipeTransform, Pipe } from “@angular/core”;@Pipe({ name: ‘keys’ })export class KeysPipe implements PipeTransform {  transform(value, args:string[]) : any {    return Object.keys(value);  }} Then to get a list of errors for a form element you can do this <ul *ngIf=”form.get(‘userName’).invalid” class=”help-block with-errors”>   <li *ngFor=”let error of form.get(‘userName’).errors | keys”>{{ error.key }}</li></ul>