DEV Community: Steven McLintock

Using Angular’s EventEmitter to Share Data Between Child and Parent Components

Steven McLintock — Wed, 28 Dec 2022 20:44:22 +0000

There are often scenarios in Angular where we need to communicate between components, specifically to send data from a child component to it's parent component. Consider this Angular 12 app for managing a to do list:

When saving a new to do to the list, I'm using the child component (the dialog window) to send the new to do to an API to be stored in a database. In addition to this, I need to communicate to the parent component (the to do list) that the new to do was saved and add it to the list:

I'll begin by demonstrating the current Angular app (currently without an EventEmitter) and explain how we can implement an EventEmitter to send data between the child and parent components.

app.component.ts (without EventEmitter)

In app.component.ts (the parent component) I'm retrieving the list of to dos from an API and assigning them to an array:



import { Component, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { ToDoListService } from './services/to-do-list.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  public title = 'To-Do List';
  public toDoList: string[] = [];

  constructor(
    private titleService: Title,
    private toDoListService: ToDoListService) {}

  ngOnInit(): void {
    this.titleService.setTitle(this.title);
    this.toDoList = this.toDoListService.getToDoList();
  }
}

app.component.html (without EventEmitter)

In app.component.html I'm looping through the array of to dos and referencing SaveNewToDoComponent (the child component) that is being used as a dialog window to save a new to do:



<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    ...
</div>

<div class="container mt-4">
  <div class="row">
    <div class="col-md-12">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">To Do List</h5>
          <p class="card-text"><small>View all of the to-dos or save a new to-do to the list.</small></p>
          <button type="button" class="btn btn-primary mt-1 mb-4" data-toggle="modal" data-target="#toDoModal">
            Save New To Do
          </button>
          <ul class="list-group">
            <li class="list-group-item list-group-item-action" *ngFor="let toDo of toDoList">{{ toDo }}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

<app-save-new-to-do></app-save-new-to-do>

save-new-to-do.ts (without EventEmitter)

In save-new-to-do.ts (the child component) I'm retrieving the new to do from the form and sending it to an API to be stored in a database:



import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { FormBuilder } from '@angular/forms';
import { ToDoListService } from 'src/app/services/to-do-list.service';

@Component({
  selector: 'app-save-new-to-do',
  templateUrl: './save-new-to-do.component.html',
  styleUrls: ['./save-new-to-do.component.css']
})
export class SaveNewToDoComponent implements OnInit {
  formGroup: any;

  constructor(
    private formBuilder: FormBuilder,
    private toDoListService: ToDoListService) { }

  ngOnInit(): void {
    this.formGroup = this.formBuilder.group({
      toDo: ''
    });
  }

  public saveNewToDo(formData: any) {
    let toDo = formData['toDo'];
    this.toDoListService.saveNewToDo(toDo);
  }
}

Adding EventEmitter to the Angular App

I'll add an EventEmitter by adding an output decorator to the SaveNewToDoComponent class:



@Output() saveToDoEvent = new EventEmitter<string>();

Also in the SaveNewToDoComponent class, I'll emit an event containing the new to do once the to do has been sent to the API:



this.saveToDoEvent.emit(toDo);

save-new-to-do.ts (with EventEmitter)

Below is the entire component save-new-to-do.ts using an EventEmitter:



import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { FormBuilder } from '@angular/forms';
import { ToDoListService } from 'src/app/services/to-do-list.service';

@Component({
  selector: 'app-save-new-to-do',
  templateUrl: './save-new-to-do.component.html',
  styleUrls: ['./save-new-to-do.component.css']
})
export class SaveNewToDoComponent implements OnInit {
  formGroup: any;
  @Output() saveToDoEvent = new EventEmitter<string>();

  constructor(
    private formBuilder: FormBuilder,
    private toDoListService: ToDoListService) { }

  ngOnInit(): void {
    this.formGroup = this.formBuilder.group({
      toDo: ''
    });
  }

  public saveNewToDo(formData: any) {
    let toDo = formData['toDo'];
    this.toDoListService.saveNewToDo(toDo);
    this.saveToDoEvent.emit(toDo);
  }
}

Within app.component.html, I'll use event binding to communicate the event occurring in the child component and send the new to do to the parent component by executing the new method 'appendToDo', passing in the new to do as a parameter:



<app-save-new-to-do (saveToDoEvent)="appendToDo($event)"></app-save-new-to-do>

Finally, I'll add the new method 'appendToDo' to the parent component to push the new to do to the array:



public appendToDo(toDo: string) {
    if (toDo?.length > 0) {
        this.toDoList.push(toDo);
    }
}

Now that I've added an EventEmitter into the Angular app, the list will be automatically updated with the new to do:

GitHub Repository

Thank you for reading this article! The full solution used in this guide is available at github.com/stevenmclintock/angular-event-emitter-example.

How to Add Bootstrap 4 to an Angular App

Steven McLintock — Wed, 28 Dec 2022 20:37:37 +0000

I was trying to add Bootstrap 4 to an Angular app recently and it was more difficult than I expected. We're able to add Bootstrap 4 easily using NPM (Node Package Manager), but we still need to install and configure the scripts and dependencies. This can result in a visit to StackOverflow which shouldn't be necessary.

