Photo by Laura Ockel on Unsplash

In all my recent Angular projects I’m using shallow-render written by Brandon Domingue to help with unit tests. If you haven’t heard about it go and check it out, it is much easier than TestBed.

When you create a component using Angular CLI ng generate component command, it creates spec file which uses TestBed. It means that for every created component I have to manually change it to use shallow-render. And if a project has dozens or hundreds of components the amount wasted time on this manual work is huge.

To solve this problem I have created an npm package…


StackOverflow is an amazing resource, every developer is using it every day. Moreover, it can motivate to learn something new. I’ve recently found a question: Meaning of NgRx createAction method’s return type signature. It sparked my interest as I was using action creators for quite a while but was never eager to understand how they actually work.

Those who worked with NgRx before version 8 were used to create actions in the following way:


Typescript is a great language that allows Javascript developers be more productive by leveraging type safety. However when working with Jasmine tests you lose this benefit as in most cases you have to use type any.

I’m going to use Angular example, however the scenario is applicable for any other framework.

The problem

Let’s say we have a service:

To test this service with Jasmine you would usually write a setup code similar to this:

The first problem is on line 3: let http: any . …


I’m sure that many of you, who are reading this post, had the situation: you have a great sunny morning, birds are singing, you come to the office, pull the latest from the master and application is broken and that’s it — your morning is ruined 😡.

There is a great tool to eliminate this problem — husky. Husky makes adding git hooks as easy as it can be.

Hooks are programs you can place in a hooks directory to trigger actions at certain points in git’s execution. — from git documentation.

With husky you just need to provide a…


Decorators in the TypeScript is very powerful concept. They provide a way to apply Aspect Oriented Programming to your Angular application. They allow to extract cross-cutting concerns and apply them without modifying the existing code.

Source

Basically a decorator is just a function which allows to execute a piece of code before and/or after the target function. Netanel Basal has a very good article explaining the basics of the decorators. In this short post I’d like to show another example where decorators could be useful.

The use case. We had an existing REST API, that accepts dates as strings in the…


As my background is C#, there was something missing in TypeScript (or at least I didn’t know how to do) - extension methods.

Extension methods enable you to “add” methods to existing types without creating a new derived type, recompiling, or otherwise modifying the original type.

Let’s image you have an Angular application with many calls to api using HttpClient which uses RxJs and returns Observable. Most of the calls will have the same structure: you handle success and error responses in subscribe method:

this.httpClient.get<any>(‘path/to/api’)
.subscribe(
response => ... handle success,
err => // handle error
)

Wouldn’t it be…


Recently whilst working on a project, I came across a problem — how to implement the use of multiple check boxes in a form?

The requirements were the following:

  • should support reactive and template forms
  • selection can be controlled by code - select / deselect all, reset form
  • result should be an array of selected values

If you want to skip the explanation, you can play with the code straight away in stackblitz.

Idea - we should create a group component which holds ngModel or formControlName and then children components (checkboxes), which update the group component’s value. …

Andrei Mihalciuc

Full Stack developer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store