Posts

Blazor: Scoping services to a component

If you want your Blazor component to have its own dependency injection scope, so you can inject new instances of services and have those services disposed of when the component is disposed, then do the following: First, copy and paste the code below into your application.  Then descend your component from ScopedComponentBase . Finally, decorate your dependency properties with [InjectScoped] rather than [Inject] or @inject . For example @inherits ScopedComponentBase @code { [InjectScoped] private WeatherService MyWeatherService { get; set; } } Here is the code you need using Microsoft.AspNetCore.Components; using System; using System.Collections.Concurrent; using System.Collections.Generic; using System.Linq; using System.Reflection; namespace BlazorApp130.Shared { public abstract class ScopedComponentBase : OwningComponentBase<IServiceProvider> { protected override void OnInitialized() { base.OnInitialized(); DependencyInjector.InjectDependencies(

Blazor setTimeout

If you need something like JavaScript's setTimeout in Blazor, you can achieve the same thing with a System.Threading.Timer: The time sponsored by Accurist is @Time private string Time { get; set; } protected override void OnInit() {  var timer = new System.Threading.Timer((_) => {   Time = DateTime.UtcNow.ToString();   InvokeAsync(StateHasChanged);  }, null, 0, 1000);  base.OnInit(); }

Blazor-Fluxor ranked #7 in top 10 Blazor tools!

I was really pleased to see my Blazor library "Fluxor" mentioned in this Visual Studio Magazine article!!!

Review: Rock Your Code: Defensive Programming for Microsoft .NET by David McCarter

Image
I saw a post on Twitter from a guy named David McCarter  promoting his new book.  Rock Your Code: Defensive Programming for Microsoft .NET . I thought the title looked interesting so I bought it. This book (if approximately 50 pages of A5 can count as a book) was packed with bad advice. It is going to be more effort to explain why than the book deserves, but I will do it. TL;DR Source code doesn't compile. When it does, it doesn't do what the author says it does. The author promotes practices long established as poor. Chapter 1: OOP This chapter explains the three pillars of OOP are Encapsulation, Inheritance, and Polymorphism. The author has a tiny 1 or 2 sentence explanation of each. He then goes on to show an example of some poor source code "from a real in production project" (I hope he has permission from the copyright holder). The source code is a single class with lots of public attributes. That's the end of the chapter. Honestly, th

Assigning a piped async result to a variable in an Angular view

If you have an Observable<x> in your component you might find yourself doing something like this {{ ( source$ | async)?.property1 }} {{ ( source$ | async)?.property2 }} This will subscribe to the source$ observable more than once. A commonly used technique to avoid this is to assign the result of the async into a view variable, like so: <ng-container ngif="source$ | async as source">   {{ source?.property1 }}   {{ source?.property2 }} </ng-container> But if you have other UI elements within that ng-container that you want to be displayed whether or not source$ has emitted a value then you might not like the fact that a portion of your UI is excluded until the observable emits a value or when the observable emits a falsey value. If that is the cast, you can try this little trick. <ng-container ngif="(source$ | async) || {} as source">   {{ source.property1 }}   {{ source.property2 }} </ng-container> We utilise *ngIf to a

Implementing a really simple Elvis Operator in TypeScript

Here is a simple routine that implements what is known as the Elvis Operator in TypeScript. In C# you can write code like this Nullable<int> age = person?.BestFriend?.Mother?.CurrentHusband?.Age); If any of the values along the way it will return a null rather than throwing a NullReferenceException. Using the class in my previous blog  Get a Lambda expression as a string  it is possible to achieve the same in TypeScript using the following format const age = elvisOperator(person, x => x.bestFriend.mother.currentHusband.age; It doesn't currently support anything more than simple property access, so you can't access elements in an array for example. import { Expression } from './expression'; export function isUndefinedOrNull(value: any): boolean { return _.isNull(value) || _.isUndefined(value); } export function elvisOperator (instance: TSource, member: (v: TSource) => TResult): any { let path = Expression.pathAsArray(member); let result

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 controls will also need to change. So, rather than using magic strings when building a FormGroup I wrote this small utility class for building them against a strongly typed class by using lambda expressions. This routine uses a routine I blogged about recently  ( Get lambda expression as a string) Take the following interface as an example of something we wish to edit in a ReactiveForm. interface Address { line1: string; line2: string; city: string; } The code to build the form would look like this this.form = this.expressionFormBuilder .createFormGroup<Address>() .addFormControl(x => x.line1) .addFormControl(x => x.line2) .addFormControl(x