Install Bootstrap 4

We can install the latest version of Bootstrap 4 (at the time of writing this is **4.5.0) using NPM. Please adjust the version number if you require a lower or higher version:

npm install bootstrap@4.5.0

Install jQuery and Popper

According to the getting started guide, Bootstrap 4 requires the jQuery and Popper libraries to be added as dependencies, so we'll also add these using NPM commands:

npm install jquery@3.5.1
npm install popper.js@1.14.3

Configure the Styles and Scripts

Finally, in your angular.json file all you need to do is reference the CSS and JavaScript files in the styles and scripts sections:

"styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "src/styles.css"
],
"scripts": [
    "node_modules/jquery/dist/jquery.slim.min.js",
    "node_modules/popper.js/dist/umd/popper.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

If you have an issue with Popper not loading correctly, please check you have referenced node_modules/popper.js/dist/umd/popper.min.js and not node_modules/popper.js/dist/popper.min.js.

Puppeteer Sharp: Crawl the Web using C# and Headless Chrome

Steven McLintock — Wed, 28 Dec 2022 20:34:00 +0000

Puppeteer Sharp is a port of the popular Headless Chrome NodeJS API built by Google. Puppeteer Sharp was written in C# and released in 2017 by Darío Kondratiuk to offer the same functionality to .NET developers.

Puppeteer Sharp enables a .NET developer to programmatically control, or ‘puppeteer’ the open-source Google Chromium web browser. The convenience of the Puppeteer API is the ability to use a headless instance of the browser, not actually displaying the UI for increased performance benefits.

Why use Puppeteer Sharp?

If you are a .NET developer, installing the Puppeteer Sharp Nuget package into your project can enable you to achieve:

Crawling the web using a headless web browser
Automated testing of a web application using a test framework
Retrieve JavaScript rendered HTML

In the modern web it is common for a web application to rely on JavaScript to load the UI. If you were to programmatically load Bing Maps without using Puppeteer, you may be disappointed to receive:

In addition to retrieving JavaScript rendered HTML, Puppeteer Sharp is also capable of navigating the website by injecting HTML; interacting with UI elements; taking screenshots or creating PDFs, and has many more features currently included in the popular Google NodeJS API.

Getting Started

To use Puppeteer Sharp in a new or existing .NET project. install the latest version of the Nuget package ‘PuppeteerSharp’.

The first line of code that is necessary to ‘puppeteer’ a web browser is to download a revision of Chromium to the local machine. This is the browser that Puppeteer Sharp will use to interact with a website.

Fortunately, we can use C# to download either the default revision, or a revision the developer specifies. The revision will only download if it does not already exist on the local machine.

// Download the Chromium revision if it does not already exist
await new BrowserFetcher().DownloadAsync(BrowserFetcher.DefaultRevision);

If the download is successful, you will see the version of the browser necessary to run on your operating system in your project directory:

Load a Webpage

Now that you have a browser downloaded to your local machine, you can begin to load a webpage and retrieve the JavaScript rendered HTML.

First, we will programmatically initiate an instance of the headless web browser, load a new tab and go to ‘https://www.bing.com/maps’:

// Create an instance of the browser and configure launch options
Browser browser = await Puppeteer.LaunchAsync(new LaunchOptions
{
   Headless = true
});

// Create a new page and go to Bing Maps
Page page = await browser.NewPageAsync();
await page.GoToAsync("https://www.bing.com/maps");

With the webpage successfully loaded in the headless browser, let’s interact with the webpage by searching for a local tourist attraction:

// Search for a local tourist attraction on Bing Maps
await page.WaitForSelectorAsync(".searchbox input");
await page.FocusAsync(".searchbox input");
await page.Keyboard.TypeAsync("CN Tower, Toronto, Ontario, Canada");
await page.ClickAsync(".searchIcon");
await page.WaitForNavigationAsync();

We’re able to use Puppeteer Sharp to interact with the JavaScript rendered HTML of Bing Maps and search for ‘CN Tower, Toronto, Ontario, Canada’!

If you would like to store the HTML to parse elements such as the address or description, you can easily store the HTML in a variable:

// Store the HTML of the current page
string content = await page.GetContentAsync();

Once you are finished, close the browser to free up resources:

// Close the browser
await browser.CloseAsync();

Screenshots and PDF Documents

One of the benefits of Puppeteer Sharp is the ability to generate screenshots and PDF documents of the current page. This can be particularly useful for debugging purposes; automated testing or to capture a webpage at a specific resolution.

If you would like to a take a screenshot of the current page:

await page.ScreenshotAsync("C:\\Files\\screenshot.png");

Alternatively, to generate a PDF document of the current page:

await page.PdfAsync("C:\\Files\\document.pdf");

Change the View Port

If you require to test a webpage at a specific display size, such as to view how the page would appear on a mobile handset, you can use Puppeteer Sharp to change the size of the view port of the current page:

// Change the size of the view port to simulate the iPhone X
await page.SetViewportAsync(new ViewPortOptions
{
    Width = 1125,
    Height = 2436
});

Trace Logs

Whilst the functionality discussed thus far is useful to monitor and detect issues related to the user interface of a webpage, a .NET developer may also use Puppeteer Sharp to closely examine any network performance issues.

To accomplish this we can programmatically start and stop a trace log:

await page.Tracing.StartAsync(new TracingOptions { Path = "C:\\Files\\trace.json" });

...

await page.Tracing.StopAsync();

If a trace log is not capturing the amount of detail you require in your debugging session, you can programmatically enable Chrome DevTools to yield further insight:

Browser browser = await Puppeteer.LaunchAsync(new LaunchOptions
{
   Devtools = true
});

If you enable Chrome DevTools in Puppeteer Sharp, the headless configuration will automatically be disabled and you will be able to view the browser whilst DevTools displays the options to view the JavaScript rendered code of your web application, view network activity among other features.

Connect to a Remote Browser

One last feature of Puppeteer Sharp that I would like to mention is the ability to connect to a remote browser. This may be useful if you are using a serverless environment where installing a browser is not an option, such as the scalable ‘Azure Functions’.

One such service that compliments this feature is browserless.io:

var connectOptions = new ConnectOptions()
{
   BrowserWSEndpoint = "$wss://chrome.browserless.io/"
};

using (var browser = await Puppeteer.ConnectAsync(connectOptions))
{
   ...
}

Contribute to Puppeteer Sharp

If you would like to use this excellent API, be sure to visit puppeteersharp.com. However, If you would like to contribute to this project, you can find the GitHub profile at github.com/kblok/puppeteer-sharp.

Using Verify, Setup and Callback in the Moq Mocking Framework

Steven McLintock — Sat, 17 Dec 2022 16:37:25 +0000

This article is intended to explain the Verify, Setup and Callback features of the Moq unit testing framework with examples of how to use them.

Demo Console App

To have a piece of code to unit test, and also a dependency to mock I created a demo console app that will reverse a word and display it to the user. It uses the class WordUtils that has a dependency of UtilLogger (the dependency we'll be mocking) that's used to log a message to the console if this has been enabled in appsettings.json. You will also notice the word that's being reversed is stored in a simple cache (a dictionary object); this will be used to demonstrate the callback functionality.

WordUtils.cs

public class WordUtils : IWordUtils
{
    private readonly IUtilLogger _log;

    public const string REVERSE_ERROR_ENTER_A_WORD = 
        "Please enter a word to reverse.";

    public WordUtils(IUtilLogger log)
    {
        _log = log;
    }

    public string Reverse(string word)
    {
        if (string.IsNullOrEmpty(word))
            throw new ArgumentException(REVERSE_ERROR_ENTER_A_WORD);

        char[] charArray = word.ToCharArray();
        Array.Reverse(charArray);
        string reverseWord = new string(charArray);

        if (_log.IsLogEnabled())
            _log.LogInformation(
                $"The word \"{word}\" was reversed as \"{reverseWord}\"");

        // Add the word and the reversed word to the 
        // in-memory cache (a dictionary object)
        _log.AddToWordCache(word, reverseWord);

        return reverseWord;
    }
}

UtilLogger.cs

public class UtilLogger<T> : Logger<T>, IUtilLogger
{
    private readonly IOptions<LogOptions> _logOptions;

    public UtilLogger(
        IOptions<LogOptions> logOptions,
        ILoggerFactory logFactory)
        : base(logFactory)
    {
        _logOptions = logOptions;
    }

    private Dictionary<string, string> WordCache { get; set; } = 
        new Dictionary<string, string>();

    public bool IsLogEnabled() 
        => _logOptions.Value.IsLogEnabled;

    public void AddToWordCache(string word, string reverseWord) 
        => WordCache.Add(word, reverseWord);
}

Initialize the Mock and Class Under Test

Before we jump into the verify, setup and callback features of Moq, we'll use the [TestInitialize] attribute in the MSTest framework to run a method before each test is executed. This method will define a mock of the IUtilLogger interface and initialize the class under test (WordUtils).

private IUtilLogger _log;
private IWordUtils _wordUtils;

[TestInitialize]
public void Initialize()
{
    // Initialize a mock of the logger dependency
    _log = Mock.Of<IUtilLogger>();

    // Initialize the WordUtils class with it's dependency
    _wordUtils = new WordUtils(_log);
}

Using Verify

Now that we've got our mock created, let's write our first unit test to use the verification feature of Moq. Once we've executed the method that we're testing (Reverse), we want to determine if we're actually checking if the log is enabled. To do this we'll "verify" if the 'IsLogEnabled' method on the mock was executed as part of the test. We can also verify how many times the method was executed:

[TestMethod]
public void Reverse_ShouldInvokeOnce_IsLogEnabled()
{
    _wordUtils.Reverse("mountain");

    Mock.Get(_log).Verify(x => x.IsLogEnabled(), Times.Once);
}

Using Setup

We can also verify if the log was actually logged using the 'Log' method, but to do that we'll need to use the "setup" feature. If we simply try and verify if the log was logged the test will fail. This is because the method
'IsLogEnabled' will return false by default. It will only return true if the setting is enabled in appsettings.json, a file that's missing from our unit test project. Instead, let's setup the method 'IsLogEnabled' to simulate a response of true:

[TestMethod]
public void Reverse_ShouldInvokeOnce_LogInformationMethod()
{
    Mock.Get(_log)
        .Setup(x => x.IsLogEnabled())
        .Returns(true);

    _wordUtils.Reverse("mountain");

    Mock.Get(_log).Verify(x => x.Log(
        LogLevel.Information, 
        It.IsAny<EventId>(), 
        It.IsAny<FormattedLogValues>(), 
        It.IsAny<Exception>(), 
        It.IsAny<Func<object, Exception, string>>()), 
        Times.Once);
}

Using Callback

Imagine if you had a method in your application that inserted a new row into a table in a database, and this method was dependant on that new row being inserted for it to carry on its work. If your database was a mock in a unit test, how would you write a test to simulate that the row was inserted? This would be an opportunity to use the "callback" feature of Moq.

In this example I'm instructing the method 'AddToWordCache' to insert it's two parameters (word and reverseWord) into a dictionary object that I'm setting up in my unit test. When the method 'AddToWordCache' is executed as part of the test, I can rely on those two parameters being inserted into the cache so I can continue with the rest of the unit test.

[TestMethod]
public void Reverse_ShouldInvokeOnce_AddToWordCache()
{
    string word = "mountain";
    string reverseWord = "niatnuom";

    Dictionary<string, string> wordCache = new Dictionary<string, string>();

    Mock.Get(_log)
        .Setup(x => x.AddToWordCache(word, reverseWord))
        .Callback<string, string>((w, r) => wordCache.Add(w, r));

    _wordUtils.Reverse(word);

    wordCache.Count.Should().BeGreaterThan(0);

    Mock.Get(_log).Verify(x => x.AddToWordCache(
        It.IsAny<string>(), It.IsAny<string>()), Times.Once);
}

GitHub Repository

The code in this article is available at
github.com/stevenmclintock/moq-demo-project.

Creating Your Own Custom Attributes in C# and Retrieving Their Values

Steven McLintock — Sat, 17 Dec 2022 16:29:00 +0000

You would think after using a programming language for years that you've seen it all - we all know this simply isn't the case. Custom attributes is a feature of C# that I had seen being used by others, but had never actually used myself. Well, it's time to change that!

I was trying to think of an example of where C# attributes might be used in every day life and then it dawned on me: unit testing! If you have ever used a unit test framework such as MSTest, NUnit or xUnit, you will have used attributes in C# to define the classes and methods that you would like the test framework to execute. This is just one example of how you can use attributes to assign metadata to elements of your code.

Instead of consuming attributes already built into .NET, there will occasionally be a requirement to create your own custom attribute. A use case for this may be to indicate areas of your application that require a specific user permission. What if you didn't want every user logged in to your API to be able to access a utility to obtain user credentials, for example. With a custom attribute we're able to indicate the user permission(s) required to access this functionality.

Create a Custom Attribute

Let's begin by creating a new custom attribute by declaring a new class that inherits from the System.Attribute class:



[AttributeUsage(AttributeTargets.Class, AllowMultiple = true)]
public class PermissionRequiredAttribute : Attribute
{
    public PermissionRequiredAttribute(string permission)
    {
        Permission = permission;
    }

    public string Permission { get; }
}

Ironically, you'll notice there is the attribute AttributeUsage being used on the new custom attribute. This is to inform .NET that the new custom attribute should target a class (as opposed to a method, property, etc.) and also allow classes to be assigned multiple instances of the custom attribute.

Be sure to append "Attribute" to the end of the name of your new custom attribute. Although the class in the code snippet is named PermissionRequiredAttribute, you will actually refer to it as an attribute by simply using [PermissionRequired]. Cool, huh!

Let's apply our new custom attribute to a Credentials class to add metadata that only users with certain permission(s) can access it:



[PermissionRequired("administrator")]
[PermissionRequired("manager")]
public class Credentials : ICredentials
{
    public string[] GetCredentials()
    {
        throw new NotImplementedException();
    }
}

Because we set the AttributeUsage property AllowMultiple to true, we're able to assign multiple custom attributes to the Credential class to define the different user permissions, and we can easily add more in the future if needed.

Retrieving Values of a Custom Attribute

Let's make use of reflection in .NET to use the method GetCustomAttributes to retrieve a list of PermissionRequiredAttribute objects and assign their Permission properties to a collection of strings.



IEnumerable<string> permissions = 
    typeof(Credentials).GetCustomAttributes(
        typeof(PermissionRequiredAttribute), true)
            .Cast<PermissionRequiredAttribute>()
            .Select(x => x.Permission);

We're now able to iterate through the collection and determine the permissions of the class assigned by the custom attribute!

Useful links

GitHub repository for the code used in this article
Official documentation on Writing Custom Attributes
Official documentation on Retrieving Information Stored in Attributes

Coming to Canada: Immigrating to Toronto as a .NET Developer

Steven McLintock — Sat, 17 Dec 2022 16:20:06 +0000

In January 2017 I immigrated to Toronto, Canada with my wife (a Canadian citizen born in Toronto). We met in Glasgow, Scotland where she was studying as an international student and after dating for a few years, we married in Edinburgh in January 2016. A year later we'd been told by the Canadian government that our visa application had been successful and we were given a prompt deadline to land in the country.

I had been working as a web developer in my early career, later on choosing to specialize in .NET development after dipping my toe in PHP and deciding it wasn’t for me. When I’d travel to Canada to visit family and friends, it was always on my mind to immigrate one day, and I was hopeful my experience as a .NET developer would be enough to work in the land of maple syrup and ice hockey.

Working in Lockheed Martin’s technology and software department in Scotland (subsequently acquired by Leidos), I was confident that an international company would look good on my resume. What I didn’t know was how long it would take to find a job to continue my career in .NET development once I moved to Canada.

We’d sold our apartment, donated our possessions and shipped the few remaining items we wanted to bring with us to our new life across the pond. It was time to board the plane and make the journey to Pearson airport!

Upon landing in Toronto, I was unnecessarily concerned that officials at passport control wouldn’t let me in, that somehow there had been a mistake. I hadn’t have worried. All my documents were in order and it was just a case of waiting in the gruelling two hour line at the immigration desk to be permitted to enter the country as a permanent resident.

We made it! Being effectively unemployed and with very few (if any!) job prospects; I remember not wasting any time in connecting to Wi-Fi in pursuit of my new role.

My first day as a permanent resident in Canada was also my first day as a Bell Canada customer. We had to say goodbye to our long held (British) phone numbers before we boarded the flight, so before submitting any job applications, I became the owner of a new Samsung Galaxy S7.

Because we had immigrated in the middle of a Canadian winter, it was actually a blessing in disguise. In the midst of snow and ice, there was nothing to do but apply for jobs (and hike to the nearest Tim Hortons, of course). We had intended to apply for jobs in nearby Kitchener, Ontario, partly due to the technology companies in the area (Google amongst them), but mostly due to the cost of living.

Whilst several .NET developer positions were being advertised in our preferred location, it is no exaggeration that for each job advertised in Kitchener, there were a handful more in downtown Toronto. With my newly acquired Canadian phone number, I began researching companies and applying for jobs in the home of the Toronto Maple Leafs, Toronto Blue Jays and the CN Tower.

One of these companies was DAC Group, a digital marketing agency with a head office in North York, Toronto. I had already worked for a digital agency in Scotland and learnt a lot, so this seemed like a good opportunity. I submitted my application and eagerly awaited their response.

I got lucky! The technology department at DAC Group recently went through a restructure and were hiring a few .NET developers to build out their REST API services. I went through the common HR telephone interview, followed by a technical Skype interview and was fortunate to make it to an in person interview at their head office.

Driving the 2 hour journey to Toronto, I rehearsed what I planned to say and tried to remember what was on my resume. When I got seated in the meeting room, the software architect said something along the lines of “Thanks for coming! This should only take 15 minutes of your time.”. Sure enough, he was right!

On the journey home I heard my new smartphone start to ring and I was offered the job! Once we found an apartment to rent in Toronto (two weeks later), I started as an “Application Developer” at DAC Group, continuing my career as a .NET Developer in Canada.

Thank you to everyone at DAC Group, and thank you Canada for making a Scotsman feel so welcome!

Auto-Generate Insert Statements With Data Using SQL Server Management Studio

Steven McLintock — Sat, 17 Dec 2022 16:14:31 +0000

If you are working with a database in SQL Server Management Studio (SSMS), you may find you need a way to auto-generate INSERT statements with the data from a table. This might be for inserting the data into a different database for testing purposes, or simply as a backup.

The Generate Scripts feature of SQL Server Management Studio will let you choose an area of the database (e.g. a table) for generating Transact-SQL scripts. It will let you choose one or more database objects and you can generate scripts for the schema, the data or both.

You can find the Generate Scripts feature in the context menu of the database. Right-click on the database, navigate to Tasks and then Generate Scripts:

Click Next in the Introduction:

In Choose Objects, choose a database object, or multiple objects:

In Set Scripting Options, click Advanced:

This is important as you can now tell the Generate Scripts feature to generate scripts for the schema, the data or both:

If you chose to generate scripts for both the schema and the data, you should see the following:

Using MediatR Request Handlers in ASP.NET Core to Decouple Code

Steven McLintock — Sun, 11 Dec 2022 20:34:41 +0000

MediatR, by it's definition, is a simple, unambitious mediator implementation in .NET. It was released in 2014
by Jimmy Bogard and is a useful package that can be used to implement the popular mediator pattern in .NET projects. It's available on
NuGet and is also open-source on GitHub.

This article isn't meant to be an in-depth explanation of the mediator pattern, for that I'd recommend the series of articles over at .NET Core Tutorials beginning with
The Mediator Pattern In .NET Core – Part 1 – What’s A Mediator?. Instead, I thought I'd demonstrate the advantages of using the MediatR package within a web application built using ASP.NET Core and C#, using request handlers to decouple code.

ASP.NET Core Web Application Without MediatR

In this article I'll be using a demo ASP.NET Core web application (available on GitHub) that was originally built without using MediatR. This is to demonstrate the benefits of adding the mediator pattern into an existing project and how implementing MediatR request handlers can help decouple the code.

The demo ASP.NET Core web application contains the following projects:

MediatRApi (the API used for accepting GET, POST and PUT requests)
MediatRApi.Repositories (the repositories used for interacting with the database)
MediatRApi.Services (the services used throughout the application, such as the validation service)

In the controller that doesn't use MediatR, you'll notice the constructor is being injected with 4 dependencies; 1 validation service as well as 3 repositories. However, if you notice in each of the action methods, only one repository is being used by each of them. Without using MediatR, this constructor is already a code smell:

WithoutMediatRController.cs

[ApiController]
[Route("[controller]")]
public class WithoutMediatRController : ControllerBase
{
    private readonly IValidationService _validationService;
    private readonly IArtistRepository _artistRepository;
    private readonly IAlbumRepository _albumRepository;
    private readonly ISongRepository _songRepository;

    public WithoutMediatRController(
        IValidationService validationService,
        IArtistRepository artistRepository,
        IAlbumRepository albumRepository,
        ISongRepository songRepository)
    {
        _validationService = validationService;
        _artistRepository = artistRepository;
        _albumRepository = albumRepository;
        _songRepository = songRepository;
    }

    [HttpGet("get-artist/{artistId:guid}")]
    public async Task<Artist> GetArtist(Guid artistId)
    {
        _validationService.Validate<Guid>(artistId);

        return await _artistRepository.GetArtist(artistId);
    }

    [HttpPost("create-album")]
    public async Task<Guid> CreateAlbum(Album album)
    {
        _validationService.Validate<Album>(album);

        return await _albumRepository.CreateAlbum(album);
    }

    [HttpPut("set-rating")]
    public async Task SetRating(SetRating setRating)
    {
        _validationService.Validate<SetRating>(setRating);

        await _songRepository.SetRating(setRating);
    }
}

ASP.NET Core Web Application With MediatR

Ideally, we want one dependency in the constructor of the controller: MediatR.

We'll use the mediator pattern to decouple the code, creating separate "requests" that will store instructions for executing code in associated "request handlers", with each request handler having its own set of dependencies.

I've added the new project MediatRApi.Handlers into the solution to store all our MediatR requests and request handlers that will be used to implement the mediator pattern in our ASP.NET Core web application:

You'll need to add the MediatR NuGet package into your project to use the MediatR namespace:

Requests and Request Handlers

Let's explore each request and it's associated request handler in this new project.

GetArtistRequest and GetArtistHandler

GetArtistRequest inherits from MediatR.IRequest and it's response will be an Artist. The GetArtistHandler class inherits from MediatR.IRequestHandler and the dependencies being injected into it's constructor are only used for retrieving an artist. The Handle method is used to
execute the code and return the artist:

public class GetArtistRequest : IRequest<Artist>
{
    public Guid ArtistId { get; set; }
}

public class GetArtistHandler : IRequestHandler<GetArtistRequest, Artist>
{
    private readonly IValidationService _validationService;
    private readonly IArtistRepository _artistRepository;

    public GetArtistHandler(
        IValidationService validationService,
        IArtistRepository artistRepository)
    {
        _validationService = validationService;
        _artistRepository = artistRepository;
    }

    public async Task<Artist> Handle(
        GetArtistRequest request,
        CancellationToken cancellationToken = default)
    {
        _validationService.Validate<Guid>(request.ArtistId);

        return await _artistRepository.GetArtist(request.ArtistId);
    }
}

CreateAlbumRequest and CreateAlbumHandler

Similar to GetArtistRequest, the CreateAlbumRequest and CreateAlbumHandler inherit from MediatR.IRequest and MediatR.IRequestHandler and are responsible for
creating an album and returning a guid:

public class CreateAlbumRequest : IRequest<Guid>
{
    public Album Album { get; set; }
}

public class CreateAlbumHandler : IRequestHandler<CreateAlbumRequest, Guid>
{
    private readonly IValidationService _validationService;
    private readonly IAlbumRepository _albumRepository;

    public CreateAlbumHandler(
        IValidationService validationService,
        IAlbumRepository albumRepository)
    {
        _validationService = validationService;
        _albumRepository = albumRepository;
    }

    public async Task<Guid> Handle(CreateAlbumRequest request,
        CancellationToken cancellationToken = default)
    {
        _validationService.Validate<Album>(request.Album);

        return await _albumRepository.CreateAlbum(request.Album);
    }
}

SetRatingRequest and SetRatingHandler

Last but not least, SetRatingRequest and SetRatingHandler will set a rating for a song and return MediatR.Unit. MediatR.Unit represents a void type, since void isn't a valid return type in C#:

public class SetRatingRequest : IRequest<Unit>
{
    public Guid SongId { get; set; }

    public int Rating { get; set; }
}

public class SetRatingHandler : IRequestHandler<SetRatingRequest, Unit>
{
    private readonly IValidationService _validationService;
    private readonly ISongRepository _songRepository;

    public SetRatingHandler(
        IValidationService validationService,
        ISongRepository songRepository)
    {
        _validationService = validationService;
        _songRepository = songRepository;
    }

    public async Task<Unit> Handle(
        SetRatingRequest request,
        CancellationToken cancellationToken = default)
    {
        SetRating setRating = new SetRating
        {
            SongId = request.SongId,
            Rating = request.Rating
        };

        _validationService.Validate<SetRating>(setRating);

        await _songRepository.SetRating(setRating);

        return Unit.Value;
    }
}

Add MediatR to Startup.cs

To add MediatR as a dependency throughout our web application (i.e in the constructor of the controller), we'll need to register MediatR in the 'ConfigureServices' method within Startup.cs. To accomplish this we first need to
add the Nuget
package MediatR.Extensions.Microsoft.DependencyInjection into the project:

I've created a 'Dependencies' class with the one method 'RegisterRequestHandlers' that will be called from the 'ConfigureServices' method within the Startup.cs
file of the web application:

Dependencies.cs

public static class Dependencies
{
    public static IServiceCollection RegisterRequestHandlers(
        this IServiceCollection services)
    {
        return services
            .AddMediatR(typeof(Dependencies).Assembly);
    }
}

Within the 'ConfigureServices' method of Startup.cs, 'RegisterRequestHandlers' is being called to inject MediatR into the web application and register the request handlers:

ConfigureServices (in Startup.cs)

// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices(IServiceCollection services)
{
    // Register the services and repositories
    services.AddSingleton<IValidationService, ValidationService>();
    services.AddSingleton<IArtistRepository, ArtistRepository>();
    services.AddSingleton<IAlbumRepository, AlbumRepository>();
    services.AddSingleton<ISongRepository, SongRepository>();

    // Register the MediatR request handlers
    services.RegisterRequestHandlers();

    services.AddControllers();
    services.AddSwaggerGen(c =>
    {
        c.SwaggerDoc("v1", new OpenApiInfo { Title = "MediatRApi", Version = "v1" });
    });
}

Let's now see how this has helped to decouple our code in the web application!

In the new controller, there is now only one dependency: MediatR. Each of the action methods will initialize a new request and send it off to MediatR to be handled by it's associated
request handler:

WithMediatRController.cs

[ApiController]
[Route("[controller]")]
public class WithMediatRController : Controller
{
    private readonly IMediator _mediator;

    public WithMediatRController(
        IMediator mediator) =>
        _mediator = mediator;

    [HttpGet("get-artist/{artistId:guid}")]
    public Task<Artist> GetArtist(Guid artistId) =>
        _mediator.Send(new GetArtistRequest { ArtistId = artistId });

    [HttpPost("create-album")]
    public Task<Guid> CreateAlbum(Album album) =>
        _mediator.Send(new CreateAlbumRequest { Album = album });

    [HttpPut("set-rating")]
    public void SetRating(SetRating setRating) =>
        _mediator.Send(new SetRatingRequest
        {
            SongId = setRating.SongId, Rating = setRating.Rating
        });
}

GitHub Repository

Thank you for reading this article! The full solution used in this guide is available at github.com/stevenmclintock/mediatr-demo.

Show Validation Error Messages for Reactive Forms in Angular

Steven McLintock — Sun, 11 Dec 2022 20:11:39 +0000

In Angular there are two different types of forms for a user to input data: reactive and template-driven. I personally prefer using reactive forms as they seem to follow the separation of concerns principle, where the core functionality is in the component and the presentation layer is stored in the template.

We can define a reactive form within a component and check if the form is valid, but if there's an error, how do we indicate this to the user in a manner they can understand and rectify accordingly?

In this example, I'll define a reactive form with one text field. We'll configure this field to have a few validation rules before the user can submit the form. These will be to set the field as required, its value to be of a minimum character length of 3 and have a maximum character length of 30.

The reactive form defined in the component:

this.formGroup = this.formBuilder.group({
    toDo: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(30)]]
});

