Angular and PWA, the life ahead of us

Image from Jeff Crost post on medium:

Progressive Web Applications (PWA) are getting more and more attractions by day. With recent move from DevKit team, adding service worker support to preview version of Safari, we can see the importance of the key role PWA’s play in today’s market.

With Angular version 5.0.0, the team introduced a new version of their service worker aka (ngsw) which has a ton of goodies from a fully functional service worker to full support for push notifications. In this post I will iterate through them and turn an existing application into a PWA.

The demo application I’ve prepared can be found on my GitHub repo here.


Angular reactive forms and custom validations

When using reactive forms in Angular we usually avoid template based validation like required, maxlength and so on. Instead we use the Validators in the @angular/forms like this:

Note: in the above code, fb is an instance of FormBuilder which is injected into the constructor.

However, sometimes we want to implement a custom logic for our validations. Scenarios like checking a property value based on another property or checking whether two entered email addresses are equal.


Users who have LIKED this post:

  • avatar

Setting up VSTS CI/CD for a SPA app using AngularCLI, ASPNetCore (Part 2)

In my previous post I showed you how to setup a build pipeline for a SPA application written in Angular using Angular CLI and ASP.Net Core as back-end. I promised back then to continue with the release as well, but have been pretty busy lately.

Now is the time to pay my debt and show you how you will get the release done to make it a proper continuous delivery right from when you commit the code to when it is deployed to production.

We will be using Azure Web Apps for our deployment purposes but it really doesn’t matter where you deploy it since there are many third party tools covering different providers like AWS.


How to use nested form groups using ReactiveForms in Angular

Full source code here.

Before I start, let’s see what does reactive mean.

When talking about reactive forms, it means that we are avoiding to use ngModel, required and so on. This means that instead of showing that Angular is taking care of the form for us, we can use the underlying APIs to do so. In a simpler term instead of using template driven model binding, we can construct our own form and the way they should be bound, validated and so on. For more information please refer to Angular documentation here.

Now if you are creating a form in Angular using Reactive Forms and you a complex object to bind to i.e. your form has multiple sections and each of them should be bound to a child object, then you can simply use FormControl on an input like this:


Using ASP.NET Core DI to inject objects into ActionFilterAttribute


Let’s assume you want to validate something before a request hits your ASP.NET Core controller’s action method. One of the possible solutions is to create an ActionFilterAttribute and use its OnActionExecutionAsync (in case you like to do it asynchronously) to do the checking. Now if you are depending on something like configuration or even another instance of a class it is going to be tricky.


CORS issues when using Azure AD in ASP.Net Core and Angular

Recently, I wrote a post about using Azure Active Directory (AD) as authentication mechanism for a single page application written in Angular. It also consumed ASP.NET Core 2.0 as API layer an we saw how to wire up the whole thing end to end.

In my approach I redirected user to Azure from client side, however, there are other ways you can follow in which the user is redirected from server to Azure login page. In such cases you might struggle with cross origin resource sharing aka CORS issues as it will be required for the application to behave properly.  (more…)