Show the Field is Required Using the Label

Using data binding in Angular, we can dynamically change the label to indicate the field is required. This will at least let the user know that the field is not optional:

<label for="toDo">
    Add New To Do
    <span 
        class="text-danger" 
        *ngIf="formGroup.get('toDo').errors && 
            formGroup.get('toDo').hasError('required')"
    >*</span>
</label>

Show the Validation State Using the Field

We can also use data binding to apply the classes 'valid' or 'invalid' to the field to indicate if there is a validation error (or if the field is valid):

<input 
    id="toDo" 
    type="text" 
    class="form-control" 
    placeholder="What is it you want to do?"
    formControlName="toDo"
    [class.valid]="formGroup.get('toDo').valid && 
        (formGroup.get('toDo').dirty || formGroup.get('toDo').touched)"
    [class.invalid]="formGroup.get('toDo').invalid && 
        (formGroup.get('toDo').dirty || formGroup.get('toDo').touched)" />

Show Each of the Validation Error Messages

We'll need to clearly indicate to the user if a field is required, or if the user has not met the validation rules set for a minimum character length or exceeded a maximum character
length. You could also add to this to include other validation rules such as email addresses or forbidden names. Let's show each error message using data binding and HTML:

Required error message:

Minimum length error message:

Maximum length error message:

<div *ngIf="formGroup.get('toDo').invalid && 
        formGroup.get('toDo').errors && 
        (formGroup.get('toDo').dirty || formGroup.get('toDo').touched)">
    <small class="text-danger"
        *ngIf="formGroup.get('toDo').hasError('required')">
        This field is required.
    </small>
    <small class="text-danger"
        *ngIf="formGroup.get('toDo').hasError('minlength')">
        The minimum length for this field is {% raw %}{{formGroup.get('toDo').errors.minlength.requiredLength}}{% endraw %} characters.
    </small>
    <small class="text-danger"
        *ngIf="formGroup.get('toDo').hasError('maxlength')">
        The maximum length for this field is {% raw %}{{formGroup.get('toDo').errors.maxlength.requiredLength}}{% endraw %} characters.
    </small>
</div>

Disable the Submit Button

Finally, we can disable the submit button if the form is invalid:

<button class="btn btn-primary" [disabled]="formGroup.invalid">Add To Do</button>

Instead of duplicating this code for each field and for all forms, a better approach might be to abstract this into a separate component that can be reused across the codebase. However, this should hopefully be a good example of how to show validation error messages to the user in a reactive form.

My Journey to Becoming a Full Stack Developer

Steven McLintock — Wed, 07 Dec 2022 02:28:27 +0000

Do you remember the early 2000's when there was no Facebook, YouTube or iPhone? The technology landscape was very different at the time.

I was a teenager and the internet was a big part of my life. Napster, iPods and most of all, building websites. I couldn't get enough of it. I would spend hours in my bedroom, using a 56K dial-up modem to connect to the world-wide-web and learn programming languages to make a website of my favourite band, TV show or PlayStation game.

Without a blogging platform like WordPress to install, or popular front-end frameworks like jQuery or Bootstrap, it was every man or woman for themselves. HTML, CSS and JavaScript were the languages of the day and without communities like StackOverflow, it could be difficult for a developer.

You're Hired!

Fast forward to a few years later and I was studying for my final exams at Glasgow Caledonian University. I'd somehow made it through an undergraduate degree in Internet Software Development and was preparing for the real world.

It's not easy to secure that elusive first job when you have no experience in a professional capacity. Why would an employer hire you if there's another candidate with more experience? At least, that's what I thought at the time. But I had passion and lots of it, and I was about to find out that passion can go a long way.

With all the job applications I had submitted, I included a cover letter with screenshots of the websites I'd built over the years, in my bedroom with that 56K dial-up modem. I thought it would take forever to get a reply, but in no time at all, I got invited for an interview!

A local non-profit organization had replied and I was on my way to my first job interview. Suited and booted, I was nervous. I definitely had a lot still to learn. What I didn't realize at the time is you'll always be learning something new as a software developer. What you learn today won't necessarily be around tomorrow. Adobe Flash, anyone?

I can only speculate why they hired me. Was it my eagerness to keep learning? Was it my interest in their organization? Whatever the reason, I got the job!

Pick Your Poison

I was definitely not a "full stack developer" on day one, or year one, two or three. At least I didn't call myself one for a long time. For one thing, the term "full stack developer" wasn't popular at the time. But as JavaScript libraries (jQuery) and frameworks (Angular, React) became common place in the industry, and CSS libraries (Bootstrap, Foundation) replaced writing your stylesheets by hand, there became demand to be capable in both the front-end and back-end of an application.

Whoa, you mentioned "back-end" I hear you say? Absolutely! If we're talking about full stack development, we have to discuss the back-end. I was using PHP in the beginning, as all the "hip" companies at the time (Facebook, Tumblr, WordPress) were all adopting PHP as their language of choice, and Microsoft wasn't exactly the company it is today.

I feel like back-end development falls into two different categories, or at least it did back then. There was the Microsoft category, and the "everything else" category. I was an unabashed Apple fanboy at the time (cut me some slack, this was the era of peak Steve Jobs and the release of the iPhone), so I saw myself in the "everything else" category at the time. I much preferred using my MacBook Pro at home for working on open-source projects. However, at work I was being encouraged to pursue Microsoft and I wasn't quite sure what to do.

As Microsoft changed their leadership and became a heavyweight in cloud computing, in addition to the enhancements to .NET and their front-end languages (Razor, Blazor, TypeScript), the .NET stack gradually became my preference as I got older. These days I'm a Windows user and a Microsoft enthusiast, but with .NET Core and Visual Studio for Mac being released, not to mention Visual Studio Code, we could all easily use a Mac or a PC, using the language or framework that made the most sense for the current project we're working on.

Twenty years ago I was eager to learn it all, and today I feel like not much has changed. I still want to learn all the new front-end and back-end languages and frameworks that are released on an almost yearly basis, and that is what will always keep it interesting for me.

I would like to thank Ollie Randall of Randall Writing for the cartoons in this article.