Coding Latte

How to Integrate Smart Tables With Angular

Shira Gray — Mon, 20 Jan 2020 12:33:24 +0300

The following post surely catches a bit surface of the major revamp which has been promised by AngularJS since its inception. With such technologies growing, the best is always yet to come! A lot seems to have changed under the hood in regards to tooling. For example, it offers seamless upgrading and adding new libraries to your developed apps.

Without wasting further time I would straight jump to the crux of the post; i.e. how to integrate and use ng2-smart-tables with Angular . But before that do you know what is ng2-smart-table? Of course, it’s a library featuring npm package and pre-defined components and directives mainly used for sorting, searching, filtering and displaying things exactly in the form of a table. So to begin with,

Prerequisites

Install and Setup Angular on your Workspace - Link.

Time to generate new project!

ng new smart-table-example

Before coming to any conclusion it is advisable to check whether everything is in sync or not. Run ng serve –open or you can also visit the URL localhost:4200.

Smart tables with Angular

Install rxjs- compat

One of the major cons faced when dealing with the Angular ecosystem is the compatibility issue. Many third party libraries are found incompatible whenever a new Angular version is released. And the same goes for Angular moreover depending on TypeScript 2.7 and RxJS version . Another reason for third party libraries not being compatible is they haven’t been updated. So in order to make things work with the latest version, it is advisable to use another third-party library in our app, called rxjs-compat.

npm i rxjs-compat --save

One additional Tip for you: In future you might find third party libraries which might or might not be compatible. For that rxjs-compat. is certainly not required. Being an AngularJS developer, you should check the documentation of the third-party library before integrating it with Angular.

Installing the ng2-smart-table library

Install it as a local dependency on the Angular project.

npm install –save

In the dictionary of Angular Application development, you will certainly find a global space to register a module called app.module.ts. All you require doing is open it and add the following:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { Ng2SmartTableModule } from 'ng2-smart-table'; // add
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
Ng2SmartTableModule // add
 ],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}

If no errors found here at this step; it surely means the Webpack has been succeeded in compiling with the app. Which also means it’s time to move forward.

Table Creation

Time to generate a component and name it table as it is created using the ng g c table code. The ng command won’t just create a default component but also updates app.module.ts at regular intervals. The new generated component will be found on inside src/app/. Check the code below.

import { Component } from '@angular/core';
// add the following
import { TableComponent } from './table/table.component';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'smart-table-example';
}

Back to the Backend

Here we are going to create a mock backend server, where installing json-server becomes easy from npm. This will also serve data as an API to the developed AngularJs Application.

npm install -g json-server

Also, create a directory called data and a new file named db.json. Try adding some mock data in JSON format. It will be easier to render.

{ "employees": [{
"id": 1,
"name": "Jason Bourne",
"employeeId": "us2323",
"city": "New York"
},
{
"id": 2,
"name": "Mary",
"employeeId": "us6432",
"city": "San Jose"
},
{
"id": 3,
"name": "Sameer",
"employeeId": "in2134",
"city": "Mumbai"
},
{
"id": 4,
"name": "Sam Hiddlestone",
"employeeId": "au9090",
"city": "Melbourne"
}]
}

As soon as you are done! A successful message will be prompted.

Instead of creating make the Table Smart

Now we have reached the point where the table is rendering as a static. In simple words, it cannot do any kind of sorting or searching as it does not have any feature or functionality. Making things more dynamic is what we aim here. We need to add some configuration.

Create an object inside table.component.ts and call it settings. This object contains columns that are displayed on the table.

import { Component, OnInit } from '@angular/core';
import { TableService } from './table.service';
import { Table } from './Table';
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styles: []
})
export class TableComponent implements OnInit {
employees: Table[];
// add this config
 settings = {
columns: {
id: {
title: 'ID'
},
name: {
title: 'Name'
},
city: {
title: 'City'
},
employeeId: {
title: 'Employee No.'
}
}
};
constructor(private tservice: TableService) {}
ngOnInit() {
this.tservice.getData().subscribe((data: Table[]) => {
this.employees = data;
});
}
}

Featuring all the fields coming from our service, it is certainly not necessary to have the column name identical with the original key. One can add or modify the name for a column using the title. In addition to this, what else do we require is source which gives reference to the actual data from our service to the ng2-smart-table directive. Finally, we have reached the last piece of puzzle by which we can create a dynamic table.

Lastly,

As an AngularJS developer, I would suggest you to try and play with it and explore as much functionalities as you can. Try noticing how it automatically add by default various functionalities to edit and update or delete a field as well add a search bar over every column.

Author Bio

Shira Gray is working as a Business Development Executive at Angular Development Company – eTatvaSoft.com,to know more information about the company. She writes about emerging technologies. Being a tech geek, she keeps a close watch over the industry focusing on the latest technology news and gadgets.

How to build a reusable Modal Overlay/Dialog Using Angular CDK

Maina Wycliffe — Wed, 20 Nov 2019 02:49:14 +0300

Today, I am going to show you how to create a reusable modal overlay/dialog using Angular CDK Overlay that can be reused inside our Angular project multiple times with ease. We are going to try and match the behavior and the functionality of Angular Material Dialog component, but using the UI Framework of our choice.

Your browser doesn't support HTML5 video. Here is a link to the video instead.

This is going to be the first of a few articles, focusing on ways you can utilize Angular CDK to implement common interaction patterns within your application.

Demo and Source Code

You can find the link to the demo here and the GitHub repo for this post here.

Prerequisites

Install Angular CLI and create a new Angular project – link.
Setup Bulma inside your Angular Project.
Install Angular CDK – npm i @angular/cdk or yarn add @angular/cdk

The article is divided into two sections:

The Basics - a Quick look at how to use Angular CDK Overlay
Building a Reusable Modal Overlay - A detailed guide into building a reusable modal overlay.

The Basics

Let us get the basics out of the way first. Assuming you have installed Angular CDK you will need to import OverlayModule into your app module.

import {OverlayModule} from '@angular/cdk/overlay';

And then, inject the Overlay service and ViewContainerRef into your component.

constructor(private overlay: Overlay, private viewContainerRef: ViewContainerRef) {}

To show a modal overlay, you need either a Template or an Angular Component holding the content you would like to show. Let’s look at how you can use both below:

Using a Template

Inside the template of our component, let’s define a new template and add our overlay content:

<ng-template #tpl>
  <div class="modal-card">
<header class="modal-card-head">
…
</header>
<section class="modal-card-body">
…
</section>
<footer class="modal-card-foot">
…
</footer>
</div>
</ng-template>

Then, add a method to show the overlay and it accepts an ng-template reference as the parameter.

openWithTemplate(tpl: TemplateRef<any>) {}

Then, Inside the above method, we are going to create an overlay. We will start by defining the configs of the overlay – OverlayConfig. In our case, we will just set the hasBackdrop and backdropClass properties. For backdropClass we are using modal-background a Bulma CSS Framework class. You can find all the Overlay Configurations you can add here.

const configs = new OverlayConfig({
hasBackdrop: true,
panelClass: ['modal', 'is-active'],
backdropClass: 'modal-background'
});

NB: For backdrop click to dismiss the modal overlay to work, you might need to disable pointer-events for your modal, for some CSS Frameworks like Bulma. This is because CDK Overlay doesn’t add them to DOM in the nested order of modal ➡ modal-background ➡ modal-content, but rather modal ➡ modal-content, while the backdrop is a separate div tag not nested under modal, but on a level above modal class div tag.

For Bulma CSS framework case, you can override the default behavior like this:

.modal {
pointer-events: none !important;
}
.modal-content {
pointer-events: all !important;
}

Then, let’s create an OverlayRef, by using the create method of the Overlay service and pass the configs we just created above:

const overlayRef = this.overlay.create(configs);

And then we can attach our template, using TemplatePortal, passing our template and ViewContainerRef which we injected into our component:

overlayRef.attach(new TemplatePortal(tpl, this.viewContainerRef));

Now, we can trigger the method with a click of a button:

<button (click)="openWithTemplate(tpl)" >
Show
</button>

Using a Component

The difference between the two is that we will be using ComponentPortal instead of TemplatePortal to attach the component to the OverlayRef.

this.overlayRef.attach(
new ComponentPortal(OverlayComponent, this.viewContainerRef)
);

NB: The component must be added to the list of entryComponents in your App Module.

You can close the overlay when the backdrop is clicked by subscribing to the backdropClick() and then calling the dispose method.

overlayRef.backdropClick().subscribe(() => overlayRef.dispose());

Building modal overlays as shown above works very well if you are building one or two of them, however, it does not really scale very well. Wouldn’t it be nice if you could build a re-usable modal overlay that you can then use across your Angular project or projects? Wouldn’t it also be nice if we could be able to pass data to and receive data from the modal?

Objective

A service to open the modal, than can be injected into any component
A way to subscribe to when the modal is closed and access the response.
Pass data to the modal
Pass data as a String, Template or Component.

Overlay Ref Class

We are going to start by extending the OverlayRef. We will create a custom OverlayRef, creatively named MyOverlayRef, which is going to accept the OverlayRef, content and the data to pass to our modal overlay. The content can be of type string, TemplateRef or Component.

// R = Response Data Type, T = Data passed to Modal Type
export class MyOverlayRef<R = any, T = any> {
…
constructor(public overlay: OverlayRef, public content: string | TemplateRef<any> | Type<any>, public data: T ) {
…
}
…
}

Then, Inside the MyOverlayRef class, we are going to add a BehaviorSubject property named afterClosed$ which we can subscribe to get data once the overlay is closed.

afterClosed$ = new Subject<OverlayCloseEvent<R>>();

The behavior subject is going to pass back an OverlayCloseEvent, which contains the data from modal and how the modal was closed. Feel free to modify this to cover your needs.

export interface OverlayCloseEvent<R> {
type: 'backdropClick' | 'close';
data: R;
}

Next, we need to add a private method to close the overlay. The method will dispose off the overlay, pass the OverlayCloseEvent back to the subscriber and complete the afterClosed$ Observable.

private _close(type: 'backdropClick' | 'close', data: R) {
this.overlay.dispose();
this.afterClosed$.next({
type,
data
});
this.afterClosed$.complete();
}

And then, we are going to add a second public close method. It will only accept data as a parameter and will call the private _close method, to close the modal.

close(data?: R) {
this._close('close', data);
}

And finally, we are going to subscribe to backdropClick and close the modal when clicked. We are adding this subscriber to the MyOverlayRef constructor.

overlay.backdropClick().subscribe(() => this._close('backdropClick', null));

Overlay Component

Next, we are going to add a special component that we will use to show our modal content. If it is a simple string, we will bind it to a div, while we can use either ngTemplateOutlet and ngComponentOutlet to load the template and component respectively.

Component Class

We are going to start by injecting an instance of our MyOverlayRef into the component.

constructor(private ref: MyOverlayRef) {}

And then, let’s define 3 more properties inside our component class:

contentType: 'template' | 'string' | 'component' = 'component';
content: string | TemplateRef<any> | Type<any>;
context;

Then, OnInit, we need to determine the content type and set the above properties appropriately.

ngOnInit() {
if (typeof this.content === 'string') {
this.contentType = 'string';
} else if (this.content instanceof TemplateRef) {
this.contentType = 'template';
this.context = {
close: this.ref.close.bind(this.ref)
};
} else {
this.contentType = 'component';
}
}

And finally, we are going to be adding a global close button, so let’s add a close method:

close() {
this.ref.close(null);
}

And finally, remember to add the Overlay component as an entryComponent in your app module.

Component Template

In the template, we are going to use ngSwitch to switch between content type and add a global close button for our modal.

<div class="modal-content">
<ng-container [ngSwitch]="contentType">
<ng-container *ngSwitchCase="'string'">
      <div class="box">
        <div [innerHTML]="content"></div>
</div>
</ng-container>
<ng-container *ngSwitchCase="'template'">
…
</ng-container>
<ng-container *ngSwitchCase="'component'">
…
</ng-container>
</ng-container>
</div>
<!-- You can also add a global close button -->
<button (click)="close()" class="modal-close is-large" aria-label="close"></button>

For template content type, we will use ngTemplateOutlet, passing the template, which is the content and then pass the context:

<ng-container *ngTemplateOutlet="content; context: context"></ng-container>

And while for component content type, we will use ngComponentOutlet, passing the Component, which is the content:

<ng-container *ngComponentOutlet="content"></ng-container>

The Overlay Service

Next, we are going to create an Overlay service, which we can inject into any component we want to use our modal overlay. Where we are going to inject Overlay Service and the Injector.

export class OverlayService {
constructor(private overlay: Overlay, private injector: Injector) {}
}

Then, add an open method, which will accept content and data. The data param, in this case, is the data you would like to pass to your modal.

open<R = any, T = any>(
content: string | TemplateRef<any> | Type<any>,data: T): MyOverlayRef<R> {
…
}

Inside the method, first, we need to create an OverlayRef object by using the Overlay create method. Feel free to customize the configs to suit your needs.

const configs = new OverlayConfig({
hasBackdrop: true,
panelClass: ['modal', 'is-active'],
backdropClass: 'modal-background'
});
const overlayRef = this.overlay.create(configs);

Then, let’s instantiate our MyOverlayRef Class passing the OverlayRef object we created above, then content and the data, both from the method parameters.

const myOverlayRef = new MyOverlayRef<R, T>(overlayRef, content, data);

Create an injector using PortalInjector, so that we can inject our custom MyOverlayRef object to the overlay component, we created above.

const injector = this.createInjector(myOverlayRef, this.injector);

And finally use ComponentPortal, to attach the OverlayComponent we created above and the newly created injector and return a MyOverlayRef object.

overlayRef.attach(new ComponentPortal(OverlayComponent, null, injector));
return myOverlayRef;

And here is the method for creating a custom injector using PortalInjector:

createInjector(ref: MyOverlayRef, inj: Injector) {
const injectorTokens = new WeakMap([[MyOverlayRef, ref]]);
return new PortalInjector(inj, injectorTokens);
}

And that’s it, we now have a re-usable modal overlay, that we can use anywhere inside our application.

Usage

First, inject the Overlay Service in the component where you would like to open a new modal overlay.

constructor(private overlayService: OverlayService) {}

Then, inside the method you would want to trigger the modal overlay, you just use the open method and pass the content and any data you want to pass to the modal overlay.

const ref = this.overlayService.open(content, null);
ref.afterClosed$.subscribe(res => {
console.log(res);
});

The content can be a simple string or a Template or a Component.

String

const ref = this.overlayService.open("Hello World", null);

Template

<ng-template #tpl let-close="close">
  <div class="modal-card">
<section class="modal-card-body">
A yes no dialog, using template
</section>
<footer class="modal-card-foot">
   <div class="buttons">
<button (click)="close('yes')" type="button" class="button is-success">Yes</button>
<button (click)="close('no')" type="button" class="button is-danger">No</button>
</div>
</footer>
</div>
</ng-template>

And a button to open the modal:

<button (click)="open(tpl)" class="button is-small is-primary">
Show
</button>

And then open the overlay with an open method:

open(content: TemplateRef<any>) {
const ref = this.overlayService.open(content, null);
ref.afterClosed$.subscribe(res => {
console.log(res);
});
}

Component

open() {
const ref = this.overlayService.open(YesNoDialogComponent, null);
ref.afterClosed$.subscribe(res => {
console.log(res);
});
}

You can also inject the MyOverlayRef inside the component to access data and the close method.

constructor(private ref: MyOverlayRef) {}

This allows you to pass data to the component and trigger the closing of the modal from within the component.

close(value: string) {
this.ref.close(value);
}

NB: Please remember to add the component as an entryComponent inside your App Module.

You can find all of the above code here and the demo here.

Additional Resources

Angular Newsletter Issue No #3 7th November 2019

Maina Wycliffe — Thu, 07 Nov 2019 00:19:54 +0300

This is my weekly newsletter for Angular and related news. Every week, I go through the web and find and curate the articles I find most interesting to share with you.

1. Transloco’s New Dev Tools Make i18n in Angular Easy as Pie

…

Translation is a tiresome and repetitive task. Each time we add new text, we need to create a new entry in the translation file, find the correct placement for it, etc. Moreover, when we delete existing keys, we need to remember to remove them from each translation file.

To make the process less burdensome, we’ve created two tools for the Transloco library, which will do the monotonous work for you. Let’s examine each one:

…

By Netanel Basal | Read Article

2. Use the new Angular Clipboard CDK to interact with the clipboard

The helium-barbell (v9.0.0-next.1) release brings us a new CDK clipboard module to interact with the clipboard. In this post, we’ll explore how to use the new CDK with some examples.

…

By Tim Deschryver | Read Article

3. The new Angular YouTube Player component!

There’s a cool new component in the Angular world 🌎! It makes it easier than ever before to add YouTube videos to your Angular applications. Install it today and try it out:

…

By Craig | Read Article

4. Upgrading with Angular Elements: Top Lessons Learned

In my last blog, How Capital One is Using Angular Elements to Upgrade from AngularJS to Angular, I gave a deep dive into Capital One’s massive Angular transformation of our customer servicing platform. Today, I want to build on that by sharing with you the top lessons we have learned and embraced during our migration journey. Some of these lessons are human focused, and others are centered around technical challenges we have faced.

If you haven’t already, check out our Ng-Conf 2019 talk on how we are using Angular elements!

…

By TJ Seaman | Read Article

5. Google Maps is now an Angular component

The new Angular Component pearl-lullaby (v9.0.0-rc.0) introduces the second official @angular/component component, a Google Maps component. In this post, we take a look at getting started with the Google Maps component.

…

By Tim Deschryver | Read Article

6. Debugging Memory Leaks in Angular

Building large applications entails writing lots of code, complex pages, long lists, and hundreds (if not more) of components. If you’ve worked at least once in a non-trivial web application, you may have found yourself battling a memory leak for hours and hours.

In this article, I want to introduce you to a number of situations where memory leaks are most likely to happen, and how you can deal with them thanks to the powerful Chrome DevTools.

…

By Giancarlo Buomprisco | Read Article

7. Exciting Times Ahead — Be Ready For Angular 9

The Angular 9 RC is out, what an exciting time to be Angular developer, no I am not saying this because of Angular 9 RC release. It’s because Ivy is here, Ivy is now the default rendering engine in Angular.

…

By Santosh Yadav | Read Article

8. Why do we have Dependency Injection in web development

Dependency Injection (DI) software design pattern has long been part of native client and server-side applications that use OOP languages. In essence it’s a technique for achieving Inversion of Control (IoC) between classes and their dependencies. With the rise of enterprise focused front-end frameworks like Angular and Ember, many web developers have become familiar with the pattern and mechanism of DI container.

…

By Max Koretskyi | Read Article

9. Announcing TypeScript 3.7

We’re thrilled to announce the release of TypeScript 3.7, a release packed with awesome new language, compiler, and tooling features.

…

By Daniel | Read Article

10. 3 easy ways to boost your web application performance

When building a web application, there’s something you absolutely need to take account: performance. Your app may be greatly designed or have some killer features, nobody will use it if it’s not performant. Users are not patient. But how can one make an app more performant? Well, the less your browser has stuff to do, the faster it will be, right? Then, a great strategy to boost your app performance is to give the browser less work, that is to say, reduce the amount of stuff to load. There are easy ways to do so and we’ll take a look at three of them today.

…

By Thomas Lombart | Read Article

11. Restricting Notification Permission Prompts in Firefox

In April we announced our intent to reduce the amount of annoying permission prompts for receiving desktop notifications that our users are seeing on a daily basis. To that effect, we ran a series of studies and experiments around restricting these prompts.

Based on these studies, we will require user interaction on all notification permission prompts, starting in Firefox 72. That is, before a site can ask for notification permission, the user will have to perform a tap, click, or press a key.

In this blog post I will give a detailed overview of the study results and further outline our plans for the future.

…

By Mozilla | Read Article

12. Getting your sites ready for the new Microsoft Edge

This morning, we released Microsoft Edge Beta version 79, which is the final Beta before the new Microsoft Edge is generally available, also known as the “Release Candidate.” On January 15th, we expect to release the “Stable” channel, at which point Microsoft Edge will be generally available to download on Windows and macOS.

The new Microsoft Edge is built on the Chromium engine, providing best in class compatibility with extensions and web sites, with great support for the latest rendering capabilities, modern web applications, and powerful developer tools across all supported platforms.

…

By Kyle Pflug and John Jansen | Read Article

Weekly Angular Newsletter 13th 21st October 2019

Maina Wycliffe — Mon, 21 Oct 2019 19:16:56 +0300

First, I would like to apologize for being late in this week’s newsletter, I was in GDG Devfest Nairobi 2019 over the weekend, and arrived back at home yesterday at Night. I hope to write more about that later. This is my second weekly newsletter on Angular, which starts from the 13th to 21st (today) of October 2019.

Here are some of the most interesting articles I came across over the course of the week.

1. The Angular Team @ AngularConnect 2019 by Stephen Fluin

It was our pleasure to attend AngularConnect again this year and to talk to hundreds of amazing engineers.

This year the team focused on sharing insights and opening the curtain into some of the internals of how Angular works and the challenges we are taking on as a team.

2. Hack for Good By Sebastian Witalec

The Angular and NativeScript teams teamed up last month to organise the first ng-ns Hack For Good — an online hackathon with prizes, where all participants were asked to build mobile apps with NativeScript Angular for NGOs and good causes.

The rules were quite simple: starting from Thursday the 12th of September, participants — working alone or in teams of up to 4 people — had 96 hours to build a Native Mobile App — using NativeScript and Angular.

…

Read Article.

3. Testing Asynchronous Code in Angular Using FakeAsync by Netanel Basal

…

fakeAsync is a special zone that lets us test asynchronous code in a synchronous way. Unlike the original zone that performs some work and delegates the task to the browser or Node.js, fakeAsync buffers each task internally, exposes an API that lets us decide when the task should be executed.

In this article, we’ll learn how we can use it to make async tests predictable, and how it works under the hood. To make the code cleaner and easier to read, in the following examples, I’ll use Spectator. It’ll work in the same way as when using the native testing API directly.

…

Read Article.

4. Angular & CSS Grid: Dynamic Grid Properties by Erxk Verduin

Article Goal: Investigate one way to dynamically modify CSS Grid Properties using Angular’s @HostBinding Decorator.

Article Topics:

Use CSS-Grid with Angular Components by leveraging the :host selector
How to adjust CSS Grid Properties such as column-template-rows and gap with TypeScript dynamically.
Angular’s DOM Sanitizer, why we have to bypass security and some guidelines we should follow when doing so.

Read Article.

5. From AngularJS to Angular : a 2.5 years migration journey by Aurélia Rochat

When I realized I spent 2.5 years migrating an AngularJS application to Angular (among other things), I thought it would be worth telling the story.

The aim of this text is not to present in detail the technical challenges we met nor the solutions we chose, but to explain the journey we undertook while replacing every single line of code in our application codebase.

My idea is to share the mistakes we made, the pitfalls we fell into, and the advice I can give to anyone who is about to begin such endeavor.

To give you an idea of the application size, our github repo counted

118'030 lines of code

1'706 files

in the application src/app folder (typescript, html and scss files included) rightafter the migration was completed.

…

Read Article.

6. Wrapping CommonJS library in Angular 8 directive on the example of mark.js by Alexander Poshtaruk

…

Time to time on my daily tasks I have to implement some functionality that was already implemented by someone previously in a neat vanillaJS library, but… no Angular version or even ES6 module of it is available to be able to easily grab it into your Angular 8 application.

Yes, you can attach this lib in index.html with script tag but from my point of view, it hardens maintainability. Also, you should do the same for another Angular project where you might use it.

Much better for is create Angular wrapper directive (or component) and publish it as npm package so everyone (and you of course:) can easily re-use it in another project.

…

Read Article.

7. RxJS Subjects in Depth by Giancarlo Buomprisco

In this article, I want to explore the topic of RxJS’s implementation of Subjects, a utility that is increasingly getting awareness and love from the community.

In the past, I have used Subjects in a variety of ways, but sometimes not fully understanding what they are internally and what are the main differences with Observables.

Read Article.

8. Multiple HTTP Requests in Angular by Kevin

RxJS can get confusing sometimes and it may not be obvious at first how to do certain things. One of these things may be how to do multiple HTTP requests the right way - but gladly it’s not too complicated.

There might be two different cases for executing multiple requests; either one by another (sequentially) or simultaneously (parallel).

Read Article.

9. Exploring web APIs Observers — real life examples explained! By Liron Hazan

If you enjoys diving into mdn there’s a chance you recognized few web APIs which ends with the “Observer” suffix.

Those observers are relatively new web APIs (besides the mutationObserver), some of them aren’t supported by all browsers, generally used in observing a certain state of a target element/s and act when detecting that state (by running callback), some came to resolve web traditional ways of knowing when a change occurred (e.g. change of an element/tree, visibility of an element in the viewport etc..) which could be expensive due to calculations who effect performance ( e.g. by triggering reflow/repaint).

…

Read Article.

Angular Weekly Newsletter 1st to 12th October 2019

Maina Wycliffe — Sat, 12 Oct 2019 20:58:42 +0300

I am excited to announce my new Weekly Newsletter on Angular (and Related News of course). I am going to be sharing interesting articles that I come across every week. This being the first one, I thought I give myself some latitude and start at the beginning of this month.

1. Understanding RxJS Multicast Operators by Netanel Basal

RxJS multicast operators, better known as sharing operators, are probably the most complicated topic to understand in the jungle that is RxJS. In this article, I’ll try to clarify the subject by looking at it in a different way.

The key to really comprehend them is to understand the mechanism behind them, and the problem which they solve.

…

Read Article

2. 10 Things Every Angular Developer Should Know About Zone.js By Matthias Junker

Every developer should know the basics about Zone.js

Read Article

3. Using Angular CLI Schematics by Chris Engelsma

…

Angular Schematics were introduced by the Angular team in 2018, and it provides an API to generate and manage files in your Angular project, as well as providing any required dependencies. Think of it like a templating tool.

In this article, I will show you how you can leverage the built-in schematics to streamline your Angular development.

…

Read Article

4. Speed up your App with Web Workers by Kent C. Dodds

…

You know how you can have multiple tabs open in your browser? Each one of those tabs is running the JavaScript for that page in its own thread. So just because JavaScript is single-threaded, doesn’t mean the browser can’t spin up multiple threads to run different JavaScript files.

Web Workers are a browser standard that enables you to do just that! And you can even communicate between those different threads (with some limitations, which we won’t get into in this post).

…

Read Article

5. Angular Cross Component Communication by Mehmet Cüneyt Dalan

It is very common need to interact with the other component while developing any kind of frameworks or libraries. In angular there are ways to do it.

…

Read Article

6. Angular Forms Several Ways: Reactive, Nested, Across Routes by Jennifer Wadella

Dealing with forms is rarely simple anymore. Many SaaS products offer highly customizable setups managed by complex and dynamic forms. Knowing how to use Angulars ControlContainer will give you more control, heh, over managing your forms.

…

Read Article

7. Focus First Invalid Input with Angular Forms by Cory Rylan

When dealing with required inputs on a form sometimes the user can miss

a required field. When this happens, it can be confusing for users what needs to be resolved to continue in the form. With Angular Forms, we can help the user by focusing the first invalid input when they submit the form.

…

Read Article

That’s it for this issue, see you next week.

Implement Infinite Scrolling in a ListView - Flutter

Maina Wycliffe — Thu, 03 Oct 2019 22:00:23 +0300

Infinite scrolling is a technique where loading of content is done continuously as the user scrolls down, without any action from the user. This has popularized by social media sites and apps such as Twitter, where Twitter loads more tweets as you scroll down. This is a form of pagination but requires no user input to load the next page but instead watches scroll position. When they get close to the end, the next bunch of tweets gets loaded, as shown below:

Prerequisite

Flutter Installation and Setup – Link.

Creating a ListView

We are going to start by creating a ListView to display GitHub Repositories. We will use the GraphQL package for flutter and will load then in bunches of 20. We are also going to display a loading animation when adding fetching new GitHub repositories.

ListView(
children: <Widget>[
for (var repository in repositories)
// .. list of widgets
 if (result.loading)
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircularProgressIndicator(),
],
),
],
),

Use ScrollController to Detect Scroll Position

Next, we need to determine when to load more GitHub Repositories, i.e. when we are at or near the bottom of the list view. To achieve this, we are going to use ScrollController – Link. We are going to listen to ScrollController, which will let us know whenever we scroll. We can then check if we are at the end or near the end of ListView, and in that case, we load more Repositories.

We will start by declaring a new widget property, named _scrollController.

class Widget extends StatelessWidget {
// ...

ScrollController _scrollController = new ScrollController();
@override
Widget build(BuildContext context) {
// ...
 }
}

Then, we need to attach our ScrollController to our ListView above.

ListView(
controller: _scrollController,
children: <Widget>[
// ... widgets
 ],
),

And finally, we need to listen to ScrollController and check where the user is at scrolling.

_scrollController
..addListener(() {
if (_scrollController.position.pixels ==
_scrollController.position.maxScrollExtent) {
// ... call method to load more repositories
 }
});

From the above code, we are waiting until the scroll position is at the very end. This might not be convenient for you and you might want to trigger the method to fetch more items earlier, let’s say at 90%.

_scrollController
..addListener(() {
var triggerFetchMoreSize =
0.9 * _scrollController.position.maxScrollExtent;
if (_scrollController.position.pixels >
triggerFetchMoreSize) {
// call fetch more method here
 }
});

Final Thoughts

This is a simple way to implement infinite scrolling inside a ListView in flutter. You can find the above demo in my GitHub account here.

Additional Resource

GraphQL Package for Flutter – Link.
ListView API Reference – Link.
ScrollController API Reference – Link.
GitHub GraphQL Explorer – Link.

Handling Requesting for Permissions Like a Pro in Flutter

Maina Wycliffe — Sat, 14 Sep 2019 17:19:25 +0300

In this lesson, we are going to look at how to request and check permissions on Android and IOS in Flutter.

Package(s)

Permission Handler (permission_handler)

Installation

The process of installing a flutter package is quite simple, just open the pubspec file and add the package into your dependency bloc section.

dependencies:
permission_handler:

TIP: You can use caret versioning to restrict the package version to a specific major version. For instance, permission_handler: ^3.0.0 restricts it to version 3, but you will get both minor updates and patches. You can learn more about how dart pub package manager works here if you are interested.

Permissions

First, we need to determine which permissions we need, because your app needs to publicly declare the permissions it needs. Some less-sensitive permissions such as the internet, etc. are granted automatically. While other more sensitive permissions, think of Location, Contacts, etc. require user authorization before your app can use them.

iOS permissions

In iOS, this done by adding the permissions to Information Property List File i.e. info.plist, with the Permission you need being the Key, accompanied by the reason why your app needs to use the feature.

<key>NSPhotoLibraryUsageDescription</key>
<string>This app requires to save your images user gallery</string>

In Flutters’ case, the info.plist in the iOS/Runner directory at the root of your project. You can learn more about the info.plist here.

You can find the complete list of permissions here and guidelines for asking permission on iOS here.

Android permissions

In Android, you can achieve the same by adding the <uses-permission> tag to the android manifest, this in the android/src/main/AndroidManifest.xml directory.

<manifest ...>
<uses-permission android:name="android.permission.SEND_SMS"/>
<application ...>
...
</application>
</manifest>

You can learn more about permission on Android here and the best practices here.

Requesting for Permission

To request permission, first you need to import the package:

import 'package:permission_handler/permission_handler.dart';

And then, let say you want to request contact permission, you can do it like this. You pass a list of permissions you are requesting for, which allows you to ask for multiple permissions you need at once.

final PermissionHandler _permissionHandler = PermissionHandler();
var result = await _permissionHandler.requestPermissions([PermissionGroup.contacts]);

And finally, you can inspect the result to see if the user granted permission or not. The results object is an array of PermissionStatus. The key of the array is the permission you were asking.

The possible permission statuses are:

Status	Why
Granted	Your app has been given permission to use the feature in question
Denied	Your app has been given permission to use the feature in question
Disabled	Feature in question is disabled i.e. when the Location feature is disabled.
Restricted (iOS only)	OS has restricted access to a specific feature due to something like parental controls.
Unknown	Unknown state of permissions.

For instance, in our example above, we can check if permission to access contacts was granted like this:

if (result[PermissionGroup.contacts] == PermissionStatus.granted) {
// permission was granted
}

You can also use a switch statement to react to the results of your request.

switch (result[PermissionGroup.contacts]) {
case PermissionStatus.granted:
// do something
 break;
case PermissionStatus.denied:
// do something
 break;
case PermissionStatus.disabled:
// do something
 break;
case PermissionStatus.restricted:
// do something
 break;
case PermissionStatus. Unknown:
// do something
 break;
default:
}

Checking if your App has been Given Permission

It is important that your app can check if it has permission to access certain features. This allows your app to decide based on if the user has granted permission or not. On top of that, it can help you determine if a feature is available or disabled on the users’ device.

You can check for permission by using the checkPermissionStatus function, which accepts the Permission as a parameter.

final PermissionHandler _permissionHandler = PermissionHandler();
var permissionStatus = await _permissionHandler.checkPermissionStatus(PermissionGroup.location);

This returns a PermissionStatus class – we saw it above – which details the status of the permission.

switch (permissionStatus) {
case PermissionStatus.granted:
// do something
 break;
case PermissionStatus.denied:
// do something
 break;
case PermissionStatus.disabled:
// do something
 break;
case PermissionStatus.restricted:
// do something
 break;
case PermissionStatus.unknown:
// do something
 break;
default:
}

Tip

Some permissions such as contacts, calendar, microphone, location, etc. are common across iOS and Android. On the other hand, there are some permissions that either do not match up on both OSs. While others are just on one OS, i.e. storage, SMS, phone, etc. are only on android. You might want to determine which platform it is before requesting permission from the user.

Take a camera app, for instance, if you wanted photos to appear in the gallery, on iOS, you need photos permission while in android you need external storage permission.

var permission = Platform.isAndroid ? PermissionGroup.storage : PermissionGroup.photos;

And then, you can check if the user has granted your app permission:

await _permissionHandler.checkPermissionStatus(permission);

Or request for permission:

await _permissionHandler.requestPermissions([permission]);

Resources

Requesting for Permission on IOS – Link.
Requesting for Permission on Android – Link.
Permission Best Practices on Android – Link.
About Information Property List Files – Link.
Android App Manifest – Link.

Lazy Loading Modules & Preloading Strategy in Angular 8

Maina Wycliffe — Sat, 31 Aug 2019 04:20:00 +0300

In this lesson, we are going to cover:

Lazy Loading of Feature Modules
And Creating Preloading Strategy for Lazy-Loaded Modules

Prerequisite

Install Angular CLI and Create a new Angular Application

Lazy Loading Feature Modules

To use lazy loading, first, you need to create some feature modules. Feature modules are NgModules created for the purpose of code organization. Feature modules allow you to separate code for a feature/functionality from the rest of your app. Components, Pipes, Directives, etc. inside a feature module are isolated from the rest of your app and are only accessible inside the feature module.

To create feature modules, we have two option – a manual approach and automated approach.

Manual Approach

In this approach, we are going to do everything ourselves. First, we are going to use Angular CLI command ng generate module to generate a feature module. Please note, for the purpose of lazy loading, our module needs to have routing enabled. We can do this by using the --routing flag, as shown below:

ng generate module lazyloadedmodule1 --routing

The above command is going to create a Lazymodule1Module and Lazymodule1RoutingModule. Where the first is the NgModule and the second is the routing module where routes for our feature module will live.

Secondly, we will need some components or directives or pipes, etc. for our feature module. The simplest approach is to put components/directives/pipes inside the same directory as our feature module or its sub-directories. This way, they will be registered under our feature module. You can also use the --module flag if you want your feature module and its related assets to live in separate directories.

And finally, we need to add the feature module inside our app router module, as shown below:

{
path: 'lazy-module-1',
loadChildren: () =>
import('./lazymodule1/lazymodule1.module').then(m => m.Lazymodule1Module)
}

Automated Approach

As of Angular 8, you can generate a feature module with routing enabled, a default component and add as a lazy loaded route to the router.

ng generate module lazymodulename --module app --route lazy-module-route

The above command must have the following flags:

--module flag (Required) – The module where to register the route for the app.
--route flag (Required) - The path for your lazy module route.

If any of the above flags are missing, it will fail.

NB: You can use the canLoad guard to prevent feature module from loading if the user is not authorized to access a route. You can use canLoad guard alongside canActivate and canActivateChild guards which prevent unauthorized requests.

Preloading Strategy for Lazy-Loaded Modules

A preload strategy creates rules that determine which modules to preload. So, if you have multiple lazy-loaded modules, a preloading strategy would determine which modules to preload and when to preload them.

Angular supplies two preloading strategies out of the box:

NoPreloading - No preloading (default)
PreloadAllModules - Preload of all lazy-loaded modules.

No Preloading – Default preloading strategy

@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: NoPreloading })
],
exports: [RouterModule]
})
export class AppRoutingModule {}

Preloading All Modules

@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})

Creating a Custom Preload Strategy

The first thing we need to do is to determine the formula/strategy to use to determine which lazy-loaded modules to preload. For instance, we can add a preload flag to the routes you want to preload and then check for the flag when determining whether to preload the lazy-loaded module:

{
path: 'module-8',
loadChildren: () => import('./lazymodule8/lazymodule8.module').then(m => m.Lazymodule8Module),
data: { preload: true } // preload flag
}

And then we are going to create a service that implements PreloadingStrategy interface. To implement the interface, we are going to add a preload function. The preload function accepts two arguments – a route and a loader function:

The route is the route to consider for preloading.
And the loader function loads the lazy-loaded module asynchronously when called.

Inside the preload function, we are going to check If the preload flag is set to true, and then return the loader function else we return a null observable.

export class MyPreloadingStrategyService implements PreloadingStrategy {
preload(route: Route, load: () => Observable<any>): Observable<any> {
if (route.data && route.data['preload']) {
return load();
} else {
return of(null);
}
}
}

And finally, we need to set the preload service we created above as the preloading strategy.

@NgModule({
imports: [
RouterModule.forRoot(routes, {
preloadingStrategy: MyPreloadingStrategyService // our preloading service here
 })
],
exports: [RouterModule]
})
export class AppRoutingModule {}

Preload Strategy Demo

The following demo uses the preload strategy above. It has 8 routes, where only even-numbered routes are preloaded. After initially loading the application, the app is taken to offline mode and you will notice only preloaded routes load while the others fail due to lack of network.

Your browser doesn't support HTML5 video. Here is a link to the video instead.

TIPS

You can use ngx-quiklink library to preload all lazy-loaded modules associated with visible links on the screen. You can learn more here.
Another useful library is guess.js which uses predictive ML to determine which resources to preload. You can find the Angular guide for Guess.js here.

I Migrated From WordPress to Hugo

Maina Wycliffe — Sat, 24 Aug 2019 06:21:40 +0300

This article is a few months too late - around 6 months - but as they say, better late than never. A couple of years ago, I started my blog under a different name - theinfogrid.com - initially, it was meant to be a general tech blog, but slowly I found my niche. I started with one Angular article and when the reception was good, I stuck with it.

About the Old Blog

I build it using WordPress, with a free theme. It cost me around $20 per year, with most of the cost going to the domain name. The cost of shared hosting was about $5. That’s not a lot of money, but If you happen to be fresh out of college and jobless, it’s not little either.

In a few months, the blog had outgrown my cheap shared hosting plan as I was getting some decent traffic. This led me to move to a Virtual Private Server (VPS) – AWS LightSail. I started out with the $5 plan, and soon that also wasn’t enough and upgraded to the $10 plan.

This worked well for a brief period, but at least once a week, my website would go offline randomly. This was despite using Cloudflare proxy to reduce traffic to my blogs’ servers and did a very good job. When the site went offline, I had to shut down my LightSail instance, then start it up manually. The problem would then disappear for another week or so. It was common for me to wake up in the morning to find that my blog was down for quite some time.

Finding an Alternative to WordPress

The way forward was to upgrade to an even larger plan. And while this alleviated the problem, the cost of running the blog was piling up. For someone without a paying day job - I work for a start-up – keeping the costs down is essential.

I started to look for an alternative solution. I considered a few solutions including using WordPress as a backend only, with Angular as the frontend. To keep the costs low, I would use a CDN – CloudFront – to aggressively cache API calls, because I only posted about 3 times a week. For a time, I also toyed around with the idea of migrating to Medium or a similar site.

I was strongly considering the Angular + WordPress solution until I came across Static Site Generators (SSGs). This solution was mainly inspired by fireship.io, when Jeff Delaney, decided to start a new site and he open-sourced the code. While inspecting the code, I came across Hugo and did some research.

I compared different Static Site Generators and finally settled on Hugo. It had glowing reviews from people who used it and loved the fact that it was built using Go – sentiments, I guess. And I started working on my new blog.

My New Blog

I quickly learned how to use Hugo and I was able to quickly build my own theme for my blog. This is because, for the themes I liked, I had seen a few other blogs using them. Funny enough, I didn’t have the same problem with WordPress. But I am guessing that has more to do with my lack of interest in building WordPress Themes. For some reason, I never grew into it despite working with PHP for years.

Back to my blog, within a matter of weeks, I had a new blog. I rebranded it from theinfogrid.com to codinglatte.com and launched it, with the least amount of fanfare possible. I just happen to be poor at this Social Media thing.

I was able to migrate successfully while maintaining Google Search ranks that I had earned with my previous blog. In fact, traffic from Google Search increased and almost doubled. Google Search accounts for most of the traffic I get on my blog.

The blog – this one – is currently hosted on Firebase, and the cost of running it is very low. Firebase has a very good free plan, and you only get charged when you go over it. Since I always do, the cost comes to around $1 a month. I am working on improvements over the next few weeks on my blog to improve reader experience and provide more value to my readers.

WordPress comes with a decent built-in comment system. It has very good spam detection, which I really needed as only 1% of the comments I received were not spam. There are several descent comment systems out there, but they can be quite costly. I found this quite challenging.

I finally settled on utterances widget which is a comment Widget powered GitHub issues. In a nutshell, you create a GitHub repository for your blog comments and each article/post gets an issue on the repository. Then users can comment on the issue. Utterances handles this automatically for you, you just need to point it to the correct repository.

Drawbacks

It is not all roses though, as, with any solution, Hugo is not perfect. There are a lot of things I really do miss on WordPress. The first one has to do with the WordPress plugins ecosystem, which has a huge number of decent plugins to help you automate tasks and add functionality. On the other hand, Hugo and I am guessing most SSGs, you need to do it manually for tasks and build the functionality you need yourself. For instance, inserting ads into content or setting up redirects after changing the path to posts.

Another challenge has to do with posts statistics. With WordPress, if you want to add the most popular posts section, it is easy. On the other hand, with Hugo, you can’t, at least not directly. You would need to build a data API that pulls the data from some analytics service and exposes it to Hugo during build time. You can also use JavaScript to pull the data dynamically.

Another challenge comes up when working with clients. With WordPress, all you need is to show them how to update their content. Once they update the content, the content will be reflected on the site automatically. Hugo on the other hand, if you want a content update to be reflected, you need to rebuild and deploy. For someone like me, this is easy, for a client not so much. There are solutions to automate the process such as using Netlify and a Git backend. This involves setting up a build and deployment pipeline, but as you can tell, it is not as straight forward as WordPress.

Don’t get me wrong, I enjoy working with Hugo, but these are some of the drawbacks of working with it – and most SSGs out there. I am just pointing out some of the drawbacks to consider before jumping get started. For me, the benefits simply outweigh the drawbacks.

Resetting Firebase Auth Passwords in Angular (Email Based Accounts)

Maina Wycliffe — Wed, 21 Aug 2019 12:08:55 +0300

In this post, we are going to cover the following:

In Firebase Auth, we will customize:
- Password Reset Email Content/Message
- Add a Custom Domain for use by email address
- And Password Reset/Email Verification URL
In Angular:
- Send Password Reset Request Emails
- Confirm Password Reset Code and Set New Password
- Confirm Email Address

Prerequisite

A Firebase Project – How to create a new Firebase Project.
Create a new Angular App – How to Install and Create a new Angular App.
Install and Setup @angular/fire (AngularFire2) – How to Install and Setup Firebase in Angular.

Firebase Auth

Enable Email/Password Verification

First, we are going to enable email password authentication.

In your Firebase project home page, go to Authentication, on the side nav under Develop menu item. And then, select the sign-in method tab.
And then, under sign-in providers, under the Email/Password provider, hover to reveal the edit icon.
And finally, click toggle enable switch and save the changes.

Customize Email Address Domain

Next, let’s customize the email domain Firebase uses to send password reset requests and send user email verification requests to our users.

Under authentication, select the Templates tab.
Then, under Email address Verification, click on the edit icon next to the from email address.
And then, click on the customize domain link.
After that, you will be prompted for the domain name, enter the name and click next.
Here, you will be prompted to verify your domain name. This is done by adding the DNS records provided by firebase on the verification window to your domains DNS records. This process varies for different domain registrars but it’s also straightforward.
Once you have added the DNS records, click on the verify button. This can take time to verify the records – up to 48 hours on rare occasions – so don’t panic. Once the verification is done, all email sent by Firebase auth will use your domain name.

Customize the Password Reset Action URL

Next, let’s customize the password reset URL. By default, Firebase provides a preset URL with a generic UI that handles password resets. We are going to change this so that we can point it to our angular app which will handle confirmation and setting of the new password. This will be configured under the Templates Tab in Firebase Authentication.

On the sidebar, select Password Reset and scroll to the bottom.
Click on the Customize Action URL link, below the Action URL Text Field and Just Above the Save Button.
A modal window titled Action URL will pop up, prompting you to enter a Custom Action URL. Enter a Custom Action URL of your choice – something like http://localhost:4200/auth/email/action and save.

NB: Keep in mind that both Password Reset, Email address change and Verification will share the same Action URL. A query parameter mode, alongside the oobCode parameter is appended to the action URL. The mode parameter holds the action type the user is performing i.e. password reset etc.

Customize Password Reset Message

This is not entirely necessary, but you might want to have a custom message for your app’s users. From the same page as above, you should see the message field, you can customize that by using HTML. Use the following placeholder strings, to inject dynamic data into the template.

%DISPLAY_NAME% - The recipient’s display name.
%APP_NAME% - The name of your app. You can set this value by editing the Public-facing name field on the Settings page.
%LINK% - The URL that the recipient must visit to complete the account management task. See Customize the action link URL.
%EMAIL% - The recipient’s email address.
%NEW_EMAIL% - The new email address to set as the recipient’s primary address. Used only in the Email Address Change template.

NB: You can also customize the Subject of the email too on the same page.

Angular Application

Assuming you already have created an Angular App and installed @angular/fire – check the prerequisite section above if you haven’t – let’s dive into sending a password reset request.

Sending Password Resets Requests Component

This component will collect user email addresses and request Firebase to send a password request if the email exists. Firebase authentication servers are going to determine is an Email exists or not.

We are going to start by creating a Reactive Form, with one FormControl. First, we are going to inject both FormBuilder and AngularFireAuth services into our component.

constructor(private afAuth: AngularFireAuth, private fb: FormBuilder) {}

And then, we are going to declare frmResetPassword property of type FormGroup, then set it to a new instance of FormGroup, with one form field named email. The form control is going to have validators for both required and obviously email.

frmPasswordReset: FormGroup = this.fb.group({
email: [null, [Validators.required, Validators.email]]
});

Next, let’s add a method to be called on from submit, which is going to send a request to Firebase to Send A Password Reset Request to the provided email if it exists.

const email = this.frmPasswordReset.controls['email'].value;
this.afAuth.auth.sendPasswordResetEmail(email).then(
() => {
// success, show some message
 },
err => {
// handle errors
 }
);

When the above process completes successfully, an email address is sent to the user with the password reset link.

To handle errors, please check for a code property in the returned error. You can find a list of error codes for Firebase Auth here. I have attached a simple Firebase error parser at the bottom of this post.

And finally, here is the template for this component:

<form [formGroup]="frmPasswordReset" (submit)="sendPasswordResetRequest()">
  <div class="field has-text-left">
<label class="label">Email Address: </label>
    <div class="control has-icons-left">
<input formControlName="email" class="input is-focused" type="email">
<span class="icon is-small is-left">
<fa-icon [icon]="faEnvelope"></fa-icon>
</span>
</div>
    <div class="has-text-danger">
Email is required!
</div>
    <div class="has-text-danger" >
A valid email is required!
</div>
</div>
  <div class="field">
<button [disabled]="frmPasswordReset.invalid" class="button is-block is-primary has-text-white is-fullwidth ">
<fa-icon [icon]="faSigninIcon"></fa-icon>
Send Request
</button>
</div>
</form>

Confirming Email and Setting a New Password for the User

The password reset link and email confirmation/verification link are the same, with the only variants being oobCode and mode. The mode will determine whether a user is resetting a password or confirming their email address. It can either be resetPassword or verifyEmail.

This means that these two actions are going to be redirected to the same route in our Angular Application. As such, we are going to need 3 components – One for switching between the modes, one for resetting password and another for confirming/verifying email addresses.

Switching Between Reset Password and Verify Email Address

Let’s start with the Component for switching between Reset Password and Confirm Email Address. We will start by injecting ActivatedRoute service into our Component.

constructor(private activatedActivated: ActivatedRoute) {}

And then, let’s declare a property named mode and assign it the value of Query Parameter mode from the URL.

mode = this.activatedActivated.snapshot.queryParams['mode'];

And finally, in our template, we can use the value of the mode property to either display the Reset Password Component or the Verify Email Address Component using ng-switch.

<ng-container [ngSwitch]="action">
<!-- password reset -->
<ng-container *ngSwitchCase="'resetPassword'">
<app-confirm-password-reset></app-confirm-password-reset>
</ng-container>
<!-- verify email address -->
<ng-container *ngSwitchCase="'verifyEmail'">
<app-confirm-email-address></app-confirm-email-address>
</ng-container>
<!-- default action -->
<ng-container *ngSwitchDefault>
<!—show an error message -->
</ng-container>
</ng-container>

Confirm Password Reset Code Component

In this component, we will do two things, first is to request the user to provide enter a new password. And then we will use this password and oobCode to save the new password. If the oobCode is valid, the password will be updated successfully, otherwise, it will fail.

We will start by injecting FormBuilder, ActivatedRoute, Router and AngularFireAuth services into our Component.

constructor(private afAuth: AngularFireAuth, private fb: FormBuilder, private route: ActivatedRoute, private router: Router) {}

And then we will declare a FormGroup property named frmSetNewPassword, with new and confirm password form fields:

frmSetNewPassword = this.fb.group({
password: [null, [Validators.required]],
confirmPassword: [null, [Validators.required]]
});

And finally, inside our submit method, we will check if the two passwords match:

const password = this.frmSetNewPassword.controls['password'].value;
const confirmPassword = this.frmSetNewPassword.controls['confirmPassword'].value;
if (password !== confirmPassword) {
// react to error
 return;
}

And then get the oobCode from the URL, using the ActivateRoute service.

const code = this.route.snapshot.queryParams['oobCode'];

And then finally send call the confirmPasswordReset, passing both the code and new password to update the users password.

this.afAuth.auth
.confirmPasswordReset(code, password)
.then(() => this.router.navigate(['signin']))
.catch(err => {
const errorMessage = FirebaseErrors.Parse(err.code); // check this helper class at the bottom
 });

If successful, we will redirect the user to the sign-in page where they can sign in with their new password, otherwise we will show the error.

And here is the template for the above form:

<form [formGroup]="frmSetNewPassword" (ngSubmit)="setPassword()">
<h3 class="title is-5 has-text-black">
Set a new password
</h3>
<h4 class="subtitle is-6 has-text-grey">Please enter and confirm your new password</h4>
  <div class="field">
<label class="label">Password: </label>
    <div class="control">
<input class="input " type="password" name="password" formControlName="password">
</div>
</div>
  <div class="field">
<label class="label">Confirm Password: </label>
    <div class="control">
<input class="input " type="password" name="confirmPassword" formControlName="confirmPassword">
     <div class="has-text-danger" >
Confirm password is required!
</div>
</div>
</div>
  <div class="field">
    <div class="control">
<button class="button is-fullwidth is-primary" type="submit" [disabled]="!frmSetNewPassword.valid">
<span class="icon">
<fa-icon [icon]="saveIcon"></fa-icon>
</span>
<span>Reset</span>
</button>
</div>
</div>
</form>

Verify Email Address

Verifying email addresses is out of the scope for this post, so I won’t go into details. Here is the code snippet to verify user email address:

const code = this.activateRoute.snapshot.queryParams['oobCode'];
this.afAuth.auth
.applyActionCode(code)
.then(() => {
// do something after successful verification
 })
.catch(err => {
// show error message
 });

Remember to inject both AngularFireAuth and ActivatedRoute services:

constructor(private afAuth: AngularFireAuth, private activateRoute: ActivatedRoute) {}

NB: If you don’t require any user action, you can run the above code OnInit and show a loading animation.

Configure Router

And finally, all that is remaining is to configure our Angular Router:

const routes: Routes = [
{
path: 'auth',
children: [
{
//... Auth Guards For UnAuthenticated Users Here
 children: [
// ...
 {
path: 'forgot-password',
component: PasswordResetRequestComponent,
data: { title: 'Forgot Password' }
}
]
},
{
path: 'email/action',
component: EmailConfirmationComponent,
data: { title: 'Confirm Email Address' }
}
]
}
];

Bonus - Firebase Auth Errors Parser

Here is a simple helper method for checking errors returned by Firebase Auth:

export class FirebaseErrors {
static Parse(errorCode: string): string {
let message: string;
switch (errorCode) {
case 'auth/wrong-password':
message = 'Invalid login credentials.';
break;
case 'auth/network-request-failed':
message = 'Please check your internet connection';
break;
case 'auth/too-many-requests':
message =
'We have detected too many requests from your device. Take a break please!';
break;
case 'auth/user-disabled':
message =
'Your account has been disabled or deleted. Please contact the system administrator.';
break;
case 'auth/requires-recent-login':
message = 'Please login again and try again!';
break;
case 'auth/email-already-exists':
message = 'Email address is already in use by an existing user.';
break;
case 'auth/user-not-found':
message =
'We could not find user account associated with the email address or phone number.';
break;
case 'auth/phone-number-already-exists':
message = 'The phone number is already in use by an existing user.';
break;
case 'auth/invalid-phone-number':
message = 'The phone number is not a valid phone number!';
break;
case 'auth/invalid-email ':
message = 'The email address is not a valid email address!';
break;
case 'auth/cannot-delete-own-user-account':
message = 'You cannot delete your own user account.';
break;
default:
message = 'Oops! Something went wrong. Try again later.';
break;
}
return message;
}
}

How to Setup Firebase for Angular

Maina Wycliffe — Tue, 20 Aug 2019 16:13:52 +0300

This is step by step guide about setting up Firebase for your Angular App. This includes using Firebase services from Inside Angular and deploying to Firebase Hosting - optional.

Prerequisite

A Firebase Project – Learn how to create a new Firebase Project
Create an Angular Application – Learn how to setup Angular CLI and Scaffold a new App.

Get Configs from your Firebase Project

We are going to require some firebase configs that will allow our Angular App to communicate with Firebase. These are unique to each Firebase Project and I am going to show you how to get them for your Firebase project, by following the steps below:

The first step is to go to the settings of your project. At the bottom of the Projects’ Setting Web Page, you will see a list of “Your Apps” section. If this is a new Firebase project, it will be most likely empty, as shown below.
If it’s empty, click on the button highlighted below to create a new Web App and skip to step 5.
If it’s not empty, click on Add App button, on the top left corner of the Your Apps section.
And then click on the button highlighted below to create a new Web App.
In the next step, you will be prompted for the App Nickname and if you would like to host the App using Firebase Hosting, which is optional.
Since we are setting up an Angular App, we are going to skip the next three steps, without doing anything. And in the final step, click on continue to console.
Now you should have at least one app in Your Apps section.
Select the app you just created and click on the config radio button to reveals your Web Apps config.
Copy the above config, as we will need to add them to our Angular App in the next step.

Setup your Angular App to use Firebase (And Hosting)

And Firebase Configs

First, inside our environment files (src/environments/*), we need to add the firebase configs we got above. We will add our Firebase project configs to both src/environment/environment.ts and src/environment/environment.prod.ts as shown below:

If you don’t know how environment variables work in Angular, check my previous post that covered the topic here.

export const environment = {
production: false,
firebase: {
apiKey: '[PROJECT_API_KEY]',
authDomain: '[PROJECT_AUTH_DOMAIN]',
databaseURL: '[PROJECT_DB_URL]',
projectId: '[PROJECT_ID]',
storageBucket: '[STORAGE_BUCKET]',
messagingSenderId: '[MESSAGE_ID]',
appId: '[WEB_APP_ID]'
}
};

Install Dependencies and Enable Hosting

After that, we are going to install @angular/fire using Angular Schematics –@angular/fire is the new name of angularfire2.

ng add @angular/fire

The above command is going to install @angular/fire and then initialize firebase hosting for your Angular App.

Please make sure you have install Firebase CLI and logged in, you can follow the instructions here.

You will be prompted to select the Firebase project you are going to deploy your Angular App to.

When the above process completes, both @angular/fire and related dependencies will be installed, and Firebase hosting will be initialized for our Angular Application.

Import `@angular/fire` Angular Modules

Next, let’s import AngularFireModule Ng module - this is required to use any Firebase Services.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AngularFireModule } from '@angular/fire';
import { AppComponent } from './app.component';
import { environment } from 'src/environments/environment';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
AngularFireModule.initializeApp(environment.firebase)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}

On top of AngularFireModule, we will need to add individual Angular Modules for @angular/fire that our application needs. Here are list of available modules:

Module	Description
AngularFireAuthModule	Firebase Authentication
AngularFireDatabaseModule	Realtime Database
AngularFireFunctionsModule	Callable Cloud Firebase Function
AngularFirestoreModule	Firebase Cloud Firestore
AngularFireStorageModule	Firebase Cloud Storage
AngularFireMessagingModule	Firebase Cloud Messaging

Here is how you can import all of them:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireStorageModule } from '@angular/fire/storage';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFireMessagingModule } from '@angular/fire/messaging';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { AngularFireFunctionsModule } from '@angular/fire/functions';
import { AppComponent } from './app.component';
import { environment } from 'src/environments/environment';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFirestoreModule,
AngularFireAuthModule,
AngularFireStorageModule,
AngularFireMessagingModule,
AngularFireDatabaseModule,
AngularFireFunctionsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}

How to Set Up Angular CLI for Beginners

Maina Wycliffe — Fri, 16 Aug 2019 19:00:20 +0300

This a step by step guide of setting up Angular CLI. Angular CLI is a first-party CLI tool that helps developers to create, build and deploy applications among other things. It makes the process of building Angular apps easier by handling the most repetitive tasks on your behalf. This allows you to concentrate on building your application rather than setting up webpack among other things.

Prerequisites

NodeJS and NPM – To install Angular CLI, we are going to need both NodeJS and NPM installed in our system. The process varies in different OSs, but you can find the instructions on how to install NodeJS here. NPM is bundled with NodeJS, so you don’t have to worry about that. Once you have NodeJS installed, you can verify whether it’s working by running node -v on your CLI/Terminal application. This should echo the version of NodeJS you just installed. You can do the same with NPM - node -v - which should echo the version of NPM installed on your system.

Installing Angular CLI

Next, let’s install Angular CLI globally using NPM.

npm install -g @angular/cli

Once the process is done, you can verify if Angular CLI was installed successfully by running ng version command. This should output the version of Angular CLI, NodeJS and Operating System, as shown below.

NB: Since you are not inside an Angular Project, the version of the package will return errors. Don’t panic, it’s normal.

Create a New Angular Project

Next, let’s create a new Angular application using Angular CLI. You do this by running ng new command:

ng new project-name

After you run that application, you will be prompted for two things:

Whether you want to enable routing – this will setup Angular powerful router for you.
Which stylesheet you would like to use for your project – CSS, SCSS, etc.

NB: You can choose the defaults and change them later as your application requirement evolves using Angular CLI.

Once the above process of scaffolding a new application is complete, switch to the directory and run the scaffolded application, using ng serve.

cd project-name
ng serve

You can view the web app on your browser by accessing localhost on port 4200 – http://localhost:4200.

How to Create a Firebase Project

Maina Wycliffe — Fri, 16 Aug 2019 09:05:25 +0300

This is a step by step how to guide to show you how to create a new Firebase project.

First, visit Firebase Console using this visiting the following URL - https://console.firebase.google.com. Login using your Google Account - if you are not already logged in.

Then, create a new project, enter the name of the project and click continue.

In the next step, you will be asked whether to set up Google Analytics. Let’s go ahead and set it up.

If you don’t need Google Analytics, select “Not at The Moment” option. You can always set it up later.

If you are not setting up Google Analytics, skips the next 3 steps. In the next step, you will be prompted to either select or create a Google Analytics Account. If you already have a Google Analytics account, click on Select Google Account and select the account.

If you don’t have one, click on create a new one and enter the name of the account.

Finally, select the Google Analytics Location – default United States – and finally, read and configure Data-sharing settings. Finally, accept Google Analytics Terms and Create Project.

The process should take just a few seconds, once done click continue and you will be taken to projects homepage.

Change Public-facing App Name

Lastly, change the public-facing name of your firebase app to something more friendly.

First, Go to the settings of your Firebase Application.
And then Under Public Settings, change the Public-facing name and add a support email address:
Click on the edit button next to the public-facing name to change the name
Save the changes and you are done.

Install Firebase CLI

“The Firebase CLI (GitHub) provides a variety of tools for managing, viewing, and deploying to Firebase projects.”

Firebase CLI requires both NodeJS and NPM. You can install Node by using Node Version Manager (NVM) for Mac/Linux or Windows. You can also download and install the version of Node directly from their website here.
Next, install Firebase CLI using the following command:

npm install -g firebase-tools

Once the process is complete, Sign in to Firebase by running firebase login. Make sure to sign in with the same Google account you used to create the Firebase Project above.

firebase login

You can test if firebase login worked by running firebase list. This is going list projects you have in your Firebase Account.

firebase list

Flutter and GraphQL - How to Upload Files

Maina Wycliffe — Mon, 12 Aug 2019 11:21:33 +0300

In this post, I am going to show you how to upload files using GraphQL and flutter. To work with GraphQL in flutter, we are going to use graphql_flutter package, which has over 1000 stars on GitHub and I frequently contribute to.

So, without further ado, let’s get started.

Our GraphQL Schema

To upload files, we are going to use a very simple schema. Our mutation will accept a file and then return a download URL for the file. We won’t look at the implementation at the server end.

scalar Upload
type Mutation {
upload(file: Upload!): String!
}

NB: If you are interested, you can find the GraphQL Server for this articles’ demo here.

Demo and Source Code

Here is how our app will work:

You can find the accompanying repo for this article on here on GitHub.

Dependencies and Imports

For this articles’ demo, we are going to need the following dependencies for our flutter project – graphql_flutter and image_picker.

Let’s add them to our projects pubspec file.

graphql_flutter: ^2.0.0
image_picker: ^0.6.0

And we are going to import the following packages:

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:graphql_flutter/graphql_flutter.dart';
import 'package:http/http.dart';
import 'package:http_parser/http_parser.dart';
import 'package:image_picker/image_picker.dart';

Feel free to add any extra dependencies and imports to make your UI look better.

About our Demo Application

For this article’ demo, we are going to use the image_picker package to pick an image. Then, the picked image can then be uploaded to our server. We are going to build a very simplistic UI for our demo application, where we will have a simple button to pick an image. And when an image is picked, it shall be displayed inside an Image widget, and an upload button revealed. The user can then click the upload button to upload the image.

First, let’s define our GraphQL Mutation – uploadImage – which will accept variable called $file of type Upload. The $file variable will be the image selected using the image_picker and will be passed to the upload mutation.

const uploadImage = r"""
mutation($file: Upload!) {
 upload(file: $file)
}
""";

Then, inside our StatefulWidget, let’s add a selectImage method and a private File property called _image. When the select image method is called, it is going to call the ImagePicker.pickImage method, showing a file picker dialog, where a user picks an image. After a user selects an image, we are going to set the _image property to the resulting file (image).

Future selectImage() async {
var image = await ImagePicker.pickImage(source: ImageSource.gallery);
setState(() {
_image = image;
});
}

Next, let’s create our UI using:

@override
Widget build(BuildContext context) {
return Container(
child: Column(
// mainAxisAlignment: MainAxisAlignment.center,
 mainAxisSize: MainAxisSize.max,
children: <Widget>[
if (_image != null)
Flexible(
flex: 9,
child: Image.file(_image),
)
else
Flexible(
flex: 9,
child: Center(
child: Text("No Image Selected"),
),
),
Flexible(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
FlatButton(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Icon(Icons.photo_library),
SizedBox(
width: 5,
),
Text("Select File"),
],
),
onPressed: () => selectImage(),
),
// Mutation Widget Here
 ],
),
)
],
),
);
}

Now, we are just missing is the GraphQL Upload Implementation. There are two approaches for this, and we will look at each below:

Using the `Mutation` Widget

graphql_flutter package provides some easy to use widgets that you can drop inside your flutter app. One of these widgets is the Mutation widget which you can use to run mutation. But before using the Mutation widget, we are going to need a GraphQLClient. The GraphQLClient needs to be provided somewhere up our widget tree, preferably at the very beginning.

You can achieve this by creating a GraphQLClient and then pass it down the widget tree using the GraphQLProvider widget. First, lets create a GraphQLClient wrapped with ValueNotifier:

final httpLink = HttpLink(
uri: 'http://$host:8080/query',
);
var client = ValueNotifier(
GraphQLClient(
cache: InMemoryCache(),
link: httpLink,
),
);

NB: The host points to localhost, which is different between IOS and Android emulator:

String get host => Platform.isAndroid ? '10.0.2.2' : 'localhost';

Next, we need to pass down the above client down the widget tree using the GraphQLProvider widget. In our case, we are going to wrap the Scaffold widget with it, you can also wrap the MaterialApp with if you so wish.

return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: GraphQLProvider(
client: client,
child: Scaffold(
appBar: AppBar(
title: Text("Graphql Upload Image Demo"),
),
body: MyHomePage(),
),
),
);

Now we are ready to use the Mutation widget. To use the Mutation widget, you just need to pass MutationOptions, a Widget Builder method and an onCompleted and/or update callbacks. The last two callbacks are called when a mutation is completed. With onCompleted callback passing the resulting data from the mutation results. While the update passing the QueryResults object which you can use to check for errors.

To use the Mutation widget, we are going to add it next to the select image button. We are going to also check whether the _image property is set before displaying the widget.

if (_image != null)
Mutation(
options: MutationOptions(
document: uploadImage,
),
builder: (RunMutation runMutation, QueryResult result) {
return FlatButton(
child: _isLoadingInProgress(),
onPressed: () {},
);
},
onCompleted: (d) {},
update: (cache, results) {},
),

The Mutation widget is going to return an upload button, which a user can press to upload the image. Let’s implement the onPressed method of the button so that it will upload the image when pressed. First, we are going to prepare the image for uploading by converting it into a MultipartFile. Then, we can pass the resulting MultipartFile variable as the variable for our Mutation, when calling the runMutation method passed from the builder.

var byteData = _image.readAsBytesSync();
var multipartFile = MultipartFile.fromBytes(
'photo',
byteData,
filename: '${DateTime.now().second}.jpg',
contentType: MediaType("image", "jpg"),
);
runMutation(<String, dynamic>{
"file": multipartFile,
});

Then we can use the update call-back to check if the upload has been completed successfully and show a response.

update: (cache, results) {
var message = results.hasErrors
? '${results.errors.join(", ")}'
: "Image was uploaded successfully!";
final snackBar = SnackBar(content: Text(message));
Scaffold.of(context).showSnackBar(snackBar);
},

And that’s it when a GraphQL operation completes successfully, a success message is going to be displayed, else the resulting error message will be displayed using a snackbar.

Without using the Mutation Widgets

There a lot of people who don’t like using the Mutation widget for various reasons. You can also do that with the graphql_flutter. We are going to replace the Mutation widget above, with a simple button, which will call a method – _uploadImage – when pressed. We are going to place the _uploadImage method inside our StatefulWidget.

if (_image != null)
FlatButton(
child: _isLoadingInProgress(),
onPressed: () => _uploadImage(context),
),

Then inside our _uploadImage method, we are going to first convert the image to a MultipartFile just like we did before.

var byteData = _image.readAsBytesSync();
var multipartFile = MultipartFile.fromBytes(
'photo',
byteData,
filename: '${DateTime.now().second}.jpg',
contentType: MediaType("image", "jpg"),
);

And then create MutationOptions variable for our mutation, passing the document and the multipart file above.

var opts = MutationOptions(
document: uploadImage,
variables: {
"file": multipartFile,
},
);

Then, create our GraphQLClient:

final httpLink = HttpLink(
uri: 'http://$host:8080/query',
);
var client = GraphQLClient(
cache: InMemoryCache(),
link: httpLink,
);

And finally, run the mutation by calling client.Mutation function which returns a Future of QueryResults, which you can use to show the final response:

var results = await client.mutate(opts);
var message = results.hasErrors
? '${results.errors.join(", ")}'
: "Image was uploaded successfully!";
final snackBar = SnackBar(content: Text(message));
Scaffold.of(context).showSnackBar(snackBar);

With this you can use it with scope models, BLoCs or any state management solution you comfortable with.

TIP

If you are not interested in using the flutter_graphql widgets, you can instead directly use the graphql package, which is the core of the flutter_graphql and are both maintained by the same team.

How to Add Async Validators to an Angular Reactive Form

Maina Wycliffe — Mon, 22 Jul 2019 01:00:00 +0300

Occasionally, you may want to validate form input against data that is available asynchronous source i.e. a HTTP backend. For instance, checking if a username or email address exists before form submission. In Angular, you achieve this using Async Validators, which we are going to look at in this post.

We are going to build a simple reactive form. It will contain a single form field called username. Then, whenever the user enters their username, we are going to check if it exists and return the response. If the username exists, then the form shall report the following error – The username is already taken., as shown below.

Full demo here.

If you are new to Reactive Forms in Angular, please refer to this guide here on getting started.

Without further ado, let’s get started.

Prerequisite

I am going to skip the process of setting up a new Angular Project. Once you have your Angular project setup, in your app module, you will need to import ReactiveFormsModule from @angular/forms. This is the only module we require to use Reactive Forms inside our angular application.

@NgModule({
// ...
 imports: [
BrowserModule,
ReactiveFormsModule
],
// ...
})
export class AppModule {}

Next, lets add a method for looking up username methods.

Username Lookup Method

First, we are going to add a method to check whether the user’s username exists. In a normal application, this is where you would make a HTTP request to your backend API – either a REST, a GraphQL API etc. But for the purpose of this post, we are going to simulate a HTTP request using RXJS Delay Operator. This will delay our responses by about one second and return an observable just like a HTTP request in Angular.

To achieve this, we are going to create an array of taken usernames - takenUsernames.

takenUsernames = [
'hello',
'world',
'username'
// ...
];

Then given a username, we are going to determine if it exists within the array using array includes method. After that, whatever the results, we will then delay the response for about a second and return the results as a boolean Observable – Observables<boolean>.

checkIfUsernameExists(username: string): Observable<boolean> {
return of(this.takenUsernames.includes(username)).pipe(delay(1000));
}

Adding an Async Validator

Next up, we are going to create our async validator. To create this, we just need to implement the AsyncValidatorFn interface. To implement the AsyncValidatorFN interface, you need a method that receives a form control class (AKA AbstractControl) as a parameter. The method then needs to return a promise or an observable of ValidationErrors or null. If there are any errors, the method returns ValidationErrors, otherwise it just returns null.

A ValidationErrors is an another interface, which is just a key value map of all errors thrown, as shown below:

type ValidationErrors = {
[key: string]: any;
};

For instance, our error for this posts demo shall look something like this { usernameExists: true }. The key of the returned error allows you to check for specific errors on your form and display them to the user. This allows you to give a more precise feedback to the user instead of generic feedback.

Please note, when there are no errors, you should always return null. If you don’t return null, your Angular Form will be in an invalid state. This could have some undesired side effects.

In our method to check for errors, we will map the boolean response from checkIfUsernameExists method above to a ValidationErrors or null response. It will return null if false and a ValidationErrors object if true.

usernameValidator(): AsyncValidatorFn {
return (control: AbstractControl): Observable<ValidationErrors | null> => {
return this.checkIfUsernameExists(control.value).pipe(
map(res => {
// if res is true, username exists, return true
 return res ? { usernameExists: true } : null;
// NB: Return null if there is no error
 })
);
};
}

We will tack the above method inside our username lookup service.

Adding Async Validators to Our Reactive Form

Now that we have a full working service, we need to use the async validator we just created above. This is a simple matter of adding the array of async validators, after synchronous validators, as shown below.

return this.fb.group({
username: [
null, [Validators.required], [this.usernameService.usernameValidator()]
]
});

Remember to inject the usernameLookupService into the component you are using it in.

constructor(private fb: FormBuilder, private usernameService: UsernameValidationService) {
// ...
}

UI Implementation

And finally, inside your template, you can check if the form has errors. You can check if a form field has an validation error inside the template as shown below.

frmAsyncValidator.controls['username'].errors?.usernameExists

This returns true if there is an error, else it is undefined, hence the use of safe navigation operator (?). And here is the full template for our form:

<form [formGroup]="frmAsyncValidator">
  <div class="field has-text-left">
<label class="label">Username </label>
    <div [ngClass]="{'is-loading':
frmAsyncValidator.controls['username'].pending }" class="control">
<input [ngClass]="{'is-danger': hasError('username', 'any')}" formControlName="username" class="input is-focused" type="username" placeholder="Your username">
</div>
    <div class="has-text-danger" *ngIf="frmAsyncValidator.controls['username'].errors?.usernameExists">
This username is already taken!
</div>
</div>
</form>

A Note on Performance

Currently as we have implemented our async validator, it runs on form value changes. For sync validators, you will likely never notice any performance impact. For async validators however, this can have some undesired side effects. This is because you will most likely be sending HTTP requests to some sort of backend for validation. Running validation on form value changes can end up straining the backend with too many requests.

For this reason, you can change your validators to run onBlur, instead of on form value changes. You can achieve this by adding the updateOn property to { updateOn: 'blur' } for either an individual form control or the entire form:

This is how you can set { updateOn: ‘blur’ } property for an entire form:

this.fb.group({/** field here */}, { updateOn: 'blur' });

And this is how you do it for an individual form control:

username: [
null,
{
validators: [Validators.required],
asyncValidators: [this.usernameService.usernameValidator()],
updateOn: 'blur'
}
]

Conclusion

That’s it for me in this post, you can find the code for this posts example here on GitHub. If you have any questions/issue/suggestion, feel free to use the comment section below. You can also join me on my new Slack channel here or on Twitter @mwycliffe_dev where am available to help in any way I can.

Thank you.

Flutter - A Closer Look at How Pub Handles Dependency Versions

Maina Wycliffe — Wed, 10 Jul 2019 15:14:56 +0300

In this post, I want to look closely at how dart pub handles dependency versions. The end goal is to help you understand how to manage your flutter dependencies versions with some finesse. So, without further ado, let’s get started.

How Dart Pub Handles Dependencies

Dart package manager (PUB) doesn’t allow multiple versions of the same dependency. Instead, it uses version constraints to give you flexibility in situations where you have two dependencies you are depending on depend on different versions of the same a dependency.

This means that, instead of having a specific version of a dependency, you will instead specify a range of versions that can work with your application or library. For instance, if two dependencies require the same but different versions of a dependency. Then using version constraints increases the chances that the specified version ranges will overlap. The latest version where both two packages version requirement overlap is used.

For instance, Let’s say you have two dependencies. Where the first dependency depends on package-x with version range of 1.3 to 1.8. While the second dependency depended on the same package-x but between version 1.6 to 2.0. In this case, dart package manager would install version 1.7.x, where x is the latest patch version. This is because it’s the latest version that both dependencies depend on.

This works well in a perfect world. But the world we live in is anything but perfect. There are some cases where you might find that your dependencies version ranges don’t overlap. In such cases and other similar cases, you might have to choose one dependency over the other.

This is just an overview of how dart pub package works, you find detailed documentation here.

Semantic Versioning

In order to use version constraints, you need to know which future versions of your dependencies won’t break your app or library. This is where Semantic versioning come in. Semantic versions provide guidelines on how dependencies are upgraded. With Semantic versioning, a dependency version is in the form of X.Y.Z where X is the major version, Y is the minor version and Z is the patch version. For more information, check the full documentation on semantic versions here.

With Semantic versioning, when a backward compatible feature is added to the public API, then the minor version is incremented. If a non-backward compatible feature is added to the public API, then the major version is incremented. And the patch version is incremented only when bug fixes which are backward compatible are introduced.

With that in mind, you can specify the version constraints of your dependencies for your library and application full knowing that a minor or parch version won’t break anything. You can learn more about Semantic versions here.

NB: Pub uses version 2.0.0-rc.1 of semantic versioning which allow packages to use build identifies to differentiate different versions. This is why you can come across dependency versions looking like this X.Y.Z+12345. NB: When the major version is at zero – i.e. 0.1.5 – dart convention defers slightly from semantic versioning. Instead, the X.Y.Z interpretation above is shifted down a slot. This makes Y behave like the major version, and Z like the minor version. In order to indicate the patch version, then a build identifier is used i.e. 0.Y.Z+1. This behaves the same as the patch version. This is because, prior to version 1.0.0, semantic versioning does not promise compatibility between versions. Dart on the other hand offers promise of version compatibility between different versions.

Types of Dependencies

Pub supports two types of dependencies – regular and dev. Dev dependencies are those dependencies that are not part of your application or library but rather used for development workflow. For instance, test dependencies – mockito or tests – for running tests or generators dependency for generating PODOs for your application. Regular dependency are dependencies that are used inside your application and library – i.e. they are kind of important for your application to run.

How to add Dependencies to your Application

You add your dependencies in the pubspec file – located at the root of your application. This is automatically generated when creating a new flutter application. Regular dependencies are added under dependencies field while dev dependencies are listed under dev_dependencies field. You can learn more about fields of apubspec file here.

To add a dependency in dart, you simply specify the name of the dependency and the version you want to use.

dependencies:
flutter:
sdk: flutter
font_awesome_flutter: 8.4.0
bloc: 0.14.4
flutter_bloc: 0.18.3

For an application with few dependencies, you can specify an exact version and manually update as new versions get released. On the other hand, you might want to use version constraints to get the latest package without manually updating your pubspec file. Because dart uses semantic versioning, it is easy to predict up to which future version of a dependency you can use inside your application without breaking anything.

In case you are developing a dart/flutter library, version constraints are highly recommended. As we discussed above, it gives your library high chance of compatibility with other libraries that an app developer is using.

To specify version constraints, you use the greater than (>), less than (<), greater than or equal to (>=) and less than or equal to (<=) symbols as shown below:

>=1.0.0 – any version that is greater or equal to 1.0.0 – i.e. bloc: >=0.14.4.
>1.0.0 – any version greater than 1.0.0 – i.e. bloc: >1.0.0.
<=1.0.0 – any version less than or equal to 1.0.0 i.e. bloc: <=1.0.0 – This sets the upper limit of the version to install as version 1 and any version lower than that.
<1.0.0 – any version less than 1.0.0 i.e. bloc: <1.0.0 – This basically does the same as the above except it excludes version 1.0.0.
any – any version of that dependency – not recommended for performance reasons. The same as leaving the version section empty, but more explicit.

On top of that, you can also combine the above versions constraints to provide an upper and lower limit for a dependency. For instance: bloc: '>=1.0.0 < 2.0.0' which limits the versions for your bloc package to between 1 and less than two. This is recommended especially for libraries.

Caret Syntax (`^version`)

You may have come across this, where a dependency version is specified with a caret before it – ^version. This provides a simple way of expressing common version constraints discussed above. When using the caret syntax, you are setting the version constraints to be greater or equal to the listed version, but less than the next major version. You simply don’t want a version with breaking changes being installed. For instance, ^1.2.3 is the equivalent of >=1.2.3 <2.0.0 while ^0.1.2 is equivalent of >=0.1.2 <0.2.0.

TIPs

For libraries, it is recommended not to commit the dependency lockfile. For applications on the other hand, you should commit the dependency lockfile. The reason for committing the lockfile for applications is to ensure that all developers are working on exact the same version of dependencies. The lockfile is only updated when you upgrade dependencies (flutter pub upgrade) but not when you get packages (flutter pub get). You can learn more here about what to commit and not to commit.

Final Thoughts

Libraries are the biggest beneficiaries for using version constraints. If you maintain a flutter/dart library, you should switch to version constraints if you haven’t already. For application, I also think using version constraints is beneficial.

For instance, you might want to have minor and patch versions of a dependency installed when available, without having to manually track them yourself. This allows you to run the flutter pub upgrade and it will update the dependency versions in thelockfile within version constraints on the pubspec file.

NB: For flutter applications, you should not use pub get or pub upgrade commands to manage yours apps dependencies. Instead, you should use flutter pub get or flutter pub upgrade.

That’s it from me, if you have any question or any criticism, use the comment section below. You can also follow me on twitter or join my slack workspace. I offer help whenever I can.

Thank you.

Customizing Angular App Behavior per Build Environment

Maina Wycliffe — Tue, 02 Jul 2019 08:33:02 +0300

If you have used angular for even a brief period, you probably have come across the environment configuration files. By default, they are two of them – one for production and another for development. They allow you to specify configs or settings that are unique to a specific deployment environment. This may include configs such as the URL API Endpoint or even Firebase Configs for the said environment.

For instance, Angular uses the prod property from environment variables to enable the Service Worker when true – i.e. in production deployment only.

ServiceWorkerModule.register('ngsw-worker.js', {
enabled: environment.production
}),

You can also build on this, so that you can have even more configs for different target environment. For instance – development, staging and production. To learn more about mastering environment configurations, checkout my previous post here.

In this post, we are going to take environment specific configurations a bit further. We are going to see how we can customize not only the variables but styles, scripts, assets and even classes. In order to do this, you will need to be comfortable tinkering with the angular.json – the config file your angular workspace.

Why

For most project, including most of mine, the default Angular CLI configs work out of the box, with no or minimal need for any customization.

But, from time to time, you may need to customize the behaviour of your angular application based on the environment you are building it for. For instance, you may want to have a different theme, logo etc. for your alpha, beta and production environments – enabling your users/testers to easily identify which environment they are in.

In such a case you could have different colors for your different environments, while also correcting more telemetry information on the pre-release versions as compared to the stable release, where most of users will be.

So, without further ado, let’s get started:

Customizing Styles and Scripts

By default, if you have some global styles and scripts for your web app, you can add them to the styles array.

{
...
"projects": {
"angular-extreme-build-configuration": {
...
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
...
"styles": [
"styles1.scss",
"styles2.scss",
...
],
"scripts": [
"script1.json",
"script2.json",
...
]
},
...
},
...
}
}
},
...
}

This will and other configuration you make in this section will act as default configuration for all build environment (i.e. prod, serve, staging) you have setup for your app. But what we want in our case, is to set different styles for different environment we are targeting.

To achieve this, we are going to pass a different set of styles and scripts for each environment. You do this by adding the styles and scripts properties under the environment you want to. Each property accepts an array of file paths relative to the root of the angular workspace.

{
...
"projects": {
"angular-extreme-build-configuration": {
...
"architect": {
"build": {
...
"options": {
...
"styles": [
"src/styles.scss" // default
],
"scripts": []
},
"configurations": {
"staging": {
...
"styles": [
"src/styles.staging.scss"
],
"scripts": []
},
"production": {
...
"styles": [
"src/styles.prod.scss"
],
"scripts": []
}
}
},
...
}
}
},
...
}

NB: Any environment, that you don’t configure the scripts and styles for, will fall-back to the default. So, you can add the default scripts and styles, then configure the specific environment you want to be different.

For instance, if you were using bootstrap or any other CSS framework, you can theme your web app differently based on the environment. This gives you the freedom to customize the look and feel of your web app across multiple target environments. You can have a production web app that looks completely different from staging, yet the underlying code is largely the same.

Checkout the demo here, to see this in action.

Unique Assets for Different Target Environments

Just like Assets and Scripts above, you can also provide a list of assets for your app. Basically, this are files that are not part of your app code. When you specify them, Angular CLI will then copy them as they are, to the build directory during build time. This is suitable for things like logos, icons etc.

By default, you specify individual images or directory and Angular will copy them as they are, relative to the root of angular workspace.

{
...
"projects": {
"angular-extreme-build-configuration": {
...
"architect": {
"build": {
...
"options": {
...
"assets": [
"src/favicon.ico",
"src/assets"
],
...
},
...
},
...
}
}
},
...
}

This will not work very well for multi environment configuration. In such situations, you can provide more instruction to angular cli on how to copy assets for a specific environment. Instead of a simple path to the file or directory, you can specify a field with the following fields:

glob - This specifies the file pattern to copy, uses the input directory as the base
input - The input directory, relative to the angular workspace
output - The output directory, relative to the build directory
ignore - the list of globs to ignore in the input directory

Take this scenario, you have two build environments, staging and production, each with a unique asset. First, you create two directories, one for production assets – prod_assets and the other for staging assets – staging_assets. During build for each of this configuration, you need the prod and staging assets copied over to the assets directory in the build directory.

In this case, your staging assets configuration would look like this:

{
...
"projects": {
"angular-extreme-build-configuration": {
...
"architect": {
...
"configurations": {
"staging": {
...
"assets": [
"src/favicon.ico",
{
"glob": "**/*",
"input": "src/staging_assets/",
"output": "/assets/"
}
],
...
},
...
}
},
...
}
}
},
...
}

And the production configuration would look like this:

{
...
"projects": {
"angular-extreme-build-configuration": {
...
"architect": {
...
"configurations": {
...
"production": {
...
"assets": [
"src/favicon.ico",
{
"glob": "**/*",
"input": "src/prod_assets/",
"output": "/assets/"
}
],
...
}
}
},
...
}
}
},
...
}

Using File Replacement for Typescript Classes

The configs for File replacement allow you to instruct Angular CLI to replace a specific file with another before building your web app. For instance, you could replace a typescript class with another class – provided the properties and methods required are available in both – depending on your build target environment.

In fact, Angular CLI uses this to replace the default environment.ts file with environment.prod.ts when building with the --prod flag. The setting accepts an array of objects, which means you can have multiple file replacement. The object has two properties – replace and with, where the first is the file to replace, and the latter is the path to the replacement file.

"fileReplacements": [
{
"replace": "path/for/file/to/replace",
"with": "path/for/file/to/replace/with"
}
]

Let’s take this scenario, you have two logging classes, during development, you just want to log to console. But during production you want to log to a logging service – remotely. You could create two classes or services – logging.ts and logging.prod.ts - and having angular CLI replace the default class with the production class when building for production.

To achieve this, under fileReplacements for production configuration, you just need to specify which file to replace and the replacement file, as shown below:

...
"production": {
"fileReplacements": [
{
"replace": "src/app/logging.ts",
"with": "src/app/logging.prod.ts"
}
],
...
}
...

I know that is a bit of a stretch using file replacement like that, but I didn’t have a better idea and you still get the point.

That’s it from me on this topic for now. If you have any more ideas on build configuration customization, use the comment section below, it will be helpful to me and future readers of this post.

All the source code for this post can be found on GitHub. If you have any question for me, feel free to use the comment section below or shoot me a message on Slack.

Flutter Building a Bottom Navigation Bar with "Flutter_Bloc"

Maina Wycliffe — Thu, 28 Mar 2019 08:59:02 +0300

I was in the middle implementing a BottomNavigationBar, when a thought crossed mind. Can I use bloc pattern to manage its state? Admittedly, it’s not the most brilliant idea, not even close to one, but I thought it was a very good way to improve my understanding of the bloc pattern. So, when I was done, I decided to create my first ever post on flutter.

Introduction

This what we are building:

To achieve this, we are going to be using the flutter_bloc package, which depends on core bloc package. The goal of the bloc package is to simplify the implementation of the bloc pattern, by reducing the amount of boilerplate required. It has a package wrapper for both flutter and angular dart, allowing you to share your business logic between your flutter app and web app (AngularDart).

If you are unfamiliar with bloc concepts, please learn more here before you can continue, this will make it easier for you to follow this post.

Let’s get started:

Dependencies

For this project, we are going to require at least the following dependencies:

Bloc – Link
flutter_bloc – Link

Feel free to add any other dependencies to fit your projects needs. Assuming you have successfully installed the above dependencies, let’s start coding:

To implement a bloc for a BottomNavigationBar, we are going to need 3 things: Events, State and a Bloc.

Let’s start by implementing events:

Events

We are going to start by defining our events. In our case, we are going to have just 3 BottomNavigationBarItems, each display a different color when clicked. As such we are going to define 3 events, each representing each of BottomNavigationBarItems. This seems perfect for an enum with our three constants, for each BottomNavigationBarItem:

enum NavbarItems { Red, Green, Blue }

State

Now that we have our bloc events constants, we need to create a state for each of the BottomNavigationBarItems. But first, we let’s create a state for BottomNavigationBar, then the other 3 states will extend it – the parent state.

abstract class NavbarState {}

And then, for each of our items states, we shall hold the Scaffold Widgets title and its BottomNavigationBarItems index. This will allows us to highlight the active item and set the page title.

For instance, for our ShowRed state, it will look like this:

class ShowRed extends NavbarState {
final String title = "Red";
final int itemIndex = 0;
}

And the same applies to our other two states:

// ShowBlue State
class ShowBlue extends NavbarState {
final String title = "Blue";
final int itemIndex = 1;
}
// ShowGreen State
class ShowGreen extends NavbarState {
final String title = "Green";
final int itemIndex = 2;
}

And that’s it for our state, next let’s build our bloc.

Bloc

Our bloc will simply map events to states. For instance, our Red event will be mapped to the ShowRed state and so on. Let’s define our bloc, which will extend the bloc class, which takes in events and maps it to a state. So, for our case, we will be mapping NavbarItems events we defined above to the NavbarState, our parent state.

class NavbarBloc extends Bloc<NavbarItems, NavbarState> {
// object code here ...
}

Then, inside our bloc, let’s add an initial state – which will be the default selected item. This is done by using the initialState method. The initialState method is triggered before any event has been dispatched. For our case, the initial state will be ShowRed state;

@override
NavbarState get initialState => ShowRed();

Next, we must define a mapEventToState method inside our bloc. This is triggered each time an event is dispatched, for instance, clicking on a BottomNavigationBarItem. The method accepts the current state and the event that triggered it and streams the current state. Then inside the presentation layer, you can listed to this stream and react accordingly.

In our case, we only have 3 events – Red, Blue and Green. So, we will map them to the appropriate state. For instance, when the event that was dispatched was Red, then will map that to the ShowRed state and so on. To achieve this, we will use a simple switch case:

@override
Stream<NavbarState> mapEventToState(NavbarState state, NavbarItems event) async* {
switch (event) {
case NavbarItems.Blue:
yield ShowBlue();
break;
case NavbarItems.Green:
yield ShowGreen();
break;
default:
yield ShowRed();
break;
}
}

And that’s it for our bloc. Now let’s move to the presentation layer:

Presentation

Next, let’s build our User Interface. We are going to wrap our scaffold widget with a BlocBuilder, so we can be able to change the title, body and set selected item index.

First, let’s define a local variable for our bloc:

NavbarBloc _navbarBloc;

Next, on state initialization, lets set our bloc variable from above to the BottomNavigationBar Bloc:

@override
void initState() {
super.initState();
_navbarBloc = NavbarBloc();
}

And then, we need to be able to dispose of our bloc, when the stateful widget is disposed:

@override
void dispose() {
_navbarBloc.dispose();
super.dispose();
}

Then, we are going to use BlocBuilder to provide our BottomNavigationBar bloc above to build our UI based on the selected state. But first, to make things a tad bit easier, lets create a method to build our Scaffold widget. Let’s call it buildHomepage, and will accept title, color and currentIndex. And it is going to return a Scaffold widget.

Scaffold buildHomepage(String title, Color color, int currentIndex) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Container(
color: color,
child: Center(
child: Text(title),
),
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: currentIndex,
onTap: (index) {
// on tap method here
 },
items: [
BottomNavigationBarItem(
icon: Icon(Icons.looks_one),
title: Text("Red"),
),
BottomNavigationBarItem(
icon: Icon(Icons.looks_two),
title: Text("Blue"),
),
BottomNavigationBarItem(
icon: Icon(Icons.looks_3),
title: Text("Green"),
)
],
),
);

Now, we can use the BlocBuilder to provide our bloc in order to build the UI based on the selected BottomNavigationBar state:

@override
Widget build(BuildContext context) {
return BlocBuilder(
bloc: _navbarBloc,
builder: (BuildContext context, NavbarState state) {
// check state and show appropriate content here
 },
);
}

Then, inside the builder method, we will check which is the current state and show the appropriate content. For instance, when the state is ShowRed:

if (state is ShowRed)
return buildHomepage(state.title, Colors.red, state.itemIndex);

And the same applies to the other two states:

if (state is ShowBlue)
return buildHomepage(state.title, Colors.blue, state.itemIndex);
if (state is ShowGreen)
return buildHomepage(state.title, Colors.green, state.itemIndex);

Now, the only thing that’s remaining is to dispatch the actions whenever a BottomNavigationBarItem is tapped, using the onTap event listener:

onTap: (index) {
if (index == 0) _navbarBloc.dispatch(NavbarItems.Red);
if (index == 1) _navbarBloc.dispatch(NavbarItems.Blue);
if (index == 2) _navbarBloc.dispatch(NavbarItems.Green);
}

And that’s it, you now have a BottomNavigationBar that uses bloc pattern to keep track of the selected items. You can find the whole source code here.``

Golang – Building a Graphql Server (Part 1)

Maina Wycliffe — Mon, 25 Mar 2019 03:50:00 +0300

Over the last 3 months, I have been involved on a project where I ended up building a GraphQL Server using Go. Before this, I had not worked on GraphQL before, on either frontend or backend. In this post, I would like to focus on two things: First, why I decided to use GraphQL over REST. And secondly, the Go Libraries that can help you build a graphql server from the grounds up.

This is going to be the first of a series of posts, in which am going to share my experiences on various aspects of building a GraphQL Server. I hope there will be at least three more posts with more technical details on how to solve and approach various issues that I came across.

Why I chose GraphQL

The main reason, at least for me, was over fetching and under fetching. GraphQL allows the client to define exactly the data it needs from the server. The server will then return only that information. Let’s say a client needs a customer contact details, it will just get that and not more or less.

This is very difficult to achieve on REST, you will most likely end up returning related data on a request based on your best guess on what a client might need. Basically, contact details would also have other customer data that the client might not need at that specific time.

In simple terms, graphql allows you to treat your backend like a database that you can query for information you need and get exactly that.

Other reasons are:

Strongly Typed – graphql clients know exactly the data types to expect.
Acts as a single source of truth as proxy in front of your various end points or microservices.
Easy and Self Documentation, especially when combined GraphiQL. Updated automatically when you make changes.

GraphQL with Go – Which Library to use

There are 4 main contenders for you to choose from, with each taking some sort of different approach to building GraphQL servers in go. Let’s have a brief look at them:

Disclaimer: I have only had first-hand experience with the first and the last of the libraries below, information on the other 3 is mostly from my research.

1. graphql-go/graphql

This is one of the most popular graphql library in this list. With this library, GraphQL types and schema are defined inside your go code. Well, this leads to a lot of boilerplate. You will notice that each of this library take a different approach on how you define schema and types creation. It was my first attempt at building a graphql server and worked very well.

The main reason why I switched to gqlgen, was that it doesn’t handle circular reference very well. And won’t event compile if there is one. There is a work around though which I didn’t find very intuitive for me, this may change in the future though.

Boilerplate aside, use this if you don’t mind your GraphQL schema and types definition living inside your go code. Here is a link to the GitHub repository.

2. graph-gophers/graphql-go

This is one of the two schema first graphql libraries for go. Being schema first, simply means that you write your schema in schema definition language and have go parse it. As far as I can tell, it doesn’t use a generator or at least it’s not mandatory. This library aims to provide support for graphql draft specification with easy to use go APIs.

Here is a link to the GitHub repository.

3. samsarahq/thunder

This is unlike any other library in this list, because it’s structs first and aimed to be a framework for rapid graphql server development. Being struct first means, you basically define your schema as structs, following all the rules of structs of exported fields. This will then generate resolvers automatically from Go struct types and function definitions. It also offers special go structs tags to give you more control on field names and which fields to skip.

One thing to keep in mind is that while it has been used in house production at samsarahq, it’s still in development and breaking changes may be introduced. Here is a link to the GitHub repository.

4. 99designs/gqlgen

This is a schema first and type safe graphql library. Unlike graph-gophers/graphql-go from above, after writing your schema and types, you need to run the gqlgen code generator. The generator will then generate all necessary go files (boring bits) that you need to build your graphql server. The resolver file is only generated initially, but the models.go and generated.go files are regenerated every time to reflect your changes, and you shouldn’t edit them.

This allows you to bring over your schema from let’s say Apollo server and it will automatically generate all the resolvers for you. Then it’s a matter of writing resolver to your code. It is also very configurable, giving you options to re-use your models from the database, specify which struct tags to use, split up your schema files into multiple files etc. This configurations are placed inside a gqlgen.yaml file.

On top of that, Gqlgen is the most feature rich library in this list, as of the time of writing this. This is the library I ended up using and we are going focus more on it over the next few posts. Below, is a feature comparison from all four graphql libraries (it was created by gqlgen).

You can find the official documentation of gqlgen here.

Working With Assets and Global Styles and Scripts in Angular

Maina Wycliffe — Mon, 25 Feb 2019 00:40:50 +0300

In this post, we are going to take a closer look at how we to work with assets (web assets) and global styles and scripts on our angular project. The three (Assets, Styles and Scripts) cover all the resources you might need for your Angular app. We will cover common scenarios in which you might come across while working with web resources for your project.

So, without further ado, let’s get started:

Working with Assets

Let’s start with assets, this could be anything from images, videos, json files to styles and scripts. By default, Angular has an asset directory, located under the /src directory at the root of your angular project. This is copied over to the build directory by Angular CLI during the build process of your app. If you have some images, you can simply drop them in to this directory. Then, just reference to them as show below:

<img src="/assets/image.png" ... />

You can even drop a directory with assets inside the assets’ directory, and everything will be copied as is.

<img src="/assets/images/image.jpg" ... />

And if you don’t want to use the assets directory, Angular got you covered here as well. You can configure Angular CLI to automatically copy a file or directory over to the build directory by adding those files to the assets array inside angular.json.

{
// ...
"projects": {
"project-name": {
// ...
"architect": {
"build": {
// ...
"options": {
//...
"assets": [
"src/favicon.ico", // default
"src/assets" //default
// Add more assets here
]
// ...
}
// ...
}
// ...
}
}
// ...
}
// ...
}

By default, there are two files in the assets array, the assets directory and favicon.ico file, as show above. You can add your own assets, relative to the root of your Angular workspace. The above assets will apply to both development and production builds of your app.

But if you wanted, you can also have different assets for each deployment environment in Angular too. For instance, if you had a different logo for each build environment, you might want the logo to be copied in the same exact location, in each environment, to make it easier to reference to it.

<img src="path/to/logo" ... />

To achieve this, you can use the objects for assets configurations, instead of a simple path string shown above. Inside this object you need to specify the following properties:

{
"glob": "pattern of files to copy (can include a filename)",
"ignore": ["files to ignore"],
"input": "path to directory in which the assets are",
"output": "directory to copy assets to (inside build directory)"
}

For instance, if you wanted a different set of assets for productions, you just need to add the assets array, with necessary assets:

{
// ...
"projects": {
"project-name": {
// ...
"architect": {
"build": {
// ...
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"assets": [
{
"glob": "**/*", // copy everything
"input": "src/prod/assets",
"output": "/assets/"
},
{
"glob": "favicon.ico", // copy only favicon.ico
"input": "src/prod",
"output": "/" // copy to root directory
}
]
// ...
}
}
}
// ...
}
}
}
}

NB: By adding an assets array for a specific build environment i.e. production, Angular CLI will ignore all assets specified for all environments and use only those specified for that environment only.

Local Global Styles and Scripts

In the previous section we were focusing on general assets, but let’s now focus only on stylesheets and scripts. By default, Angular CLI adds an empty stylesheet file – styles.css – inside the src directory. The extension of that file will depend on the stylesheet you chose when you were prompted for when you were creating a new project. You can simply add your CSS/SASS/LESS styles here and you are good to go. Remember to change the stylesheet extension appropriately.

But things are never that easy, inside angular.json, there is an array for scripts and styles, much similar to the one for assets above. Inside the two arrays, you can add paths to your styles and scripts, in the appropriate array.

{
//...
"styles": ["src/styles.scss"],
"scripts": ["some/path/to/a/script"]
// ...
}

Unlike the assets array above, where the files are simply copied over to the build directory, this will be bundled in to the angular final build bundles. However, if you don’t want that, you can use an object to configure either style or script. This will allow you to specify how each style or script will be built. The object configuration can have up to 3 fields:

{
"input": "", // path to style or script file (required)
"bundleName": "", // output bundle name, don’t add extension
"lazy": false // when set to true, the file will not be added to index.html
}

When the bundleName is specified, the resulting file is added independently to index.html, in the order specified in the array. The third field specifies whether the resulting bundle, will be included inside the index.html file. If set to true, it will be bundled and added to the build directory but will not added inside the index.html. A hash will also not be added to the name of the bundle, making it easy to refer to it. This allows you to be able to lazy load such a script or style inside your app later along.

Lazy Loading Local and Remote Scripts

Some scripts are only required on very specific times, hence adding them to the index.html doesn’t make sense. For instance, PayPal Checkout.js is only required when the user is checking out and not when browsing the list of products. Therefore, adding it to the index.html and having it loaded alongside other important resources doesn’t make sense. It makes sense to load it only when required and not a moment before, which could have a negative impact on your app performance.

You can load such scripts and styles inside your app, as shown below:

Script:

return new Promise(resolve => {
const scriptElement = document.createElement('script');
scriptElement.src = 'URL TO SCRIPT';
scriptElement.onload = resolve;
document.body.appendChild(scriptElement);
});

Styles:

return new Promise((resolve, reject) => {
const styleElement = document.createElement('link');
styleElement.href = styleUrl;
styleElement.onload = resolve;
document.head.appendChild(styleElement);
});

NB: If you enable caching for your web app, only the initial load will take some noticeable time, subsequent loads will use the cached script, and will be much faster.

Separating Dev and Prod Environment on Firebase

Maina Wycliffe — Sat, 16 Feb 2019 05:24:48 +0300

It is common for developers to setup multiple environments for our application. This usually include a development/staging and production environment. This gives us the freedom to experiment with our development/staging environment, without messing with the production environment. Only after thorough testing do we deploy to production.

On top of that, the staging environment can be used to demonstrate and test new features before deploying them to production. Think of it like the Windows Insider Program, where testers (Insiders) get new features beforehand to test and provide feedback. For instance, you can push changes to a staging environment to show your client new features. This enables you to collect their feedback and approval before deployment to production.

We are going to use multiple firebase projects for a multi-environment setup. This is because we want to isolate everything i.e. functions, cloud Firestore etc. in each environment. Ensuring that changes we make on development/staging don’t affect the production environment – or in this case firebase project.

This way, we can develop our application while knowing that all the changes we make will not break our production application. Then, once satisfied with our work, we can safely deploy to our production application.

NB: We are going to be using Angular, but with some minor changes, this will work with any client app – frontend or mobile.

Getting Started

We are going to start by creating two new firebase projects. One for production and the other for both development and staging purposes. We are using one for both development and staging to keep things simple. If you already have an existing project, you can just add another, with an appropriate name.

Once you have created your projects, copy the configs for web from both of your firebase projects. They should look like this:

var config = {
apiKey: '<API_KEY>',
authDomain: '<PROJECT_ID>.firebaseapp.com',
databaseURL: 'https://<DATABASE_NAME>.firebaseio.com',
projectId: '<PROJECT_ID>',
storageBucket: '<BUCKET>.appspot.com',
messagingSenderId: '<SENDER_ID>'
};

Next, inside our Angular project, we need to add the above firebase configs, to our angular environment files. You can learn more about configuring Angular deployments environments here. But in a nutshell, by default, angular provides two environment files, located inside the environment directory under the src directory of your angular project. During compilation, Angular will replace the default environment file with the production, when the --prod flag is used.

Add the configurations from your dev/staging firebase project to environment.ts. And those from you production firebase project to environment.prod.ts:

// environment.ts
// configurations for dev/staging firebase projects

export const environment = {
production: false,
firebase: {
apiKey: '<API_KEY>',
authDomain: '<PROJECT_ID>.firebaseapp.com',
databaseURL: 'https://<DATABASE_NAME>.firebaseio.com',
projectId: '<PROJECT_ID>',
storageBucket: '<BUCKET>.appspot.com',
messagingSenderId: '<SENDER_ID>'
}
};

// environment.prod.ts
// configurations for production firebase projects

export const environment = {
production: true,
firebase: {
apiKey: '<API_KEY>',
authDomain: '<PROJECT_ID>.firebaseapp.com',
databaseURL: 'https://<DATABASE_NAME>.firebaseio.com',
projectId: '<PROJECT_ID>',
storageBucket: '<BUCKET>.appspot.com',
messagingSenderId: '<SENDER_ID>'
}
};

Next, go ahead and setup your angular project with firebase using AngularFire2.

First install both AngularFire2 and Firebase into your Angular project if you haven’t yet.

$ npm install @angular/fire firebase

$ yarn add @angular/fire firebase

And then import AngularFireModule in your app module. (If you are using lazy loading, import it to a feature/shared module instead).

// imports
@NgModule({
imports: [
BrowserModule,
AngularFireModule.initializeApp(environment.firebase)
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}

Next, let’s setup firebase inside our project so that we can use both of our projects together.

Setting up Firebase for our Project

First, we are going to initialize firebase project. Make sure you have Firebase CLI installed globally. If you haven’t, you can do so by following the instructions here.

Then, initialize firebase for the Angular project by running firebase init at the root of our angular workspace.

$ firebase init

When prompted for the firebase project to use, select the development/staging one. Then, answer the next prompts that follow up appropriately. The project that you selected above is known has an alias of default. This will become clear once we add a second firebase project.

Then, we need to add a second project, on top of the project which we added during initialization. Fortunately, Firebase CLI provides a way of doing that, using the firebase use commands. We can add a second firebase project by using the firebase use --add.

$ firebase use --add

When you run the above command, Firebase CLI will prompt you to select a second project. And then will prompt you to enter an ALIAS for the project. Select the project you created for production purpose and use prod as the ALIAS of the second project.

Please note that we have two firebase projects setup, one known as the default, for dev/staging and the other one prod for production. If you ran firebase deploy at this point, firebase will deploy to the default firebase project. To deploy to the production firebase project, there are two methods:

The first method is to use the firebase use <alias> command to switch the firebase project to deploy to, followed by the firebase deploy command:

$ firebase use default
$ firebase use prod

And the second method is to use the -P flag to specify the firebase project to deploy to when deploying:

$ firebase deploy -P default
$ firebase deploy -P prod

NB: If you forget to specify the -P flag, firebase CLI will deploy to the firebase project set using firebase use <alias> command.

With that, you should be able to easily deploy your app to the appropriate firebase project, giving you a nice separation of deployment environments.

What about Firebase Functions?

If you are using callable functions, no modifications are necessary as they are dictated by the firebase configs for your project. But, if you are using http firebase functions, the http endpoint for the functions is going to vary based on the firebase project you are targeting.

The good thing is you can solve this by using angular environment variables. You can add the functions http endpoint for each firebase project, inside the appropriate environment file. I.e. For production firebase function, add the http endpoint to the environment.prod.ts and the same goes for dev/staging.

// other environment variabes
firebase: {
// other firebase configs
 functions: {
Function1: 'Function EndPoint';
}
}

And then, you can use the above firebase function end point as follows:

const url = environment.firebase.functions.Function1;

Hosting Multiple Sites Per Project

You might also want to use multi-site hosting in Firebase. This is quite useful if you wanted to have a client and admin site for your app. The best way to achieve this in Angular is using Angular Workspaces, which enables you to have more than one app in your angular project. You can learn more about Angular workspaces here.

Assuming you have your second site ready, go ahead and add a second hosting site for each of your firebase projects – dev/staging and production. You can follow the instructions here which explain everything in details. Please note that you will have to switch to a paid firebase plan for you to be able to do this, I suggest using pay as you go. Proceed at your own discretion.

Please note that, each firebase site is unique across all firebase account, since the site subdomain, is accessible over the internet. As such, the name of your sites can not be re-used across your firebase projects. Therefore, to identify which site to deploy to, Firebase CLI uses targets, which are a lot like aliases for firebase projects above.

By using targets, we can deploy to the correct site on firebase hosting despite their unique name, in each of our firebase project. First, switch to the firebase project you want to setup, using the firebase use <alias> command.

And then, use the command below, to link a target name to a site name. The site name is the subdomain of the site, a unique identify across all firebase projects.

$ firebase target:apply hosting target-name site-name

For instance, if you had a client and admin sites, then it would look something like this:

$ firebase use default

Then:

$ firebase target:apply hosting client client-dev-site-name
$ firebase target:apply hosting admin admin-dev-site-name

You will also have to do the same for the second firebase project, switch to it and repeat the above process. Ensuring that you change the name of the site appropriately.

$ firebase use prod

Then:

$ firebase target:apply hosting client client-prod-site-name
$ firebase target:apply hosting admin admin-prod-site-name

NB: As of the writing this post, site and target names with hyphen (-) case do not work as expected, please avoid that for now.

In a nutshell, we are telling Firebase CLI to use targets client and admin, to target the corresponding site inside the firebase project we are using. For instance, when deploying to production, Firebase CLI will use the target to identify the subdomain of the site to deploy to. The same also applies when deploying to dev/staging firebase project.

You can now deploy your angular app as shown earlier, by using the -P flag or switching between the firebase projects:

$ firebase deploy -P default
$ firebase deploy -P prod

$ firebase use default
$ firebase deploy
$ firebase use prod
$ firebase deploy

NB: You can use all the firebase deploy flags like --only or --except as you normally would in any other firebase project.

TIP

You can use NPM scripts to deploy to the appropriate firebase project smoothly.

// package.json
"scripts": {
// ...
"deploy:dev": "firebase use staging && ng build --aot && firebase deploy",
"deploy:prod": "firebase use default && ng build --prod && firebase deploy"
},

Each of the above script will change to the appropriate firebase project, build your angular app and deploy it, alongside all other firebase services you have setup.

And then you can easily deploy using the following command:

For production:

$ npm run deploy:prod

For development/staging:

$ npm run deploy:dev

Changing Angular Material Form Field Appearance

Maina Wycliffe — Mon, 04 Feb 2019 01:20:33 +0300

Material design has been with us for the last few years. The material guidelines spec sheet, found here, has evolved since the original design, on release. This can be seen in various Google products, as they continue updating their products according to the updated spec sheet.

Angular 2 Material may be slightly behind the latest material design specification, but it’s catching up. In this post, we are going to look at how you can change the default appearance of Angular Material Form Field Component.

But first, let’s see where we are coming from.

Some History of Material Form Field (Text Field) Appearance

When the material design guidelines were initially released, the text field appearance looked something like this:

This is known as legacy appearance, then, later it was given an update (mainly under the hood) in what is called as standard appearance. And that looks like this:

I know, the two are largely indistinguishable. Then, latter, two more appearances were introduced - the outline and fill appearance. Here are some examples on what they look like:

And then they finally did away with the first two appearances – Legacy and Standard Appearance. So, as of today, we only have two appearances – outline and fill appearance.

Enough with history, let’s go back to Angular Material. If you have updated to the latest version of Angular Material, you will note that nothing has changed in your material form field controls. Why? This is because, to use the new form field appearance, you have to specify which appearance to use.

NB: By default, everything stays as it were in older versions of Angular Material. This may change in the future though.

There are two main approaches with this. The first is to define the appearance for each individual form field component. And the second option is to set a default appearance to apply to all material form field components in your app.

Let’s look at the first method:

Individual Material Form Field Component Appearance

This is quite simple to achieve, as all you have to do is specify the appearance property/attribute of the material form field component.

<!-- setting outline form field appearance -->
<mat-form-field appearance="outline">
<mat-label>Input Label </mat-label>
<input matInput placeholder="Input placeholder" />
</mat-form-field>
<!-- setting fill form field appearance -->
<mat-form-field appearance="fill">
<mat-label>Input Label </mat-label>
<input matInput placeholder="Input placeholder" />
</mat-form-field>

NB: You must specify the label of the material form field component. This is unlike the standard and legacy appearance which used the placeholder as a label when the label is not specified.

You can also set the appearance to either legacy and standard appearance, since Angular Material has not dropped support for both.

<!-- setting standard form field appearance -->
<mat-form-field appearance="standard">
<mat-label>Input Label </mat-label>
<input matInput placeholder="Input placeholder" />
</mat-form-field>

Setting the Default Appearance

In the first step, we were setting form field appearance to individual form field components. This can be a lot of work, for instance, if you wanted to switch from one appearance to another for all your material form fields.

Another option is to set the default form field component appearance, then use the above method to change individual form field to your preference. This way, whenever you don’t specify appearance attribute (property), then the default is used. To achieve this, we are going to use token injection (MAT_FORM_FIELD_DEFAULT_OPTIONS) to set the default form field appearance.

First, let’s define our appearance constant of type MatFormFieldDefaultOptions which will contain default appearance. In our case, we will be setting our form field appearance as outline.

const appearance: MatFormFieldDefaultOptions = {
appearance: 'outline'
};

Then, inside our array of providers, we need to provide MAT_FORM_FIELD_DEFAULT_OPTIONS and set the value to appearance constant we created above:

// ... imports above
@NgModule({
declarations: [
//... Components, Pipes, Directives etc
 ],
imports: [
BrowserModule
// ... Imports like Material Form Fiel Module
 ],
providers: [
{
provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
useValue: appearance
}
// ... other providers like services
 ],
bootstrap: [AppComponent]
})
export class AppModule {}

And that’s it, all your material form field components should be switched to outline form field appearance. You can now use the first method to set form field appearance for individual form field control.

NB: You can also use this token injection token method to set the default form field appearance on an individual component too, as illustrated here.

// ... imports

@Component({
selector: 'app-fill-appearance-default',
templateUrl: './fill-appearance-default.component.html',
styleUrls: ['./fill-appearance-default.component.css'],
providers: [
{
provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
useValue: appearance
}
]
})
export class FillAppearanceDefaultComponent implements OnInit {
// ... components methods and properties
}

Source Code and Demo

You can find the above source code here and a demo of all supported material form field appearance here.

Using OS Environment Variables in Angular (with Docker)

Maina Wycliffe — Sun, 13 Jan 2019 13:39:13 +0000

Angular has its way of handling different target environments, through angular environments files – which you can learn more about here. The issue with this approach is that it requires you to commit keys and configuration to your version control. This is not a big problem since it’s not advisable have any sensitive data in your angular source code.

However, I find it important to keep those keys and configurations outside the source control. This makes it easier to manage keys and configurations for different environments, without requiring you to modify the source code to make any changes. As you might have guessed from the title of this post, we will be using docker and OS Environment variables to pass some keys to Angular CLI, through webpack. Why OS Environment Variables? Mainly because they are platform agnostic, you can use them with the platforms of your choice. And also they are very easy to work with.

How it works?

The basic concept here is rather simple. For the purpose of this post, we are going to set a few environment variables, inside our dockerfile. Then, Webpack is going to read them, and pass them to our angular app during build time. Ideally though, you don’t want to set the variables in your dockerfile, but rather somewhere else like a .env file. Then, during docker build, retrieve the configurations and set them to environment variables.

If they are stored somewhere else, like let’s say an S3 Bucket, then you can perform the extra step of fetching them and setting them up. This can be achieved easily via multi-stage build in dockerfile. To build our angular app for deployment using docker, we are going to use docker multi-stage build.

This will result into an image which is smaller – which reduces our attack surface area. I won’t go into details about this, but I wrote another post explaining everything which you can find here. To make everything easy, we will use OS Environment Variables to configure production environment only – environment.prod.ts.

This is because, for dev environment, I am assuming that you will be relying mainly on ng serve, which is out of scope for this post. That will be covered in a different post latter this week. So, without further ado, let’s get started:

Getting Started

Assuming you already have your Angular project setup, First, we are going to install @angular-builders/custom-webpack as a dev dependency. In a nutshell, this allows us to customize build configuration without ejecting our angular project.

yarn add --dev @angular-builders/custom-webpack

npm install -D @angular-builders/custom-webpack

Configuring Angular

Next, we are going to modify our angular configurations – angular.json – to use the new builder(@angular-builders/custom-webpack:browser) instead of the default angular one (@angular-devkit/build-angular:browser). And then, under options, we are also going to add a customWebpackConfig option with a path pointing to custom-webpack.config.js file as shown below.

"projects": {
    "name-of-the-project": {
      //...
      "architect": {
        "build": {
          "builder":"@angular-builders/custom-webpack:browser"_,
          "options": {
            "customWebpackConfig": {
"path":"custom-webpack.config.js"
},
            //...
        //...
    }
}

NB: We have changed the default angular builder from @angular-devkit/build-angular:browser to @angular-builders/custom-webpack:browser.

Then, we are going to create our custom-webpack.config.js file – which we referenced above – at the root of our Angular Workspace. And then add the following content, to retrieve OS Environment Variables and pass them to our builder.

const webpack = require('webpack');
module.exports = {
plugins: [
new webpack.DefinePlugin({
$ENV: {
ENVIRONMENT: JSON.stringify(process.env.ENVIRONMENT),
SomeAPIKey: JSON.stringify(process.env.SomeAPIKey),
SomeOtherAPIKey: JSON.stringify(process.env.SomeOtherAPIKey)
}
})
]
};

In a nutshell, we are creating a webpack plugin. And then, we are reading the OS environment variables and passing them to Angular, via webpack. We are grouping all our environment variables, under $ENV variable, so that we can simply access them like this: $ENV.ENVIRONMENT or $ENV.SomeAPIKey inside our angular app. In this case, we have 3 environment variables: Environment, SomeAPIKey and SomeOtherAPIKey.

Using OS Environment Variables in Angular

First, we are going to add some typings, so that we can reference to our $ENV variable from webpack above within our Angular app. First, let’s create a typing.d.ts file inside your src directory at the root of your workspace and add the following content.

declare var $ENV: Env;
interface Env {
ENVIRONMENT: string;
SomeAPIKey: string;
SomeOtherAPIKey: string;
}

In a nutshell, we are declaring a global variable $ENV of type Env interface. Inside the Env interface, we are adding fields that we expect to be passed by our webpack plugin that we created in the previous step.

NB: You can rename $ENV to a variable of your choice. Make sure to change typings.d.ts and custom-webpack.config.js file appropriately.

Then, inside the our environment.prod.ts, we need to read the OS environment variables passed to our application, into variables we can use, within our angular application. This can be done like this: $ENV.ENVIRONMENT – so that our environment.prod.ts would like this:

export const environment = {
production: true,
environment: $ENV.ENVIRONMENT,
APIKeys: {
SomeAPIKey: $ENV.SomeAPIKey,
SomeOtherAPIKey: $ENV.SomeOtherAPIKey
}
};

Then, inside our environment.ts file – the one use when using ng serve or build without production – we need to add the same keys but with static variables.

export const environment = {
production: false,
environment: 'development',
APIKeys: {
SomeAPIKey: 'DEV API Key',
SomeOtherAPIKey: 'DEV API Key 2'
}
};

Now, your OS Environment variables are accessible throughout your application. They can be used just like any other angular environment variables inside your application.

export class AppComponent {
public environment = environment.environment;
public SomeAPIKey = environment.APIKeys.SomeAPIKey;
public SomeOtherAPIKey = environment.APIKeys.SomeOtherAPIKey;
}

The Dockerfile

Inside our dockerfile, we are going to be setting environment variables which will be picked up by webpack. This environment variables need to be set at the builder stage of our docker multi-stage build.

# STAGE 1
FROM node:10.15.0 as builder
...
# SET ENVIRONMENT VARIABLES
ENV ENVIRONMENT=production1
ENV SomeAPIKey="This is not an API Key"
ENV SomeOtherAPIKey="This is not another API Key"
...
RUN yarn global add @angular/cli@latest
...
RUN yarn install
...
RUN ng build --prod
...
# STAGE 2
...

NB: You can find the complete dockerfile file here, with comments on each step.

Like I said (wrote I guess) at the beginning, the values for this environment variables can come from a variety of sources. You can use docker-compose to pass a .env file, which you can learn more about here. This can also be retrieved from a cloud storage service AWS S3 or GCP Cloud Storage either in the builder stage or another stage prior to builder.

Source Code

You can find the source code for this post here.

Golang – Building Small Docker Images

Maina Wycliffe — Fri, 04 Jan 2019 17:33:38 +0000

In this post, we are going to see how we can reduce the size of our final docker image size for our golang app. To achieve this, we are going to be using the scratch docker image. This is going to reduce the size of the final image by over 95%.

Why? By reducing the size of our final docker image, we are reducing the attack surface area. This means that attackers have less libraries, tools to exploit in our docker image. For this to be possible, we will need to statically compile our go application, so that it doesn’t need any external libraries.

To achieve this, we are going to use two stages to build our final docker image. In the first stage, we are going to use the official image for Golang, to statically compile our go application. Then, in the second stage, we will copy our statically compiled binaries from the first stage. To get started, we are going to create a Dockerfile at the root of our project. We are going to name it scratch.dockerfile – feel free to change the filename, if you wish to.

NB: If you are new to docker and containers in general, I suggest you start by reading the following post here for the basics. You can also learn how to get started with docker here.

Demo Application

In order to make a meaningful demo, I needed a barebone Golang application. Therefore, I used the basic example from Gin Web Framework which can be found here. I didn’t make any modification to the above code. I am confident enough you can replace it with your own custom code, without any modifications.

Stage 1 – Building the Golang Application

In this stage, we are going to compile our go application statically. But first things first, inside our dockerfile, we will start by setting the base image for docker. We will be using the latest available image for Golang; hence no tag. We will also name our stage as builder, this makes it easier to refer to it in the next stage.

FROM golang as builder

Next, we are going to change our working directory, to the directory in which we will build our application. I recommend using the same structure as your dev environment, from the GOPATH. For the Golang images, the GOPATH is /go. This will ensure that our go application behaves the same as it does in our dev environment.

WORKDIR /go/src/github.com/coding-latte/golang-docker-multistage-build-demo

Next, let’s copy our projects files, and install our projects dependencies and build our go application.

...
COPY . .
RUN go get .
RUN CGO_ENABLED=0 GOOS=linux go build -a -installsuffix cgo -o app .
...

TIP: If you are using go modules, I recommend copying the project code in a directory outside the GOPATH (/go/src). This is because, once you put it inside the GOPATH, go modules will be disabled. This may cause your application to break.

...
WORKDIR /app/project-name
COPY . .
...

Stage 2 – Deployment Image

In this stage, we are going to build the image which we will be deploying. So, let’s set our base image as scratch – FROM scratch. Naming the stage is not necessary since it’s the last stage in our multi-stage build.

...
FROM scratch
...

Next, we are going to copy ca-certificates and compiled Golang static binaries from stage one – builder. First, let’s copy the ca-certificates, this is important if you will be using SSL/TLS to access your application. Otherwise you can skip this one if your app is not using SSL/TLS.

...
COPY --from=builder /etc/ssl/certs/ca-certificates.crt /etc/ssl/certs/ca-certificates.crt
...

Then, change the working directory to bin (or any other name of your choice), and copy the compiled binaries to that directory:

...
WORKDIR /bin
COPY --from=builder /go/github.com/coding-latte/golang-docker-multistage-build-demo/app .
...

And finally, set our go app to be executed when the container starts and expose port 8080.

...
CMD ["./app"]
EXPOSE 8080
...

If your app is using another port, replace port 8080 with that port. And if it’s using multiple ports, separate them with a single whitespace.

NB: You can find the complete dockerfile here. And if you would rather use alpine linux docker image instead of scratch, you can find the corresponding dockerfile here.

Building the Docker Image

We can now go ahead and build our docker image:

docker build --rm -f "**scratch.dockerfile**" -t demo:latest .

NB: If you are not using scratch.dockerfile as the name of your dockerfile, replace that with correct name and path in the above command. You can learn more about building docker images here.

So, our final docker image size when using scratch docker image is 15.5MB, as compared to 844MB when using official Golang docker image. If you used alpine image instead of scratch, you can add just an extra 5MB on top of the scratch final size, where you will get about 20MB. This is still a huge size reduction from the official docker image for golang.

Source Code

You can find the source code for this post here.

Creating a Filter Method for Angular Async Pipe

Maina Wycliffe — Thu, 13 Dec 2018 16:43:10 +0000

In a previous post earlier this week, we looked at how we can handle errors when using Angular Async Pipe. In this post, we are going to build a simple filter method for Angular Async Pipe.

We are going to use a custom pipe to filter results, then pass an observable back to the async pipe for subscription and rendering of the results. We will be simulating a call to a backend, where you take a search term and put together a HTTP request.

And then receive the results and return them to the caller. Since we don’t have a backend, we will be using a static list of countries, which we will filter and return matching countries. We will also be adding a delay of two seconds, to simulate calls to a backend. During the 2 seconds delay, we are going to show a loading animation or message.

Getting Started

As always, we will start by creating a new Angular project using Angular CLI:

$ ng new angular-pipe-filter

For the UI, we will be using bootstrap, so let’s install it and set it up. Feel free to use the UI Library of your choice.

$ yarn add bootstrap
// or with npm
$ npm install bootstrap

And then, import Bootstrap CSS into your angular project, under your app style section in angular.json.

"styles": [
  "src/styles.scss",
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
],

And that’s it for our project setup.

Filter Service

In a nutshell, the service will take a countries object, convert it into an observable using the of RXJS operator, filter the resulting object and return the filtered object. Let’s start by generating our service, using Angular CLI:

$ ng generate service filter

This will generate a filter service inside the root of our app directory. Then, let’s add a method to filter and return an observable of list of countries.

filterCountries(filter?: string): Observable<Country[]> {
}

NB: Country is a typescript interface that has country name and code fields. The method takes a filter parameter, which is the phrase we will use to check if a country name has.

Then, inside the method, we need to start by converting the list of countries object, into an observable. And then we are going to pipe the resulting observable and add a delay of 200 seconds. After that, we shall then map the list of countries, and filter them by looping through each country and checking whether the country name contains the filter phrase.

return of(countries).pipe(
delay(2000),
map(c => {
// if filter is empty return all countries
 if (!filter) {
return c;
}
// search for specific countries_
 const filteredCountries: Country[] = [];
c.filter(function(country) {
if (country.name.toLowerCase().includes(filter.toLowerCase())) {
filteredCountries.push(country);
}
});
return filteredCountries;
})
);

NB: Ideally, all the filtering done in this method should be accomplished on the backend. The method should send a HTTP request query to and return the response as received or with minor modification.

You can find the complete code for the service here.

Filter Pipe

The pipe in this case, will act as a conduit between the component and the service. It will take in a filter term argument and pass it to the service and return the resulting observable. First, let’s generate a filter pipe:

$ ng generate pipe filter

This will generate a pipe – filter.pipe.ts – at the root of the app directory. Then, inside the constructor, we are going to inject the filter service we created above into our pipe.

constructor(private filterService: FilterService) {}

And then modify the transform method of our pipe, so that it returns an observable of our country. The transform method is also going to accept the current value to transform and the searchTerm as the second parameter. Then inside the method, we are going to return an observable of countries object (filtered) from our service:

transform(value: string, filterTerm: string): Observable<Country[]> {
  return this.filterService.filterCountries(filterTerm);
}

And that’s it for our pipe. You can learn more about pipes here.

Putting Everything Together

App (Feature) Module

First, inside our app module (or feature module), we are going to import the FormsModule. This is because we will be using NgModel for two-way binding with a filter input.

// ...
@NgModule({
declarations: [
/* ... */
],
imports: [
/* ... */
FormsModule
],
providers: [],
bootstrap: [
/* ... */
]
})
export class AppModule {}

Component Class

Next, inside our component class, we are going to add two properties. The first property is for our sfilter field – filterField. This is field where users will enter their search term. While the second property will be an observable for the list of countries - filterResults$.

public filterField;
public filterResults$: Observable<Country[]> = null;

And finally, we will add a method to check whether our filter results returned an empty list. This will enable us to show an error message when the country list is empty.

dataLength(data: Country[]) {
  return data.length > 0 ? true : false;
}

NB: You can also check whether the list of countries is empty at the filter service and throw an error at that point instead.

Component Template

And finally, to our template. First, we are going to need a container for our application:

<div class="container-fluid p-2">
<div class="col-md-12 col-lg-8 offset-lg-2 offset-md-0"></div>
</div>

Then, we are going to add a filter text input for users to enter the term to filter countries by:

<div class="col-12 form-group">
<label> Filter Countries </label>
<input type="text" [(ngModel)]="filterField" class="form-control" />
</div>

Then, we are going to use chain our pipe and angular async pipe to subscribe to observable returned by our custom pipe. When the request is yet to be resolved, we are going to show a loading message or animation.

NB: Please note, we are passing the filterField ngModel when using our filter pipe.

<ng-container *ngIf="(filterResults$ | filter: filterField) | async as data; else loading">
  <!-- code here -->
</div>
<ng-template #loading>
  <div class="col-12 text-center">
<!-- Loading ... --> 
</div>
</ng-template>

Then inside the tags, we shall check whether the list of countries is empty. If it’s empty, we are going to show an error, otherwise we shall loop over the list of countries.

<div class="col-12" *ngIf="dataLength(data); else error">
<div class="list-unstyled row">
<div
*ngFor="let x of data; let i = index"
class="list-item col-12 col-md-6 col-lg-4"
>
{{ i + 1 }} . {{ x.name | titlecase }}
</div>
</div>
</div>
<ng-template #error>
<div class="col-12">
<div class="alert alert-danger">
I could not find a country matching your filter criteria!
</div>
</div>
</ng-template>

Source Code and Demo

You can find the demo for this post here and the complete source code here.

Angular Async Pipe – How to Handle Errors

Maina Wycliffe — Tue, 11 Dec 2018 11:32:34 +0000

In this post, I am going to show you a very simple yet effective way of handling errors when using Async Pipe in Angular. If you are new to async pipe, it basically allows you to subscribe to observables and promises right inside your templates. Below is a simple example of how you can use Async Pipe in Angular.

<ng-container *ngIf="some_observable | async"></ng-container>

Async Pipe has two major advantages. First, since subscriptions are handled automatically, you don’t need to worry about unsubscribing to observables. That will also be handled automatically for you. And secondly, it works with OnPush change detection automatically out of the box. You can learn more about change detection in Angular here and about Async Pipe here.

In order to handle errors properly, we are going to use *ngIf with async pipe. Even when using *ngFor, we need to wrap it around an *ngIf container. This is because *ngIf provides else statement, allowing us to provide a template if the operation fails or the request is still in progress. This not only allows us to display an error message but also to show a loading indicator. Once the async operation has been resolved successfully, then the data object can be passed to the *ngFor loop for looping if it’s a list. Without further ado, let’s get started.

Getting Started

As always, we will start by creating a new angular project, using Angular CLI.

$  ng new ng-async-pipe-error-handling

Next, we need to install bootstrap for our User Interface, feel free to use your favorite package manager.

$  yarn add bootstrap
$ npm install bootstrap

And then, import Bootstrap CSS into your angular project, under your app style section in angular.json.

"styles": [
  "src/styles.scss",
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
],

That’s it for our project setup.

Catching Async Errors

First, we need to be able to determine when our async requests returns an error. To do this, in our component, we are going to have an error property, and set it to null.

public errorObject = null;

The type of the error object may vary depending on the type of request. For instance, if you are running a HTTP request, you might want to use HttpErrorResponse instead of any. Then, we will use the catchError RXJS operator, to tap into the observable. Then, we will set the errorObject to error we catch inside catchError operator.

this.errorObject = null;
this.asyncOps$ = asyncService.listOfCountries().pipe(
catchError(err => {
this.errorObject = err;
return throwError(err);
})
);

In simple terms, we are tapping into the response of the async request, then checking if there is any error. If an error is caught, we are setting a property of the component class with the error object. Then, inside our template, we will check whether this property is set. If set, we shall parse and display error, otherwise we shall just show a loading animation.

Displaying a Loading Animation or Error Message

Next, inside our template we are going to use async pipe to subscribe to the observable. But, we will use else statement, to show a different template, when the async request is in progress or fails.

<ng-container *ngIf="asyncOps$ | async as data; else loadingOrError">
<!-- code here -->
</ng-container>

The loadingOrError(ID) refers to a template which shall have a template for a loading animation or an error message.

<ng-template #loadingOrError> <!-- some code here --> </ng-template>

Inside the loadingOrError template, two possible messages can be displayed. The first one is a loading animation, indicating async request is in progress. And the second option shall display an error, in cases where async request is completed but with error. First, we shall check whether the error object is set. If it’s not set show a loading message or animation, otherwise show the error message.

<ng-container *ngIf="errorObject; else loading">
  <div class="col-12 text-center">
    <div class="alert alert-danger">
      {{ errorObject }}
    </div>
  </div>
</ng-container>
<ng-template #loading>
  <div class="col-12 text-center">
    Loading ...
  </div>
</ng-template>

Source Code

You can find the source code of this post here.

Entry Components in Angular - What are they?

Maina Wycliffe — Fri, 07 Dec 2018 12:14:59 +0000

In this post, we are going to look at Entry Components in Angular, what they are and why they even exist. In the simplest terms possible, an entry component in Angular is any component that is loaded by its class, not selector.

@Component({
selector: 'app-some-component', // <== component select tags
 templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppSomeComponent {
// <== Component Class
}

Normally, in angular, when loading a component, you use the component selector, inside the template. In the case of the above component, the selector is app-some-component and the class is AppSomeComponent. So, normally the above component would be loaded like this:

<app-some-component></app-some-component>

This sort of components are declared components and are added as an array inside the declarations section of the app or feature module. But from time to time, you may need to reference to a component by its class. A good example of this is when adding a component to your app router. You refer to the component by the class and not the selector.

const routes: Routes = [
  {
    path: '',
    component: ComponentClassName,
    children: []
  }
]

Entry components must be registered inside the app or feature module, under entryComponents section. But this does not apply to all components, Angular automatically registers some entry components for you. For instance, any component found in your routes will be registered by Angular CLI during compilation. Therefore, most developer deal with entry components without even realizing so.

Why do I need to register Entry Components

Normally, all components are declared inside the app or feature module under declarations. This applies to all components inside your project, whether they have been used or not. This is even before you consider components declared by third party libraries that you might not need in your project.

If all these unused components were to end up in the final app bundle, they would considerably increase its size. And remember, our goal is to have as small final bundle as possible. To work around this, Angular CLI tree shakes your app during build time. It removes all components that have not been referenced (declared) in your template.

Now, remember that an entry component is used or referenced by its class and not inside some other components template (at least most of the time). Without a list of entry components, Angular CLI would fail to include these components in the final bundle, hence breaking your application. Therefore, for most entry components, you need to register them under entryComponents array, in your app or feature module.

...
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [
    SomeEntryComponent
  ]
})
export class AppModule { }

NB: Commonly used entry components like routing and bootstrap components are automatically registered for us. It would be very painful if you had to keep track and (un)register them manually. If you forget to add an entry component, angular will show the an error message similar or close to this.

So, the next time you encounter such an error, just add it to the list of entry components to your module.

Conclusion

As you have seen in this post, entry components are overall a good thing. They make it possible to tree shake your app and reduce the final bundle size, without needing any optimization from the developer. Most developers rarely encounter them, because third party library register their own entry components, although not in all situations. For instance, dialog or modal libraries like Angular Material Dialog or ng-bootstrap modal, you are required to register referenced components as entry components. Hope this post helped you understand entry components much better. If you have a topic you would like to see me to cover, leave it in the comment section below.

Building a Simple Responsive App with Angular Flex Layout

Maina Wycliffe — Wed, 05 Dec 2018 04:48:36 +0000

In the last post, which you can find here, we introduced Angular Flex Layout. We looked at the APIs/Directives available to you as a developer and how you can use them. In this post, we are going to build on that foundation.

Our goal here is very simple, building a simple responsive card list, that will respond to different viewports. In this post, we are going to be using Angular 2 Material for the UI, but feel free to use a UI Library of your choice. Without further ado, let’s get started.

Getting Started

We will start by creating a new Angular Project, using Angular CLI ng new command.

$ ng new angular-flex-layout-demo

Then, we need to install Angular Flex Layout, Material and CDK (Content Development Kit) for this demo.

$ ng add @angular/material @angular/cdk

NB: ng add will install and setup Angular Material and CDK automatically.

$ yarn add @angular/flex-layout

After that, we are going to import FlexLayoutModule from Angular Flex Layout and MatCardModule, MatButtonModule from Angular Material inside our App Module.

// ...
import { FlexLayoutModule } from '@angular/flex-layout';
import { MatButtonModule, MatCardModule } from '@angular/material';
// ...

@NgModule({
declarations: [
/* ... */
],
imports: [
BrowserModule,
FlexLayoutModule,
MatButtonModule,
MatCardModule // ...
 ],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}

Now that we have set up our project, let’s move on to the next part, building a responsive card list UI.

Container for our Angular App

First, we are going to define the root container of our application. We are going to set the width to 100%, using fxFlex and then set the flex layout to column, using fxLayout. You can set the width to 100% by just adding fxFlex or by assigning it a value of 100% i.e. fxFlex="100%".

The column layout, set using fxLayout, forces all the children to be stacked vertically while inheriting the parent container width. We are also going to add a gap between our child elements of 10px using fxLayoutGap, so they don’t get too close to each other. Feel free to refer to the previous post here for what individual directives do.

<div fxFlex fxLayout="column" fxLayoutGap="10px" style="height:100vh">
<!-- content here -->
</div>

Building a Responsive Card User Interface

We will start by setting up a container for our cards. This is where we will define the relationship between the cards (child elements of the container) like the flow of the card – horizontally or vertically. Here, we need our elements to flow horizontally but wrap when they get to the end. So, in this case, we will use fxLayout="row wrap" instead of just row alone.

<div fxLayout="row wrap"><!-- card list here --></div>

Please note, we did not set the width because it will automatically inherit the width from the parent container which has a flex layout of column, so by default it is 100%. Next, let’s add some responsive cards. We can add the cards directly, but since we want a uniform padding of 5px around the card, and since there is no way of doing so with material cards component, we will wrap it around a container.

The card container will carry all the responsive properties. First, we need to set the width of the card based on the browser’s viewport, we will use fxFlex directive, followed by the breakpoint of the device viewport we are targeting, separated by a dot(.). For instance, for extra small devices (xs) fxFlex.xs="100" or for medium devices(md) fxFlex="33.3". And then, we need to set the layout (fxLayout) to column, ensuring the material card will fill the width.

<div
*ngFor="let card of cardList"
fxFlex="25"
fxFlex.md="33"
fxFlex.sm="50"
fxFlex.xs="100"
fxLayout="column"
style="padding: 5px;"
>
<!-- material card here -->
</div>

For breakpoints, you can refer to the table below:

NB: cardList is a property of our component, will a list of 10 cards, created ngOnInit method.

You can view the components class here for more details. This allows us to use *ngFor to loop over it creating 10 cards, or any number we wish to. Angular Material Card Component For our card, it will be just a normal card, nothing special about it, you can easily replace it with anything:

<mat-card>
<img mat-card-image [src]="card.imgSrc" />
<mat-card-title> {{ card.title }} </mat-card-title>
<mat-card-content> {{ card.description }} </mat-card-content>
<mat-card-footer>
<button fxFlex mat-flat-button color="primary">Do Something Button</button>
</mat-card-footer>
</mat-card>

Final Code

You can find the code for this post here.

Final Thoughts

In this post, we saw how we can build simple responsive layout using Angular Flex Layout. Hopefully, this gave you an idea on how you can integrate angular flex layout in your projects. In a future post, we are going to cover adaptive layouts design using Angular Flex Layout. If you have any topic suggestions or questions, feel free to leave them in the comment section below.

Angular Flex Layout – Introduction & Getting Started

Maina Wycliffe — Mon, 19 Nov 2018 02:10:07 +0000

In this post, I am going introduce and look at how you can get started with Angular Flex Layout. We will briefly introduce the APIs for Angular Flex Layout and look at how to add it to your project. Angular Flex Layout is a stand-alone library developed by the Angular Team for designing sophisticated layouts. If you have used Bootstrap before, this provides only the Layout (Grid) Component only.

This means that you can use it in combination with other UI frameworks not just Angular 2 Material. Unlike bootstrap though, it uses directives based API instead of CSS Classes. I find this to be more powerful and flexible compared to Bootstrap. Before we get started, please note that, this library is still in beta. Don’t let that stop you from using it though since it’s pretty stable and have used it in production before.

One more thing to note, browser support can be an issue, if your users are using older browsers such as IE. But, as it currently stands over 90% of users currently have browsers that supports CSS flexbox. Please note, this also affects Bootstrap 4 as both use CSS Flexbox. For older browser support, I would recommend older versions of Bootstrap.

Static Design APIs (Directives)

First, let’s walk over the essential APIs you need to be aware of to get started. This APIs are also known as static APIs. I am going to try and keep things simple and straight forward. We are going to divide this APIs into 3 groups, based on where and how they are used: The first group will cover APIs for containers – parent containers i.e. DIVs. While the second will cover APIs for container elements – html elements inside the container from the first group. And the third will cover APIs that can be applied on any element regardless of whether it’s a container or a container element.

NB: The Angular Flex Layout APIs are accessed through Angular directives.

Parent Containers

fxLayout

This directive allows you to determine how the child elements within the parent container relate to each other. There are 5 possible values: row, column, row-reverse, column-reverse and row wrap. Row dictates that all child elements are in a single row, doesn’t matter if they fit or don’t fit inside the parent container. And this is why we have row wrap, which allows elements to overwrap to the next line if they don’t fit in the current container. Column on the other hand, sets one item per row and that’s it. The default value is row.

Example:

<div fxLayout="row"></div>
<div fxLayout="row wrap"></div>
<div fxLayout="column"></div>

fxLayoutAlign

As the name suggests, this directive will define the alignment of the child elements within the container. It accepts one or two values, with the first value defining the main-axis alignment and second value cross-axis alignment. Possible values for main-axis alignment are: start, center, end, space-around, space-between. While possible values for cross-axis alignment are: start, center, end and stretch. Example:

fxLayoutAlign="center center"
<!--align center bother horizontally and
vertically. -->
fxLayoutAlign="center end"
<!-- align center horizontally and bottom
vertically. -->

NB: Main-axis and cross-axis vary based on the layout used. For instance, when using row for the layout, cross-axis is the vertical alignment and when using column for the layout, it becomes the horizontal alignment. You can learn more about cross-axis alignment here and main-axis alignment here.

fxLayoutGap

This directive defines the space between child elements within the container. The value can be given in px, % , vh or vw. There isn’t a lot to say about this specific directive.

Containers Elements/Children

fxFlex

This directive allows you to set the width of an element. You can use percentage, pixel or any other acceptable measurement unit. If you add it without any value (just fxFlex), it will fill the remaining width of the parent html element. This means that, if you had two elements within the same container, with the first having a fixed width of 100px, then the second element will occupy the remaining width. This means that, the width of the second container will always be 100% - 100px. The order of the elements doesn’t matter at all. And if you had multiple elements, with fxFlex only without a specific value, then the width is divided equally between the elements. This only applies to elements inside a container with a flex layout of row (or row wrap) not column. For columns, the default width of the elements within is 100% unless otherwise provided using this directive.

NB: if you don’t specify the unit of measure (i.e. px, vh, vw or %) it defaults to percentage point, so leaving it as 70, it will be translated as 70%.

fxFlexOffset

This sets the margin between the current html element and the last element within a fxLayout container. If it’s the first element, then it sets the distance between the border of the parent container and the start of the element. It accepts %, px, vh or vh for its values.

fxFill or fxFlexFill

This directive instructs a child html element to fill the height and the width of the parent contains.

fxFlexOrder

Defines the position of the current elements within a fxLayout container. It accepts only integers indicating the position of the current element among the other elements.

fxFlexAlign

This overrides the parents cross-axis alignment, set using fxLayoutAlign above, for an element within an fxLayout container. Something to note here, it doesn’t affect the main-axis alignment, it only affects the cross-axis alignment.

General usage APIs (Directives)

The following directives (APIs) can be use on any html element regardless of whether its container, container element or none.

fxHide and fxShow – These two directives basically allow you to hide or show the current html elements and all its children.
ngClass and ngStyles – These two directives allows you to set classes and styles to a html element. They are an extension of angular directives with the same names.
imgSrc – This directive is an extension of the native html src attribute for setting the source of the image html element.

What about Responsive Design?

In summary, the above directives (APIs) help you to define how elements behave and look like. In this section we are going to look at how you can use the above statics APIs together with Angular Flex Layout responsive APIs. Angular Flex Layout has a set of breakpoints predefined for responsive design, each of this breakpoint has name, known as alias and defines the minimum and maximum width of the breakpoint alias. It uses media Query to determine the width of the current viewport.

Here is a list of available breakpoints for Angular Flex Layout. Layout

To use the above breakpoints, you combine a static API with an alias, separated by a . (dot) as shown below:

fxLayout.md="row"

fxFlex.lt-lg="100%"

ngClass.xs="some-css-class"

imgSrc.gt-md="url-to-large-image" imgSrc="url-to-normal-size-image"
imgSrc.xs="url-to-very-small-img"

NB: That last example allows you to set the appropriate image based on the screen size. It uses gt-md alias to set a large image src for devices larger than medium, xs to set a small image src for extra small devices. For other devices that don’t fall in to the two categories, it uses the image source that is set without an alias. In this case, the image being used by the img element will vary based on the device viewport. This approach can be applied with any angular flex layout static API directive, not just the examples given above.

As shown above, this approach provides a very flexible and powerful to responsive design, allowing you to change flexbox layout, classes, styles, image src depending on the size of the viewport. This also has the advantage of being close to your component logic, you can use properties for some of these values instead of just static values. Or this is without touching any CSS at all. On top of that, it provides an opportunity for Adaptive Design, an improvement to responsive design, that I have discussed previously here.

Adding Angular Flex Layout to your Project

First, install Angular Flex Layout using your favorite package manager:


$ yarn add @angular/flex-layout
$ npm install @angular/flex-layout

And then import it to your app module:

// ...
import { FlexLayoutModule } from '@angular/flex-layout';
//...

@NgModule({
declarations: [AppComponent],
imports: [
// ...
 FlexLayoutModule // ...
 ],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}

Then, you can go ahead and start using the angular flex layout APIs inside your templates.

Final Thoughts

This post was just an introduction to Angular Flex Layout. In a follow up post in the future, we will cover comprehensive examples on using Angular Flex Layout for building a responsive web app. For the time being, you can go over the official documentation here for more material and examples on Angular Flex Layout.

Building a Wrapper for Responsive Design for Angular Flex Layout

Maina Wycliffe — Sun, 11 Nov 2018 15:05:16 +0000

Angular Flex Layout is designed to provide a comprehensive layout design using CSS Flexbox and Media Query. Unlike most other libraries, it doesn’t use CSS Classes but rather uses directives. It also makes it easy to manipulate DOM. On top of that, you can inject it into the component class, if you wanted to change code behavior based on the device width. You can learn more about Angular Flex Layout here.

While working with Angular Flex Layout, while powerful, your templates can get messy very quickly. This also leads a lot of copy-pasting. Let’s take a simple example, to build a responsive layout with 100% height, 70% width on large devices and 100% on small devices, and the content centered, you need the following code:

<div style="height: 100vh" fxFlex="100" fxLayout="row">
<div
fxFlex="70"
fxFlexOffset="15"
fxLayout="row"
fxLayoutAlign="center center"
fxFlex.lt-lg="100"
fxFlexOffset.lt-lg="0"
style="border: solid thin #000000;"
>
content here
</div>
</div>

For a small project, this is manageable, but as your project grows, it can escalate to messy and unmanageable very quickly. Imagine yourself in a situation where you need that exact same responsive design in multiple places. You can reduce the occurrences by nesting your project routes wisely, but that will only take you so far. And God forbid, you want to make some adjustment.

Our Goal

In this post, we are going to build a wrapper that will reduce the repetition of the above code to manageable level. The goal is simple, have a few wrappers for various responsive layouts scenarios inside your project. You could have a wrapper for forms, tables, cards etc. So, instead of writing all the above code every time, you can simplify it to the following:

<app-flex-layout-wrapper> <!-- HTML Content Here --> </app-flex-layout-wrapper>

This is easier to read, and the code is cleaner. But more importantly, it is very easy to adjust your layouts without going over a torn of code. On top of that, it allows you to maintain the format of your template. This builds on top of the concept of re-usable components in Angular. This is because these wrappers can be re-used across your project and without limitation.

Getting Started

We will start by building a new project in Angular, using Angular CLI.

$ ng new angular-flex-layout-wrapper-demo

Then, we are going to install Angular Flex Layout and Angular CDK.

$ yarn add @angular/flex-layout @angular/cdk
$ npm install @angular/flex-layout @angular/cdk

And then inside our app module, we are going to import FlexLayoutModule from Angular Flex Layout.

// ...
import { FlexLayoutModule } from '@angular/flex-layout';
// ...

@NgModule({
  declarations: [
// ...
 ],
  imports: [
    // ...
    FlexLayoutModule
   
  ]
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

And that’s it for our project setup. Let’s now build our wrapper.

Wrapper Component for our Responsive Layouts

If you look at our wrapper, you will notice we are using it just like a normal HTML element (DIVs, Ps). But if you have worked with Angular before, you know by default component don’t work like that. The content in between the component tags, is usually replaced by the component content once rendered. But in our case, we want this to feel like native html elements that we are already used to.

<app-flex-layout-wrapper>
<!-- we want to be able to any html content here -->
</app-flex-layout-wrapper>

To achieve this, we are going to use ng-content to define a slot within our wrapper component content to add content dynamically. The content in between the component tags, is then dynamically added in the defined location. Let’s build this now. First, let’s we need to generate a new component using Angular CLI.

$ ng generate component flex-layout-wrapper

And then inside our component template, we just need to define our responsive layout and then, a slot to dynamically project our content using ng-content:

<div style="height: 100vh" fxFlex="100" fxLayout="row">
<div
fxFlex="70"
fxFlexOffset="15"
fxLayout="row"
fxLayoutAlign="center center"
fxFlex.lt-lg="100"
fxFlexOffset.lt-lg="0"
style="border: solid thin #000000;"
>
<ng-content></ng-content>
<!-- Content will be projected here -->
</div>
</div>

Now, any content that we add in between our component selector tags, will be added in the section defined by ng-content inside our wrapper template. When this content is projected inside the template, it follows the constraints defined by the div containers which will act as its parent.

Final Thoughts

The above methods allows you to pre-define a set of wrappers or containers for your different layouts. This reduces code duplication and makes it easy to make changes and adjustments. On top of that, this leads to consistency in your project design. Inside the component tags, you can build your template just as you would in any other situation. And formatting by your text editor should not affected at all. Thank you for getting this far, if you are interested here are a few more posts covering Angular Flex Layout.

How to Build Custom Pipes in Angular

Maina Wycliffe — Tue, 06 Nov 2018 13:17:04 +0000

In simple terms, pipes allow us to write display value transformation right inside the template. Angular comes with stock or built in pipes to transform your values to what you want the user to see. For instance, the Date Pipe, allows you to change the date format and other aspects related to the date. To use a pipe inside the template, you use the pipe operator (|), the pipe on the right and the value on the left.

{{ dateValue | date }}

And you can pass arguments, such as the date format you wish to use or how you want a currency to be formatted.

{{ dateValue | date: format }}

And, you can chain multiple pipes if you wish, you just need to add the pipe operator after every pipe.

{{ value | pipe1 | pipe2 }}

The great thing about pipes is that they are applied to variables right before display and doesn’t require you to change the original value. Pipes make you code readable and re-usable, as compared to using components methods to transform method. This also makes it easier to track bugs and update if need arises. The built-in pipes are great, but can take you so far, now let’s see how we can build our own pipe.

Overview

Before we can get into the thick of it, let’s first go over what we are trying to achieve in this post. Let’s say you have a country code (ISO Standard) and wanted to transform that to either country name or currency used by the said country. This is a very simple pipe, but most pipes are mostly like this. Your list of countries is in this format:

CA: {
  name: 'Canada',
  native: 'Canada',
  phone: '1',
  continent: 'NA',
  capital: 'Ottawa',
  currency: 'CAD',
  languages: ['en', 'fr']
},

Given the country code, you might want to get the country name, currency or official language. One way to achieve this, is to build a service, then inject it into the component controller. And then create a method to call it from your template. This requires you to add at least several lines of code to both your template and component controller (class). But with a pipe, it’s a matter of calling the pipe and passing an argument of the field you want:

{{ 'CA' | countries:'currency' }}

With a single line of code, you can transform your country code to the country name, currency or capital city of the country you want.

Building our Custom Pipe

We will start by creating a new angular project using Angular CLI (Angular 7, but this will work with Angular 6, 5 and I am guessing 4). If you already have a project, you can skip this part out.

$ ng new pipes-demo

NB: If you are using Angular 7, you will be prompted to add routing and which style sheet to use, select no and CSS in each case. This is because of CLI Prompts introduced in Angular 7.

Next, let’s use Angular CLI to generate a pipe, we shall call the pipe countries.

$ ng generate pipe countries

If you open the newly created pipe, it will look like this:

...
@Pipe({
  name: 'countries'
})
export class CountriesPipe implements PipeTransform {
  transform(value: any, args?: any): any {
    return null;
  }
}

Inside the transform method of the class Countries Pipe, is where our logic will end up. We will start by renaming the methods parameters, from value and args to code and field. Then, we can simply get the country through the by code (Our list is keyed using country code) and the field we want just like any other array.

transform(code: string, field: string): any {
  if (code) {
    return CountriesList[code][field];
  }
  return null;
}

NB: CountriesList is an object containing list of countries.

You can add any amount of logic inside the transform method, that you would add inside components controller. For instance, you can filter an array that is not keyed:

const country = CountriesList.filter(country => {
if (country.code === value) {
return country;
}
});
return country[0][field];

Unlike component methods, a pipe can be used through your project without a lot of extra effort.

TIP: You can also inject services and other dependencies in your pipe to use them to transform your data, if need arises.

Using Pipes with Lazy Loading

If you are using lazy loading, the same limitation that apply to components apply to pipes. For instance, you cannot declare a custom pipe in more than one module. And a pipe must be declared in the module closest to the component you are using. To work around this, you need a shared module. This is where you will declare and export your pipe or pipes, among other directives and components. You can generate a module inside the project using the ng generate module command:

$ ng generate module pipes-module

And then declare your pipe and export it inside the module:

@NgModule({
declarations: [CountriesPipe],
imports: [CommonModule],
exports: [CountriesPipe]
})
export class PipesModuleModule {}

Now, you can just import the module in any lazy loaded module you want to use the pipes in.

@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, PipesModuleModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}

You can learn more about lazy loading in Angular here.

Angular Reactive Forms - Dynamic Form Fields using FormArray

Maina Wycliffe — Sat, 27 Oct 2018 12:06:28 +0000

In most cases, forms have constant form controls – remaining static throughout the lifetime of the form. But from time to time, you can find yourself in a situation where you would like to dynamically add or remove form controls. These form controls are added dynamically as result of user interaction. On top of that, you might also want to be able to validate data of the newly created forms. Therefore, having optional fields might not be an option.

In this post, we are going to look at how we can do this in Angular, in Reactive Forms using FormArray. We will be creating a simple angular app, for adding user profile. The user profile form will have the following fields: name, organization (optional) and variable contact information.

The contact information group will have a type of contact (email or phone number), label for the contact and the contact value. We also want to give our users the ability to add more contacts, so that a single profile can have multiple contacts. On top of that, since the type of contact can vary, we also want to change the validator of the contact value based on the selected type.

Getting Started

We will start by creating a new project using Angular CLI.

$ ng new angular-dynamic-form-fields-reactive-forms

Next, we need to install our dependencies. In this case, we will be using bootstrap, the only dependency we need.

$ npm install bootstrap
$ yarn add bootstrap

After installing bootstrap, import it to your angular project inside angular.json, in the style section.

"styles": [
  // ...
  "node_modules/bootstrap/scss/bootstrap.scss"
]

And finally, in your app module, import ReactiveFormsModule, which is the only import we need for this post.

@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, ReactiveFormsModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}

Now that we have setup our project, let’s build our demo application.

Building a Model for our Reactive Form

We will start by defining a base form group that defines our three form controls – name, organization and contacts. The name and organization form controls won’t change anything dynamically. On the other hand, the contacts form controls will be composed of an array of form groups, with individual form group having 3 form controls. To achieve this, we will be using FormArray, which accepts an array of Form Groups or Form Controls. We will be grouping the form controls for a single contact, under a single form group. Then this multiple form groups will be added into the FormArray. Each form group will contain three form controls: Contact Type, Label and Value. The value of the contact can either be a phone number or an email based on the contact type. First, import the necessary modules we require: FormBuilder, FormArray, FormGroup and Validators.

import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';

Then, let’s define two properties in our component class: form and contacts properties. The first holds our form model and the second holds our contacts forms array:


public form: FormGroup;
public contactList: FormArray;

Next, let’s define a method to create our contacts form group. The method will return the three form controls, inside a form group.

createContact(): FormGroup {
  return this.fb.group({
    type: ['email', Validators.compose([Validators.required])],
    name: [null, Validators.compose([Validators.required])],
    value: [null, Validators.compose([Validators.required, Validators.email])]
  });
}

And finally, let’s initialize our form, with a single contact as the initial contact. Then users can add more contacts as they wish.

ngOnInit() {
  this.form = this.fb.group({
    name: [null, Validators.compose([Validators.required])],
    organization: [null],
    contacts: this.fb.array([this.createContact()])
  });
// set contactlist to the form control containing contacts
  this.contactList = this.form.get('contacts') as FormArray;
}

Adding/Removing Form Controls Dynamically using FormArray

Since contact list is an array, it’s a simple matter of pushing new items to the array, just like a normal array. It doesn’t matter whether you are adding a form group, as is our case, or adding a form control, the process is the same.

// add a contact form group
addContact() {
  this.contactList.push(this.createContact());
}

The same goes for removing contacts from the contacts FormArray, it’s a normal array and all you need is the index. We will pass the index of the item we are removing as a parameter for the removeContact() method.


// remove contact from group
removeContact(index) {
  this.contactList.removeAt(index);
}

Changing Form Control Validators Dynamically

If you recall from the beginning, we also wanted to change the validation of the contact in the contacts group based on the type of contact. If it is an email, we validate against email only and if its phone, only against phone numbers. We are trying to avoid a situation where the type of value of the contact and the type of contact are not the same. But, first we need to create a method to get the form group we want, mainly to make our code more readable. We will call our method getContactsFormGroup(index) method and returns a form group.

getContactsFormGroup(index): FormGroup {
  this.contactList = this.form.get('contacts') as FormArray;
  const formGroup = this.contactList.controls[index] as FormGroup;
  return formGroup;
}

With the above method, instead of writing this in our code to get a contact form group controls value.

const formGroup = this.contactList.controls[index] as FormGroup;
const value = formGroup.controls['value'].value;

We only need to write only this:

this.getContactsFormGroup(index).controls['value'].value;

This makes our code a lot easier to read and follow, and we are using the same method inside the template for checking validation errors. Next, we need to add a method to change the validator for the value of the contact, when the type of the contact changes. We will call the method changedContactType(index) and will be triggered by the change event of the form control.

changedContactType(index) {
  let validators = null;
if (this.getContactsFormGroup(index).controls['type'].value === 'email') {
    validators = Validators.compose([Validators.required, Validators.email]);
  } else {
    validators = Validators.compose([
      Validators.required,
      Validators.pattern(new RegExp('^\\\+[0-9]?()[0-9](\d[0-9]{9})\$')) // pattern for validating international phone number
    ]);
  }
this.getContactsFormGroup(index).controls['value'].setValidators(validators);
// re-validate the inputs of the form control based on new validation
  this.getContactsFormGroup(index).controls['value'].updateValueAndValidity();
}

Building the Template for Our Form

In most parts, this will be a normal form until you get to rendering the FormArray section. Here, we are going to loop over the contacts FormArray, and render the form groups into a form for user to interact with. We start by defining a FormArray, the same way you define a form group or a form control inside the template. We will be using the formArrayName directive to indicate we are now rendering a FormArray in our template.

<div formArrayName="contacts"><!-- Loop Here --></div>

Then, let’s go ahead and loop over our contacts FormArray. To do that, we are going to first define a get method, inside our class to fetch the contact FormArray from the form group and typecast it, into a FormArray.

get contactFormGroup() {
  return this.form.get('contacts') as FormArray;
}

Then, we are going to simply loop over the contact FormArray returned by the above get method.

<div
class="col-6"
*ngFor="let contact of contactFormGroup.controls; let i = index;"
>
<div [formGroupName]="i" class="row">
<!-- Contacts Form controls Here -->
</div>
</div>

NB: We are using index as the name of the form group. Also, do not use track by method for this loop, as index changes when an item that’s not at the end gets removed. We want to the whole list to be re-rendered when an item is removed or added. This is because, when an item is removed in the middle, the indexes change, and so does our form groups names in the process.

Changing the Type of Contact

In the type of contact field, we are going to have a drop down where the user either selects email or phone. Then, we are going to listen to the changes to this drop down and trigger the method to change form control validation above:

<div class="form-group col-6">
<label>Type of Contact</label>
<select
(change)="changedContactType(i)"
class="form-control"
formControlName="type"
type="text"
>
<option value="email">Email</option>
<option value="phone">Phone</option>
</select>
</div>

Then, below our value of contact form control, we are going to check whether the form has all possible errors. Using the hasError() method.

<div class="form-group col-12">
<label>Email/Phone No.</label>
<input class="form-control" formControlName="value" type="text" />
<span
class="text-danger"
*ngIf="getContactsFormGroup(i).controls['value'].touched && getContactsFormGroup(i).controls['value'].hasError('required')"
>
Email/Phone no is required!
</span>
<span
class="text-danger"
*ngIf="getContactsFormGroup(i).controls['value'].touched && getContactsFormGroup(i).controls['value'].hasError('email')"
>
Email is not valid!
</span>
<span
class="text-danger"
*ngIf="getContactsFormGroup(i).controls['value'].touched && getContactsFormGroup(i).controls['value'].hasError('pattern')"
>
Phone no. is not valid!
</span>
</div>

Source Code and Demo

You can find the code for this project here and the demo here.

How to Modify the UI Based on User Role in Angular

Maina Wycliffe — Wed, 24 Oct 2018 21:29:15 +0000

In today’s post, we are going to see how to modify the User Interface (UI) based their user role. This is useful if you wish to display different UI Elements/Components based on the user role. While this is not a security measure, it has the potential to greatly enhance the User Experience (UX).

To achieve this, we will be using NGXS – a state management library which was built as an easy to user alternative to the popular NGRX. You can learn more about NGXS here. It will act as a single source of truth, where we can subscribe to changes to the user role and make changes to the UI Accordingly.

Ideally, you will want to read the user role from an authentication token – JWT or some other alternative. To keep things simple for this demo, we are going to just use a form, to allow us to change the user role quickly. I will also show you how to decode JWT tokens just in case you need to.

Getting Started

First, we will start by creating a new angular project.

$ ng new ngxs-role-based-authorization

Then, we are going install the packages we need for our project.

$ yarn add @ngxs/store @ngxs/storage-plugin
// or using npm
$ npm install @ngxs/store @ngxs/storage-plugin

We also need to install bootstrap for our UI.

$ npm install bootstrap
// or using yarn
$ yarn add bootstrap

Next, we need to import NGXS and the NGSX storage plugin into our app module:

import { NgxsStoragePluginModule } from '@ngxs/storage-plugin';
import { NgxsModule } from '@ngxs/store';
@NgModule({
declarations: [AppComponent],
imports: [
//...
 NgxsModule.forRoot([UserRoleState]),
NgxsStoragePluginModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}

And lastly, import bootstrap into our project, using the style section of the /angular.json.

// ...
"styles": [
  //...
  "node_modules/bootstrap/scss/bootstrap.scss"
]

Building an NGXS State

The easiest way to do this is to use NGXS CLI, which will scaffold a state for you, you can learn more about here. I wish they could use angular schematics though. But in this case, we will do this manually.

First, we need to create an action for our role, which we will use to change the role of our state. This is where we will pass the role of the current user. You might also want to pass other information to store regarding the user such as the name, email etc.

export class ChangeUserRoleAction {
static readonly type = '[UserRole] Add role';
constructor(public role: 'guest' | 'moderator' | 'admin') {}
}

Next, let’s create a model for our state. This is where we will add all fields we are going to store in our state. In our case, we just have role, but you can basically add any sort of data such name, email etc.

export class UserRoleStateModel {
public role: 'guest' | 'moderator' | 'admin';
}

And finally, let’s define our state.

@State<UserRoleStateModel>({
name: 'userRole'
})
export class UserRoleState {
//...
}

Next, inside our state class, let’s add a Selector method to get the role of the current user. We are going to pass the state model, so that we can access to values stored in the state.

@Selector()
static getCurrentUserRole(state: UserRoleStateModel) {
  return state.role;
}

And then, let’s add a method to set the current user role, passing the action class and state context:

@Action(ChangeUserRoleAction)
ChangeRole(ctx: StateContext<UserRoleStateModel>, action: ChangeUserRoleAction) {
  ctx.setState({ role: action.role });
}

You can put all the above inside a single file or divide it into multiple files – your choice.

Setting the Current User Role

Now that we have a state, let’s set our current user role. For our simple demo, you can set the current role of the user with a single line of code.

this.store.dispatch(new ChangeUserRoleAction(role));

NB: In the above line of code, we are dispatching an action, in this case to change the user role, to our store. You can learn more about NGXS Stores here.

If a user has to login to set the user role, you can decode the JWT to read the user role setting it up. First, we are going to install angular-jwt library using your favorite package manager:

$ npm install @auth0/angular-jwt
// or use yarn
$ yarn add @auth0/angular-jwt

And add it to your list of imports in the app module:

imports: [
// ...
 JwtModule.forRoot({})
];

Then in your service, import the jwtHelperService from the library we just installed above.

constructor(private jwtHelperService: JwtHelperService) {}

And finally, in your method, decode the JWT Token and return the user role:

getUserRole(token: string): string {
  const decodeToken = this.jwtHelperService.decodeToken(token);
  return decodeToken['role'];
}

And finally, you can store the new role as shown below:

this.store.dispatch(new ChangeUserRoleAction(role));

Subscribing to Changes to the User Role

Reading the current user roles is a straight forward matter. You can use the selectSnapshot method, which you can learn more about here. The method returns a raw value for use without subscribing.

this.store.selectSnapshot(UserRoleState.getCurrentUserRole);

But for this demo, we are going to subscribe to the changes that will occur. Take for instance, if you show a user a popup to sign in, you would like the UI to update accordingly based on the new user role without reloading the page.

We are going to use async pipe to subscribe to the user role and display and hide UI elements accordingly. First, inside our component class, we need an observable GetUserRole$ property. And then on component initialization, set the property to the observable that returns the current user role.

ngOnInit() {
  this.GetUserRole$ = this.store.select(UserRoleState.getCurrentUserRole);
}

And then inside the template, subscribe to checkUserRole$ observable using async pipe.

<ng-container *ngIf="checkUserRole$ | async as role"></ng-container>

Your role is accessible by the role variable from the template. You can use it any how you want to manipulate the UI of your app. For instance, you can use ngSwitch to show a role message like our demo project does.

<div [ngSwitch]="role">
<div *ngSwitchCase="'moderator'">Moderator Template</div>
<div *ngSwitchCase="'admin'">Admin Template</div>
<div *ngSwitchDefault>Guest Template (Default)</div>
</div>

NB: You can pass the role to your components to avoid subscribing to the state on multiple instances.

Source Code

You can find the source code of this demo here.

Final Thoughts

In this post, we saw how we can use NGXS to keep track of user role and manipulate the UI accordingly. I will be covering more topics related to NGXS in the future. Thank you for getting this far on this post. Here is another post you might be interested in - Role Based Authorization in Angular using Routes Guard.

Deploying Angular 6 and Above Apps to GitHub Pages

Maina Wycliffe — Sun, 21 Oct 2018 19:26:03 +0000

In this post, I am going to show you how to deploy angular apps to GitHub pages. You can think of GitHub pages as a free hosting platform that you can use to host client-based apps. You can host things like demos, portfolios, documentations etc. You can use it to host any client-side app as long as you comply to GitHub terms and conditions. You can Learn more about limitations of GitHub Pages here.

I am going to assume you already have an angular repository you wish to deploy to GitHub Pages. And are also familiar with the basics of Angular, Git and GitHub. You will need to clone the repository to your PC if you don’t have a local copy of the repository. There are two approaches for achieving this. In the first approach, we are going to do everything manually, while in the second approach we will rely on an NPM Package. Without further ado:

Deploying to GitHub Pages Manually

First, we need to build our angular app, but instead of using the usual build output path (dist/project-name), we want the output path at the root of angular cli workspace, in a directory called docs. We also need to specify the base URL for our angular app. The base URL will look something like this: https://USERNAME.github.io/REPOSITORY_NAME/, be sure to replace both the USERNAME and REPOSITORY_NAME with the appropriate names. So, our build command will now look like this:

ng build --prod --base-href https://USERNAME.github.io/REPOSITORY_NAME/ --output-path docs

If you look at the root of the angular workspace, there is a new directory, called docs, with the built application. The reason for not using the default build location (dist/project-name) is because GitHub Pages only allows you to set the source as either the root of your repo or the docs directory in the root of your repository.

And since we don’t want to mix up the project files and our build files, we chose the latter. Next, go ahead and commit the docs folder and its content and push the changes to your repository.

git push origin

And then head over to your repository on GitHub, and then to the Settings tabs and then scroll down to GitHub Pages section. Then under source, select “master branch /docs folder” as the source for your GitHub pages. And finally save the changes.

And that’s it. To view your GitHub Page, navigate to the URL for your GitHub Page which will look something like this: https://USERNAME.github.io/REPOSITORY_NAME/. Or just click on the new link that has been placed just above source.

Using an NPM Package to Deploy Github Pages

If you found the above process, a little bit hard to remember, you are not alone. Thank fully, there is a library that can automate most the steps above. This library is known as angular-cli-ghpages. This is a command line to help deploy angular project to GitHub Pages. The first step obviously is to install the library as a dev dependency, using your favorite package manager:

npm i angular-cli-ghpages --save-dev
yarn add --dev angular-cli-ghpages

Then, build your project. This time there is no need to change the output directory, but you need to set the base URL. The base URL will look like this: https://USERNAME.github.io/REPOSITORY_NAME/, be sure to change both the username and REPOSITORY_NAME appropriately. So, your build command will look like this:

ng build --prod --base-href [https://USERNAME.github.io/REPOSITORY_NAME/](https://USERNAME.github.io/REPOSITORY_NAME/)

After build completes, you just need to run the following command:

npx ngh --dir=dist/[PROJECT-NAME]

Where PROJECT-NAME is the name of angular project you are deploying. If you are using Angular 5 and below, run the command without the project-name:

npx ngh --dir=dist

And that’s it, the library will do everything including configuring the page option for you on GitHub. You can now visit your GitHub page url: https://USERNAME.github.io/REPOSITORY_NAME/ to see your deployed angular app.

Tip

You can shorten the build and deploy command using NPM scripts. Open your package.json and then, in your script section add the following script.

"scripts": {
    // ...
    "deploy": "ng b --prod --base-href https://mainawycliffe.github.io/angular-images-lazy-loading-demo/ && npx ngh --dir=dist/angular-images-lazy-loading-demo"
},

And now, you can build and deploy to GitHub Pages with a single command:

npm run deploy

Final Thoughts

There are other methods you can deploy your angular project on GitHub Pages. But this two are once am comfortable recommending. Personally, I prefer the second option as it easier and can be heavily automated as compared the first one. If you have a topic suggestion you would like me to cover, you can suggest in the comment section below or get in touch with me on Twitter: @mwycliffe_dev.

Angular CLI v7 – CLI Prompts and Generating Barebone Angular Project

Maina Wycliffe — Fri, 19 Oct 2018 18:15:07 +0000

Angular 7 was officially released this week, with lots of new features. Apart from being officially released, nothing else (feature wise) has changed since my last post on Angular 7. In this post, we will look at CLI Prompts and Generating a Minimal Project, some of the new features for Angular CLI 7. The first feature is, in my opinion, the most important feature for Angular CLI 7. The second one is kind of interesting. Of course, the new version of Angular CLI, has more than these two new features. Like it now supports Node JS 10 and Typescript 3.1, lots of bugs fixes and performance improvements. But today, let’s just focus on these two. So, without further ado:

CLI Prompts

Basically, when a user is performing common tasks, they get asked questions to help change the default options of the task. Before CLI Prompts, to change the default options, you needed to use command line flags to specify options. But with CLI Prompts, Angular CLI will prompt you with questions and options for you to answer. Of course, command line flags are still available for more advanced options and CLI Prompts are not meant to replace them. For instance, when creating a new app, using ng new, will prompt you with two options. The first option will prompt you on whether you want to add routing support. While the second option will ask you which stylesheet (CSS, SCSS, SASS etc.) you would like to use.

As of the release of Angular 7, this works with Angular Material, and am guessing other first party libraries and partners will support it too. The good news though, is that CLI Prompts are part of Angular Schematics. This means any library that supports Schematics, can integrate with CLI prompts.

CLI Prompts are useful to developers, as they help them discover features and configuration options organically. It reduces the number of ng command line flags you need to remember when performing simple tasks. For instance, I always forget to set default style sheet and to enable routing, when starting a new project. But with CLI Prompts, it’s refreshing that I don’t have to worry about forgetting to set those two options anymore.

Generating a Barebone Angular Project

This is one interesting feature, that kind of went under the radar. Basically, when creating a new angular application, when you add the –minimal, it will generate a barebone project. This means that, all testing NPM libraries will not be included in your project. The goal of the –minimal flag is to reduce the size of the initial angular project. This is important for students and developers who are tight on disk space. The feature is also controversial, since industry best practices recommend writing of tests, yet there is a sizable developer population that don’t write tests or see the need to. You can find the discussion for this feature here. Basically, to most of those developers, those packages are just getting in the way. Here is an example of what package.json looks like for a new project generated with the minimal flag.

Progressive Web Apps (PWAs) in Angular – Part 2

Maina Wycliffe — Thu, 18 Oct 2018 01:23:47 +0000

Google Chrome version 70 was released earlier this week. Among other features, it added support Progressive Web Apps (PWAs) on desktops. This give me an idea for this post where we are going to dive a little bit deeper into PWAs. If you are new to PWAs, please check my introduction to PWAs here. We will focus on two things:

How to check for new versions of your PWAs and
Prompting users to install your PWA

Without further ado:

Checking for New Versions

With PWAs, a lot of the static resources are cached on the client device. So, when you deploy a new version of your app, the users don’t see changes instantly like most web apps. It is therefore important to check for updates manually, download them and then prompt the user when there is a new version.

This would could display a button that when the user reloads the app, it reloads with the new version. If you have used some Google Webs Services such as Android Messages, you might have come across this. This allows you to download the newer version on the background, without interfering with the user experience. Once downloaded, it’s a matter of reloading the browser which will load the latest version. This is simple and almost instant, since all assets and resources have been downloaded and cached locally.

How to Check for New Updates

PWAs uses a Service Worker to cache most of the static resources, therefore you must use a service worker to check for updates. Service Worker provides a service that you can use to communicate between your app and the service worker. The service is called SwUpdate, and is used just like any other service.

To check for new updates, you first need to inject the SwUpdate service into your component or service:

constructor(private swUpdate: SwUpdate) {}

Then, you can check for new updates as follows.

checkForUpdates() {
  this.swUpdate.available.subscribe(event => {
    // prompt the user to reload the app now
    this.updateAvailable = true;
  });
}

The updateAvailable property, just display a button informing the user there is an update. You can also forcefully reload the browser at this point, which loads the new version. You probably don’t want to do this, because it could ruin the User experience.

reload() {
  window.location.reload();
}

Periodically Checking for New Updates

The above method checks for update once and is triggered by a button click (in this case). You don’t really want the user to be manually checking for updates, but you might want to periodically check for new updates. This can be achieved using the RXJS Interval method which will tell the service worker to check for new updates on interval.

interval(1000 * 60 * 60 * 2).subscribe(() => this.swUpdate.checkForUpdate());

NB: The above method uses RXJS Interval method to periodically check for updates every 2 hours. Time is provided to the interval method in milliseconds by default.

The checkForUpdate is strange though, it returns a promise but doesn’t indicate whether there is an update or not. So, to be safe, don’t reload when the method is resolved successfully. The good thing though is that, if there is an update available, the next time the user reloads the app, they will load the latest version.

Prompting Users to Install PWAs

Let’s get this out of the way first, browsers have the liberty on how to handle PWAs installs. That said, Google Chrome offers developers the ability to control how to handle PWAs installation. I did some research and experimentation and I could not find how to achieve the same in other browsers.

I will update this post as soon as the situation changes.

If you want to prompt users to install your PWA, you need to listen to beforeinstallprompt event. This event is triggered on every page reload, if the user has not installed your app. This works even after the user has uninstalled the application.

window.addEventListener('beforeinstallprompt', event => {
this.promptUserInstall();
});

For older version of Chrome (Chrome 67 and lower), you need to add preventDefault() to prevent chrome from showing the default install prompt, before users clicks on your custom install button.

event.preventDefault();

Next, you need to show a custom UI that will prompt the user to install the app.

promptUserInstall() {
  // show prompt here
}

And once the user clicks on the install button, you can then trigger Chrome to show Add App dialog.

this.deferedPrompt.userChoice.then(choiceResult => {
if (choiceResult.outcome === 'accepted') {
console.log('User accepted to install PWA');
} else {
console.log('User chose not to install PWA');
}
this.deferedPrompt = null;
});

NB: As of the time of writing this, this doesn’t trigger the install dialog on Chrome for Desktop. I tested it on current, beta and canary versions of Chrome without success. As a work around, you will have to provide instructions to install the PWA on the desktop version of Chrome. Fortunately, it is not hidden very far, and can easily be located on the menu, so a simple Gif would do.

Final Thoughts

As time passes, more and more browsers will continue offering standardized PWAs APIs. Hopefully, more and more browsers will support the BeforeInstallPromptEvent so that you can customize the prompt install button.

Thank you for getting this far on this post, I will update it as more information continues to get available for different browser support. If you are interested to learn how to use Service Workers to Optimize performance of your angular PWA here.

APP_INITIALIZER – Tapping into Initialization Process in Angular

Maina Wycliffe — Sun, 14 Oct 2018 11:09:20 +0000

In this post, we are going to look at how we can use APP_INITIALIZER in Angular. So, what exactly does APP_INITIALIZER do? The best way to answer that is by looking at my previous post, which can be found here. It was about angular environment variables being loaded remotely, instead of environment files which are built into the app. So, in this scenario, you might need to have access to those variables immediately the app starts. That’s what APP_INITIALIZER allows you to do, provide a function that will be executed during app initialization stage.

Angular will allow the functions to be executed to completion before rendering anything. It even gets better, if it encounters an error, the whole application will not load. This ensure that your remotely loaded configuration are available right from the start. You can use this to load anything you want to during the initialization stage, so it’s available right after the app starts. To show you how to tap into the initialization process, we are going to use a demo. In this demo, we will look at loading our configurations from the previous post to our angular application. So, without further ado, let’s get started:

Create a New Application

First, Let’s create a brand-new application using Angular CLI.

$ ng new angular-app-initializer-demo-app

And then generate a service to load our configurations:

$  ng generate service config

Next, let’s work on our newly created service to fetch and load our configurations.

Fetching Configurations

One thing to keep in mind before we can go any further, APP_INITIALIZER expects a promise not an observable. Don’t worry, we will still be able to use observables, but our return value must be a promise, otherwise it won’t work. Fortunately for us, RXJS provides a toPromise method to convert that observable to promise. So, our service is going to need one method for getting configurations:

getConfigs(): Promise<Object> { }

And one property for holding our configurations.

configurations: object = null;

Since we don’t have a backend, we will use RXJS of method to convert a simple array into an observable stream. You can easily fetch data using HTTP Client in Angular, just you normally would under any other service. Next, we are going to pipe to our observable and tap into the observable stream to set the configurations property to the returned value. Then convert the observable stream to a promise and return it.

getConfigs(): Promise<Object> {
  return of(dummyConfigs) // <== this could be a http request here
    .pipe(
      tap(config => {
        this.configurations = config;
      })
    )
    .toPromise();
}

Configuring APP_INITIALIZER

We are going to provide APP_INITIALIZER inside App Module, but this can be done in any other module like CoreModule. Before we can do that, we need to create a function to the method for getting our configuration. The function will accept our config service above, which we shall inject when providing APP_INITIALIZER. It will then call the method to get config and return the resulting promise.

export function loadConfigurations(configService: ConfigServiceService) {
return () => configService.getConfigs();
}

Next, let’s add our config service and provide APPINITIALIZER to our list of providers in the App Module. For the APP_INITIALIZER, first we have the provide property, where we indicated we are providing APPINITIALIZER. Then we indicate we are using factory (_useFactory property) and injecting our config service as a dependency for our factory (_deps property). We have also added a multi property, which indicates we can have multiple APP_INITIALIZERS and not just the one.

@NgModule({
  declarations: [
//...
 ],
  imports: [
//...
 ],
  providers: [
    ConfigServiceService,
    {
      provide: APP_INITIALIZER,
      useFactory: loadConfigurations
      deps: [ConfigServiceService], // dependancy
      multi: true
    }
  ],
  bootstrap: [ // ...
]
})

And basically, that’s it. If the promise is resolved successfully, your app should go ahead and load successfully, otherwise it will fail to initialize.

Word of Caution

You can do more complicated stuff but remember that your app won’t start until all sent promises are resolved. So, if you are doing to many things at once, you might impact the performance of your app negatively.

Source Code

You can find the complete source code for this post here.

A Better Approach to Environment Variables in Angular

Maina Wycliffe — Fri, 12 Oct 2018 10:43:43 +0000

Angular provides a default way to configure environment variables, which you can learn more about here. But in a nutshell, you have different environment files, where you store environment variables and during the build process, angular compiler will use the correct environment file to replace and the default environment variables.

So, if you are targeting production environment, angular will replace the default environment file with the production when you use the --prod flag. This works but has some shortcoming. Like for instance to change any of those configurations, you must rebuild and deploy the whole application. Would it be better if you could change some variables, such as API Keys dynamically without need to go through that process?

A Better Approach

The approach is rather simple, and it involves storing the data on the backend on an environment folder. Then during app initial stage or even initialization, you can load the configuration file (JSON) using a service. In this scenario, we will have different JSON files for different environments. We will then let the app load the appropriate configuration based on the environment it has been deployed in. To distinguish between different environment configurations, we are going to add a new environment name property under each of environment. If we have three environments, then we are going to have 3 environments files: environment.ts, environment.prod.ts and environment.staging.ts for each of our environments.

export const environment = {
  production: true,
  wpEndpoint: 'Some Endpoint',
  environment: 'staging', // environment name property
  ...
};

The same needs to be done for each of our other environment names:

// Production
...
environment: 'staging', // environment name property
...

// Development
...
environment: 'development', // environment name property
...

Now, we can call a http service to retrieve the json files containing that environments configurations, which we are storing in a directory on a server or AWS S3 bucket.

NB: Any sensitive API Keys should not be stored inside the frontend app. Instead have your backend call those APIs on behalf of the frontend. This ensures they remain private, out of reach from the public.

Loading the Configurations

With the environment name property, you can stitch together the URL to the correct configurations file.

const url = 'some-server-url' + environment.environment + '.json';

And then you can call the API Endpoint as shown below:

this.http.get(url).pipe(
map((res: Response) => {
return res.body;
})
);

NB: You can strongly type cast the results. This allows you to have easy access to the variables inside the JSON File just like a normal environment file. Allowing for intellisense when using Angular Language Service.

Now anytime you want to change configurations, you simply edit the JSON file containing the configuration of your environment. No need to build and deploy a new version of your application just for simple change. When to fetch this configuration is up to you. You can load them in the first component, just before anything else.

Another option is during app initialization, just before the app has started off. I prefer the last option as it means the configurations will be available to the app as when starts. You can learn more about this here.

Caching

While storing some of the configurations on the backend is a good idea. On the hand, retrieving them each time the app is loaded or reloaded is not a very good idea. You will need to implement some sort of local caching, I suggest using a Service Worker.

A local cache will do two things, first store a local record of the configuration for a specified period – an hour, 30 minutes etc. And secondly speed up your app as it eliminates network latency required while fetching the configurations. The good thing about using a service worker is you can use performance configuration.

This basically means that, it will only check for fresh content from the server after the specified cache period has expired. You can also use freshness settings, in this case it just checks whether there is new content and if not just loads from local cache. You can learn more about Service Workers here. And all without the need to implement your own caching system, just a few configurations. The only downside is browser support, which you can learn more about here.

Final Thoughts

This method is not perfect, but it provides a much better approach to environment variables. Of course, not every app is going to benefit from this and for a lot of apps out there, the default approach is still a better alternative.

It all depends with what your application does, if it relies with a lot of API keys to third party service, then dynamically changing them is not a bad idea. If your environment variables rarely change, and when they do change have to be tested before deployment, then the default approach works just fine.

Creating Reusable Components in Angular

Maina Wycliffe — Tue, 09 Oct 2018 11:41:22 +0000

In this post, we are going to look at tips you can use to make your components more reusable. Reusing components allows developers to avoid code duplication, which can introduce errors and bugs and are also hard to troubleshoot. Take for instance a shopping site, the product display component, whether the product is electronic or beverage, can be displayed using the same component.

So, it would make sense to make sure that this component can be re-used in multiple situations such as the homepage recommendation, product category listing, search listing and cart. Making it more aware of where it is being use and altering the behavior accordingly.

In such a case, any bug or error detected within the product itself becomes very easy to fix. This is because it’s a single component, rather than multiple components. In case of multiple components, each would have to be updated. For a small project, that might not be a problem but as the project grows, it becomes a nightmare to manage.

Avoid Creating Large Components

Having a single large component has several disadvantages, such as: It makes code hard to read, code can become very messy and they are not very re-usable. One way to know that your component is large is if the it has over 400 lines of code.

Another way, which I find mostly useful, is if you find yourself trying to replicate (copy - pasting) some section of the component into another component. This is when you should evaluate whether to break down a component. So that each component, ideally performs a single function.

For our shopping site above, this would be having one component for search, another for looping through the individual products and another for displaying individual products. The last two can be reused in the search section and to display checkout cart.

Another important thing to do, is to ask whether the logic inside the component class, can benefit by moving it either to a class or a service. Things like HTTP calls to API should be in their own services, making them available to more components that may need them in the future. Basically, any logic that might be used by more than one component, doesn’t belong inside the component.

Passing Data Between Components

When breaking down components into smaller components, you find that you will need to pass data between components. One such scenarios is when want to pass data such as product information to product display component from parent.

You might also want to be able pass back data and events to parent component for action. The easiest way to achieve this is using Output and Input Bindings for parent-child components and using a service for unrelated components. I won’t go into details of this in this post, but here are some useful learning resources you can use:

Component Interaction – angular.io
3 ways to communicate between Angular components - Miro Koczka
Sharing Data Between Angular Components - Four Methods – AngularFirebase.com

Directives and Pipes

You can also use directives and pipes to extract some functionality from components. Then the directives and pipes can be used in multiple components. You can have a directive to modify the behavior of a single button, in such a way that it behaves differently based on the situation.

For instance, when a product is being displayed inside the checkout cart, you need a remove button and not a buy button. With inbuild directives such as NgIf and NgSwitch, you can easily achieve this. You can also build your own directive to achieve different functionality for different scenarios.

Pipes on the other hand are great for transforming values for display. Angular has inbuilt pipes to alter text case, format dates, subscribe to observables etc. You can build your own pipes to do more than that.

A good example where a pipe might be very useful is when you have country or currency codes but want to transform into known recognizable names. You can either create a method in your component to do this, but I find it better to use pipes in such circumstances. This way, anytime you wish to transform a value inside a template, you just add the pipe.

Lazy loading or deferred loading is a technique where you break up your application into smaller sections to improve performance. You can learn more about it here.

Normally, components (directive and pipes too) are registered in a single module. In an angular app without lazy loading, this is not a problem, because there is only one app module. If you try to register one of this three items in multiple modules, you will get an error that they cannot be registered in more than one module. Also, to use two components in a parent child relationship, they need to be registered in the same component.

To work around this, you need to create a shared module, where you declare and export the components, pipes and directives you want to share. Then, you can simply import the shared module into any of your lazy loaded modules and all exported items will be available. You can learn more about shared modules in Angular here.

NB: When using shared modules, remember to import the required modules required by the components.

What about Reusing Components in Multiple Projects?

As of Angular 6, they introduced Angular CLI Workspaces, allowing you to house more than one project in a single workspace. This means that if you have more than one project, you might want to share components across your projects. Angular 6 also introduced the ability to develop libraries within the same workspace.

And Angular CLI will register the library build directory (dist/library-name) in the tsconfig. This makes the library available to any project within the workspace after building it. This means that you can extract the components you want to share into a library. This library can then be privately used them within the project. There is no need to publish them anywhere, public or privately. You can learn more about building libraries in Angular here.

Final Thoughts

These are some of the techniques that I have come up with to make my components more reusable. They also have the added advantage of making my code cleaner and easily readable. This is important to me, since I don’t just want to develop web apps, but also enjoy the experience. If you have a suggestion on how to improve this, please leave it in the comment section below. Thank you for getting this far. If you have a topic suggestion you can also leave it the comment section below.

Angular Material 7 and CDK News and Updates

Maina Wycliffe — Fri, 05 Oct 2018 01:27:32 +0000

In this post, we are going to take a closer look at changes we expect on both Angular Material 7 and Content Development Kit(CDK). While this two are separate packages, they often go hand in hand, as Angular Material relies on some packages found in Angular CDK. But you can use Angular CDK independent of Angular Material and with a UI framework of your choice.

We expect Angular Material 7 to be released alongside Angular 7 in the next few weeks. Since I last covered news on Angular 7, there have been new features added to both Material 7 and CDK. On top of features, more of Angular Material Components have been slightly redesigned to conform to the latest standards of Material Design Specification, released earlier this year. So, without Further Ado

Scrolling Enhancement

The scrolling package is not new in Angular Material, but it has been greatly enhanced in Angular 7. This package is meant to provides helper directives that react to scrolling events and is part of Angular CDK. Here are some of the features that have been added:

Virtual Scrolling

This is the most popular feature by far. This is meant to display large list of elements (normally rendered with *ngFor) with improved performance, by only rendering elements on display. If you had hundreds of elements to display, there is no point to show all of them. Especially if they are not on user’s viewport. So, to improve performance, it will display only elements on display and switch them for new ones, while removing old once as the user scrolls down or up. This provides a huge performance gain, as only a section of the list is being rendered.

ViewportRuler

This is a simple service that provides you with the ability to measure the bound of the browser viewport. A browser’s viewport is the visible area of the browser’s webpage. You can learn more about this feature here.

Ripples (Angular Material)

This is a new Angular Material 7 Component, that allows you to visually indicate to the user when they touch or click on an HTML element like a button. It uses ripples to indicate the point of contact on the element with this feature enabled. It can be used to provide feedback to the user, indicating that their input was received or detected. To use this feature, simply import the MatRippleModule from angular material:

import { MatRippleModule } from '@angular/material/core';

And then, add the matRipple directive to the element you want to add the ripple effect feedback:

<div matRipple class="my-ripple-container"></div>

You can learn more about this feature here and find a demo here.

Text Field

Text Field package is part of Angular CDK and provides a set of utilities for both text and text area inputs. As of the time of writing this, it includes utilities to monitor autofill state and resize text field to fit content. With monitor autofill state, you can easily monitor whether the user has used autofill in your forms or individual form controls and react accordingly. The package provides a cdkAutofill directive to trigger a method when the autofill status has changed. To use this feature, you just need to import TextFieldModule from CDK:

import { TextFieldModule } from '@angular/cdk/text-field';

And then, add the cdkAutofill directive to your input control, passing the method to be triggered.

<input matInput (cdkAutofill)="firstNameAutofilled = $event.isAutofilled" />

The second feature allows you to create text areas that automatically resize with content. To use this feature, simply import the TextFieldModule from CDK:

import { TextFieldModule } from '@angular/cdk/text-field';

And then add the directive to your text area input control:

<textarea
matInput
cdkTextareaAutosize
cdkAutosizeMinRows="2"
cdkAutosizeMaxRows="5"
></textarea>

You can learn more about this feature here.

Platform

This is an Angular CDK Service that helps you determine the platform the angular app is running on. The service provides properties and methods to help you determine the Operating System, Browser and capabilities of the platform the angular app is running on. For instance, it provides you with a getSupportedInputTypes method that helps you determine the supported input controls by the browser. You can also check whether the operating system (IOS) is Android or IOS using the ANDROID and IOS Boolean properties respectively. You can learn more about this feature here.

Drag and Drop

This is one of the most exciting features coming to Angular 7, it provides you with an easy way to create drag and drop interfaces in Angular. You can use it to allow users to drag and place a UI element anywhere in the browser tab. The only reason this is not at the top is because I have covered it before, twice in fact. One practical application is reordering lists or moving items between lists.

(In fact, if you can think more practical application of this feature, feel free to drop them in the comment section below). I created a working demo (using bootstrap as the UI framework) of this feature earlier this week. You can find the demo here and the accompanying post here. You can learn more about this feature here.

A Closer Look at the Drag and Drop Feature for Angular 7 CDK

Maina Wycliffe — Wed, 03 Oct 2018 12:29:22 +0000

In this post, we are going to take a close look at the drag and drop feature coming to Angular 7 Content Development Kit (CDK). We are getting closer to the release of Angular 7, so it is only fair to see what is in store for us. You can learn more about angular 7 here.

So, to checkout this feature, we will be creating a barebone to-do application. We will use the drag and drop, to move items from our to-do list to the done or cancelled lists. Our to-do application will have three lists, to-do items, done items and cancelled items. To cancel an item, you move it from either of the other two lists to the cancelled items.

The same process is applied when moving an item from to-do item to done or cancelled list. You can also move items back and forth. You should also be able to re-arrange the list as you see fit by moving items up or down easily. For this app, we won’t persist items to keep thing simple, so everything will be lost when you reload. For the UI we will use bootstrap, but you can use any UI library or framework you want to.

So, without further ado:

Getting Started

For this project, we will be using the release candidate (RC) version of Angular 7. This is latest version of Angular 7 as of the time am writing this. This means, we also need the same version of Angular CLI to generate an Angular 7 application. You can upgrade your global version of Angular CLI or install it in a directory and generate your new angular project from that directory. Since the local version of Angular CLI supersedes the global version, then any new project generated in that directory will use Angular 7. To learn more about how to install pre-release version of Angular 7, check the last section of the following article.

First, let’s create and navigate to a new directory to test out angular 7 using terminal or PowerShell. Then install a local version of pre-release version of Angular CLI using your favorite package manager Yarn:

$ yarn add @angular/cli@7.0.0-rc.0
// or with npm
$ npm install @angular/cli@7.0.0-rc.0

Then, generate a new project using Angular CLI just you normally would:

$ ng new ng-material7-drag-and-drop-demo

Then change directory to that directory and add dependencies we require for this project: Yarn

$ yarn add @angular/cdk@7.0.0-beta.2 bootstrap
// or with npm
$ npm install @angular/cdk@7.0.0-beta.2 bootstrap

Now, let’s create our to-do application:

Building to-do App

First, we need import the DragDropModule from Angular CDK into our app module.

...
import { DragDropModule } from '@angular/cdk/drag-drop';
...
@NgModule({
  declarations: [AppComponent],
  imports: [
    //...
    DragDropModule,
    // ...
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Next, let’s create an interface for our to-do list. Generate the interface using Angular CLI.

$ ng generate interface todo

Next, open the newly created typescript file and add the following content:

export interface Todo {
title: string;
dateAdded: string;
}

NB: This is a simple to-do application, so no need to make it too complicated, hence it has the title of the to-do and the date it was added only.

Adding Drag and Drop into Our Component

Component Class

First, we need three lists, which we shall add as properties of the class: todo, done and cancelled. We shall initialize the first to with some initial to-do and done items:

public todo: Todo[] = [
  { title: 'Get to work', dateAdded: new Date().toString() },
  { title: 'Pick up groceries', dateAdded: new Date().toString() },
  { title: 'Go home', dateAdded: new Date().toString() },
  { title: 'Fall asleep', dateAdded: new Date().toString() }
];
public done: Todo[] = [
  { title: 'Get up', dateAdded: new Date().toString() },
  { title: 'Brush teeth', dateAdded: new Date().toString() },
  { title: 'Take a shower', dateAdded: new Date().toString() },
  { title: 'Check e-mail', dateAdded: new Date().toString() },
  { title: 'Walk dog', dateAdded: new Date().toString() }
];
public cancelled: Todo[] = [];

Adding new To-Do Items

Next, we need a method to add new items to either the to-do or done lists:

addItem(list: string, todo: string) {
  if (list === 'todo') {
    this.todo.push({ title: todo, dateAdded: new Date().toString() });
  } else {
    this.done.push({ title: todo, dateAdded: new Date().toString() });
  }
}

Moving Items within the same list or to another Lists

And finally, a method that will be triggered when you drag and drop an item from one list to another.

drop(event: CdkDragDrop<Todo[]>) {
  // first check if it was moved within the same list or moved to a different list
  if (event.previousContainer === event.container) {
    // change the items index if it was moved within the same list
    moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
  } else {
    // remove item from the previous list and add it to the new array
    transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
  }
}

NB: The above method, either transfers an item between two arrays (lists) or moves a to-do item up or down in the array. First, you need to determine whether the user moved the content to another list, let’s say from to-do to done or they just re-arranged the items by moving an item up or down within the array. It uses the previousContainer and currentContainer properties to determine that. If the two are the same, then the user just re-arranged the list and not moving them. Then you use the transferArrayItem to move items to a different array, and moveItemInArray to move items within the same array.

Component Template

We are using Bootstrap for the UI but feel free to use any UI Framework you are comfortable with. So, first we need to add some input controls to add new items to our to-do list:

<div class="row">
<div class="col-6">
<div class="form-group">
<label>New Task</label> <input #todoitem class="form-control" />
</div>
</div>
<div class="col-6">
<div class="form-group">
<label>List</label>
<select #todolist class="form-control">
<option selected value="todo">To Do</option>
<option value="done">Done</option>
</select>
</div>
</div>
<div class="col-12 text-right">
<button
(click)="addItem(todolist.value, todoitem.value)"
class="btn  btn-primary"
>
Add Item
</button>
</div>
</div>

Next, let’s add drag and drop list to our template. For this, we will be using the cdk-drop to wrap around each of our lists (to-do, done and cancelled list). We will pass the following properties:

Id (#todoList) – the id of the drag and drop list
Data source ([data]) – the data source of the list i.e. to-do, cancelled and done arrays,
Drag and Drop lists its connected to ([ConnectedTo]) – This sets limits to which lists the user can drag and drop items to.
And finally, the event that is called when a user drops an item (dropped) .

So, our first list for to-do items will look like this. We are using *ngFor directive to display the actual list inside the drag and drop list.

<!-- to-do items list -->
<cdk-drop
class="list-group list-group-flush"
#todoList
[data]="todo"
[connectedTo]="[doneList, cancelledList]"
(dropped)="drop($event)"
>
<div
class="list-group-item list-group-item-primary"
*ngFor="let item of todo"
cdkDrag
>
<p class="mb-1">{{ item.title | titlecase }}</p>
<small class="text-muted"> {{ item.dateAdded | date:'short' }}</small>
</div>
</cdk-drop>

And the same goes for done and cancelled lists:

<!-- Done to-do items list -->
<cdk-drop
#doneList
[data]="done"
[connectedTo]="[todoList, cancelledList]"
class="list-group list-group-flush"
(dropped)="drop($event)"
>
<div
class="list-group-item list-group-item-success"
*ngFor="let item of done"
cdkDrag
>
<p class="mb-1">{{ item.title | titlecase }}</p>
<small class="text-muted"> {{ item.dateAdded | date:'short' }} </small>
</div>
</cdk-drop>
<!-- Cancelled to-do items list -->
<cdk-drop
#cancelledList
[data]="cancelled"
[connectedTo]="[todoList, doneList]"
class="list-group list-group-flush"
(dropped)="drop($event)"
>
<div
class="list-group-item list-group-item-warning"
*ngFor="let item of cancelled"
cdkDrag
>
<p class="mb-1">{{ item.title | titlecase }}</p>
<small class="text-muted"> {{ item.dateAdded | date:'short' }} </small>
</div>
</cdk-drop>

And finally, you can now wrap each of those drag and drop lists with a bootstrap card component:

<div class="card bg-warning">
<div class="card-header text-white"><h2>Cancelled</h2></div>
<!-- Lists Here -->
</div>

You can find the complete template here.

Source Code and Demo

You can find the demo for the above project here and the source code here.

Using App Shell to Improve Performance – Angular 6

Maina Wycliffe — Mon, 01 Oct 2018 12:07:46 +0000

Angular apps take time to show meaningful content to the user. This time is mainly after loading the index.html page and bootstrapping the app. This is especially worse on lower end devices or slower networks, where it takes longer to get the all files required to bootstrap the app. It is therefore important to show some animation or an app shell, to indicate to the user that your web app is not broken. When it takes longer to paint something on the web page, most users will likely leave your app, most likely for a competitor. And we all want to avoid that.

There are several ways around this, the first one, is using a simple loading animation, indicating to the user something is happening on the background. And the second option, is loading the app shell – title bar, navigation etc. of the app, then some animation where the data will be placed after bootstrapping. Let’s first look at the loading animation, and then the app shell option:

Using a Simple Loading Animation/Message

This is the easiest option, it involves using CSS and html to create an animation or print a message to the user, as they wait for the app to load and bootstrap. This is important, as it indicates to them, that something is happening in the background instead of a blank page. Achieving this is rather straightforward, open the index.html file, under the src directory in the root of your angular workspace. Add the animation code in between <app-root> </app-root> tags. Why here? This is because, after the app has successfully bootstrapped, it will replace the content in between with the application itself. So, our animation code will look something like this:

<app-root>
<div class="text-center bg-primary p-2" style="height: 100vh;">
<div class="container align-middle p-5">
<i class="fa fa-spinner fa-spin fa-3x"></i><br />Loading ...
</div>
</div>
</app-root>

I am using font-awesome and bootstrap for this demo, so remember to add the minified CSS imports at the header section.

<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
crossorigin="anonymous"
/>

And this is what it looks like: NB: You can make it lighter and easier to load by using pure CSS to load the animation, instead of using Bootstrap and Font Awesome, which is overkill for a simple animation. But if you are using both of these libraries somewhere else, this is a great way to load them and keep them outside your final angular bundle.

Using an App Shell

Now, let’s take the above process a step further. We can use angular cli to generate an app shell for a specific route. An app shell is the skeleton of an app – navigation, title bar, menu etc. In angular, you can prerender a specific route, to create an app shell which will be show to the user as they wait for the to bootstrap. This will include all components, in between the app-root and the router outlet of the prerendered route. The component to be loaded in the router-outlet is then replaced by the app shell component, this component is where you would add a loading animation or message.

NB: Unfortunately, as far as I can tell from my own research, you can only create for one route in an angular project. So, let’s first generate an app shell for our application, using the ng generate app-shell command:

$  ng generate app-shell --client-project angular-app-shell-demo --universal-project angular-app-shell-demo-rendered

Where: client-project is the project you want to generate the app shell for. And --universal-project is the name of server app or universal app, the option we will use to prerender our app shell. You may also want to include a --route, if you don’t want to create an app shell for the default route.

Changes to your Angular Project

When you run the above command, it makes some changes to your angular application. If you look at angular.json, you will see a few modifications:

...
"server": {
  "builder": "@angular-devkit/build-angular:server",
    "options": {
      "outputPath": "dist/angular-app-shell-demo-server",
      "main": "src/main.server.ts",
      "tsConfig": "src/tsconfig.server.json"
      }
    },
"app-shell": {
   "builder": "@angular-devkit/build-angular:app-shell",
   "options": {
     "browserTarget": "angular-app-shell-demo:build",
     "serverTarget": "angular-app-shell-demo:server",
     "route": "shell"
   },
  "configurations": {
    "production": {
      "browserTarget": "angular-app-shell-demo:build:production"
    }
  }
}
...

Another key change to take note of, is the component generated - AppShellComponent. This is a normal component, apart from the fact that it is registered with Server Module instead of the App Module. The Server Module was also generated by the generate app-shell command and can be found in the same directory as the app module.

Building your Angular Application

To build our application with an app shell, all you have to do is run the following command:

$ ng run angular-app-shell-demo:<app-shell-name>

Replace the <app-shell-name> with the name of the app shell name, you specified when generating the app shell. This will first prerender the path, and then build your angular app just as normal. But, if you look at your final index.html, you will notice it has extra content, unlike a normal one:

<app-root _nghost-sc0="" ng-version="6.1.9">
<div _ngcontent-sc0="" class="container">
<nav _ngcontent-sc0="" class="navbar navbar-light bg-light">
<a _ngcontent-sc0="" class="navbar-brand" href="#"
><img
_ngcontent-sc0=""
alt=""
class="d-inline-block align-top"
height="30"
src="/docs/4.1/assets/brand/bootstrap-solid.svg"
width="30"
/>
My Application
</a>
</nav>
<router-outlet _ngcontent-sc0=""></router-outlet>
<app-app-shell _nghost-sc1="">
<div _ngcontent-sc1="" class="row">
<div _ngcontent-sc1="" class="col-12 text-center">
<i _ngcontent-sc1="" class="fas fa-spinner fa-spin"></i> Loading
application
</div>
</div>
</app-app-shell>
</div>
</app-root>

All the above content is pulled from all components content right up to the router-outlet of the path. So, any modification you make to the components, will be reflected to the app shell when you build the application. This is certainly better than the first option of adding a loading animator directly to the index.html. To view the app shell, all you have to do is navigate to the route you generated for the app shell. In our case it was the default route, so navigating to it, you will see loading message from the app shell component, before being replaced by the actual content from the message.

Source Code

You can find the source code of the app shell here.

Role Based Authorization in Angular – Route Guards

Maina Wycliffe — Fri, 28 Sep 2018 14:46:17 +0000

In this post, we are going to use Route Guards to determine which user can and can not access certain pages. It is common to have multiple user roles such as guest, author, editor, admin for a blogging site such as this one. Therefore, it is important to determine who has access to what routes, so as to provide a good user experience (UX). NB:

For security purpose, this should not be used as the only solution, similar security measures needs to be implemented at the backend server. This is because, other developers and hackers can be able to manipulate the frontend app to gain access. This should be used mainly to provide a consistent and good user experience to the end user.

In this post, we shall use JSON Web Tokens (JWTs), which will contain the user role of the current user. The JWT token, shall have a user role added to it on the server, after signing in together with other user details such as email, username, full name etc. This post assumes that you have a backend ready and working.

Why JWTs?

JSON Web Tokens, has three sections, the header, payload and signature. The header contains information about the token and hashing algorithm used, while the payload contains information such as user information, expiry time and any information you wish to add.

The Signature part is why we are using JWTs. It secures the token, ensuring that if someone – say a frontend user – tampers with it, you will know. It is a hash of the encoded header and payload, along with a secret which only you should know. This makes it perfect, for authentication and authorization purposes, passing information to the client that is tamper proof.

This ensures that, if someone were to change the token on the frontend to beat the Route guard, the server would know if they tried to act using the token they modified, to change something. This of course relies on the fact that the secret key or password used to sign the token remains secret. You can learn more about JWTs here.

Getting Started

We will start by creating a new project in angular, with support for routing.

$ ng new angular-role-based-authorization --routing true

Then, we need a library to read JWT Tokens in Angular. For that, we will use angular2-jwt by Auth0.

Let’s add it in our app and add it to our list of imports in our app module. So, first install it using your favorite package manager:

// Using NPM:
$ npm install @auth0/angular-jwt
// or using Yarn:
$ yarn add @auth0/angular-jwt

Next, add it to the list of imported modules in our app module:

// ...
import { JwtModule } from '@auth0/angular-jwt';
// ...

@NgModule({
declarations: [
//...
 ],
imports: [
// ...
 JwtModule.forRoot({})
],
providers: [
// ...
 ],
bootstrap: [AppComponent]
})
export class AppModule {}

Routes

Our first action will be to create routes for our demo app. We shall embed the roles required by each of the routes on the route object. This way, each route shall be aware of the roles it will allow access to it and you can just check the user role against allowed roles:

{
  path: 'author',
  component: AuthorComponent,
  data: {
    allowedRoles: ['admin', 'author']
  }
}

So, in the case of author route, we shall allow users with author and admin role. The same would go for writer route, where we shall allow admin, writer and author.

{
  path: 'writer',
  component: WriterComponent,
  data: {
    allowedRoles: ['admin', 'writer', 'author']
  }
}

The reason for embedding roles on the routes, is to enable us to use a single route guard for all our routes. Removing the need for repetition.

Authorization Service

Next, we need to create a service to determine whether a user role is allowed to access a route. We shall read the user role from the JWT Token, then check whether the role is in the list of allowed Roles, contained in the data. If the list of allowed roles is empty, we shall grant user access but only deny them access if their role is not listed in the allowed list. First, let’s create a new service:

$ ng generate service authorization

Then inject the JwtHelperService service into our service, so we can decode tokens:

constructor(private jwtHelperService: JwtHelperService) {}

Then, add a method to check if the user is authorized. It will accept allowed roles string array and check whether current user role is among the roles that are allowed:

isAuthorized(allowedRoles: string[]): boolean {
  // check if the list of allowed roles is empty, if empty, authorize the user to access the page
  if (allowedRoles == null || allowedRoles.length === 0) {
    return true;
  }
// get token from local storage or state management
 const token = localStorage.getItem('token');
// decode token to read the payload details
  const decodeToken = this.jwtHelperService.decodeToken(token);
// check if it was decoded successfully, if not the token is not valid, deny access
  if (!decodeToken) {
    console.log('Invalid token');
    return false;
  }
// check if the user roles is in the list of allowed roles, return true if allowed and false if not allowed
  return allowedRoles.includes(decodeToken['role']);
}

Next, add the service to the list of providers in the app module:

@NgModule({
declarations: [
// ...
 ],
imports: [
// ...
 ],
providers: [AuthorizationService],
bootstrap: [AppComponent]
})
export class AppModule {}

Route Guard

Next, let’s add a route guard to our app.

ng generate guard authorization

Then, let’s inject our authorization service into the route guard.

constructor(private authorizationService: AuthorizationService, private router: Router) {}

We also need to implement the CanActivate and CanActivateChild interfaces, which will check whether a user is authorized.

export class AuthorizationGuard implements CanActivate, CanActivateChild {
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<boolean> | Promise<boolean> | boolean {}
canActivateChild(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<boolean> | Promise<boolean> | boolean {}
}

Then, let’s add the two methods to our router guard. They will have similar content; the only difference is that, one checks if a route can be activated while the other checks if children routes can be activated. So, inside both two methods, we need to first get the allowed roles for that route:

const allowedRoles = next.data.allowedRoles;

Then, check if the user is authorized to access the route:

const isAuthorized = this.authorizationService.isAuthorized(allowedRoles);
if (!isAuthorized) {
// if not authorized, show access denied message
 this.router.navigate(['/accessdenied']);
}
return isAuthorized;

So, I our canActivate method will look like this:

canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
  const allowedRoles = next.data.allowedRoles;
  const isAuthorized = this.authorizationService.isAuthorized(allowedRoles);
if (!isAuthorized) {
    this.router.navigate(['accessdenied']);
  }
return isAuthorized;
}

And canActivateChildMethod:

canActivateChild(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
  const allowedRoles = next.data.allowedRoles;
  const isAuthorized = this.authorizationService.isAuthorized(allowedRoles);
if (!isAuthorized) {
    this.router.navigate(['accessdenied']);
  }
return isAuthorized
}

Now, let’s add the guard to our parent route:

const routes: Routes = [
{
path: '',
canActivateChild: [AuthorizationGuard],
children: [
// routes here
 ]
}
];

Demo and Source Code

And that’s it, we have a role-based authorization for our angular application. You can visit the following link to see and play with the demo. You can also find the source code here.

Docker Compose - Angular Multi Environment Deployments

Maina Wycliffe — Wed, 26 Sep 2018 10:44:16 +0000

In a previous post, we covered how to use multiple dockerfile to target different environments for an angular app. In this post, we are going to take things a bit further along using docker compose. We shall use multiple docker compose configuration files to override the defaults in the main configuration files when deploying to different environment.

This means that, if we have 3 environment – development, staging and production environment, we shall have four docker-compose configurations file. The main docker-compose.yml, shall contain only base configuration common to all our environments. Then we shall have other 3 docker-compose configuration files for each of our environments: docker-compose.override.yml, docker-compose.staging.yml and docker-compose.prod.yml.

The 3 extra docker compose files shall be used to override base configuration contained in the main docker compose configuration file. This means, if you can launch an angular app on different ports depending on environment, use different dockerfiles and different images and container names etc. The last point is especially useful since it means you won’t accidentally deploy a staging image into production environment because they have similar names.

Docker compose by default, will read both the main configuration file and docker-compose.override.yml if it’s available. So, when deploying to the other two environments, you can specify the override file to use. You can learn more about using multiple docker compose files here. And to make things easier, we shall add the docker compose build commands into our list of scripts in package.json. Without further ado:

Getting Started

On the previous post, here, we covered how to build images and using multiple dockerfiles. In this post, we are going to be building on that and add docker compose to our project. If you can recall, all our docker files and related docker files, are in a directory at the root of our angular workspace called .docker.

We are now going to add 4 extra docker compose configuration files at the root of our angular workspace. The files will be name docker-compose.yml, docker-compose.override.yml, docker-compose.staging.yml and docker-compose.prod.yml.

Next, we are going to add docker configurations for each file specific to the environment we targeting:

Base Confuguration – docker-compose.yml

This shall contain common configurations between our three environments. Although, any configurations you add here, can easily be overridden by the environment compose configuration files such as docker-compose.override.yml. So, it is also possible to add default configurations here and override them when necessary. For this configuration, we shall only have a default docker file.

version: '3'
services:
  demongapp:
    build:
      context: .
      dockerfile: .docker/prod.dockerfile
  # other services here like API, Database ETC

Next, let’s extend or override this compose configurations for local development.

Local Development and Testing

For Local Development, we shall use the docker-compose.override.yml file to override default compose configurations. The good thing about using this file, is that you don’t need to specify it during docker compose build. It will automatically read it and override it if it is available.

So, in our case, we need to provide a name for our image and container, launch it on port 8080 and use the development dockerfile instead of the production dockerfile. This is how our docker compose override will look like after we provide the above information:

version: '3'
services:
  demongapp:
    build:
      context: .
      dockerfile: .docker/dev.dockerfile
    image: demongapp-dev
    container_name: demongapp-dev
    ports:
      - 8080:80

NB: You might want to mount your app distribution folder, to avoid building your container every time you build your app after making changes. When building your app, with a mounted app distribution directory, you must specify the --delete-output-path false flag. This flag tells angular cli not to delete app distribution directory.

ng build --delete-output-path false

NB: Remember your app distribution directory, is a directory whose name is the app name located inside the dist directory at the root of your angular workspace.

Now, if you run docker-compose up –build, it will automatically read both the base compose configurations and override it automatically. No need to have complicated build commands for local development, unlike the other two environments. Now, let’s move on to the next two environments.

Staging and Production Deployments

I am going to discuss this two together, as there is no difference in approach on how to implement both, unlike in local deployment. The only difference are the names for our images and containers. So, our staging compose configurations will look like this:

version: '3'
services:
  demongapp:
    build:
      context: .
      dockerfile: .docker/staging.dockerfile
    image: demongapp-staging
    container_name: demongapp-staging
    ports:
      - 80:80

And our production compose configurations will look like this:

version: '3'
services:
  demongapp:
    build:
      context: .
      dockerfile: .docker/prod.dockerfile
    image: demongapp-prod
    container_name: demongapp-prod
    ports:
      - 80:80

Now to instruct docker compose to build and deploy our image for staging, we use the following command:

docker-compose -f docker-compose.yml -f docker-compose.staging.yml up -d –build

It is quite long and hard to remember. Please note, we are specifying two configuration files, the main docker-compose and an override for staging docker compose. And the same goes for production environment:

docker-compose -f docker-compose.yml -f docker-compose.prod.yml up -d –build

Using NPM Scripts to Shorten the Commands

Now, to make these commands to remember, you can use NPM scripts to run these commands. Open package.json, at the root of your angular workspace, and add the two scripts, one for deploying in staging and another for deploying production environment.

"scripts": {
  // ...
  "deploy-staging": "docker-compose -f docker-compose.yml -f docker-compose.staging.yml up -d --build",
  "deploy-prod": "docker-compose -f docker-compose.yml -f docker-compose.prod.yml up -d --build"
//...
}

And now, you can run the above scripts as shown below:

Staging:

$ npm run deploy-staging

Production:

$ npm run deploy-staging

Source Code

You can find the whole code for this project here.

Attaching Authorization Token Headers in Angular 6

Maina Wycliffe — Sun, 23 Sep 2018 12:55:26 +0000

In a previous post here, we looked at how to intercept HTTP unauthorized responses, and refresh authorization tokens and resend the original request, with the new authorization token. This had me thinking, what if you wanted to be more proactive. In this post, we want to get the authorization token, check if it’s expired and refresh it just before attaching it to the HTTP request. We also need to avoid sending multiple authorization token refresh requests, but rather queue the request behind a single request response and use the new authorization token when it is received.

How it Works

For our authorization token, we will be using JWT (JSON Web Tokens) standard. We will need to check before every request whether it is expired (or close to expire) and send a request to refresh it. So, we need a library to read JWT Tokens, we will use angular2-jwt by Auth0. We will also require a service – Auth Service, that will fetch and return the token to us as an observable.

The service will also be checking whether the token is expired, and then send a refresh request. The observable returned by the service will be shared across multiple requests. On top of that, we of course need a HTTP Interceptor, to attach an authorization header to every outgoing request. To make things much easier, we will not start a new project this time. We are going to build on top of the previous post, which you can find here. It already has an Authentication Service and a HTTP Interceptor. So, without further ado:

Getting Started

We already have a project, so in this case, we just need to add angular2-jwt library. You can use your favorite package manager to add it: Using NPM:

$ npm install @auth0/angular-jwt

Using Yarn Package Manager:

$ yarn add @auth0/angular-jwt

Feel free to use any other library you are comfortable with. Since, we are only interested with decoding JSON, and not the rest of functionality offered by the library, we are going to use only the JwtHelperService. So, let’s register the service, to our list of providers in our app module.

// ...
import { JwtHelperService } from '@auth0/angular-jwt';
// ...

@NgModule({
  declarations: [ ... ],
  imports: [...],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HttpAuthInterceptor,
      multi: true
    },
    JwtHelperService
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Next, we need to add the functionality to fetch the token and check if it’s expired. If it’s expired, we are going to refresh it and return the new token.

Fetching and Refreshing Tokens

This task will be completed by our authentication service. We need to add a new method – getToken() inside our service. On top of that, we also need to inject JwtHelperService into our service, so we can use it within the method:

private decoder: JwtHelperService

Then create our new method:

getToken() : Observable<string> {}

NB: Our method returns only an observable string, which is the token. Next, let’s add a method to fetch a token and check if it is expired. We will be storing our tokens in local-storage. Please note, you can also use state management libraries like NGXS/NGRX/Akita to store tokens. First, let’s get the token from local storage:

const token = localStorage.getItem('token');

Then, check if its expired using JwtHelperService service:

const isTokenExpired = this.decoder.isTokenExpired(token);

Now, let’s return an observable of the authorization token string, if it is not expired:

if (!isTokenExpired) {
return of(token);
}

And if it is expired, we need to send a refresh request to get a new authorization token. In the previous post, we had already built a method to refresh an expired token. It basically sends the expired token and a refresh token to a refresh token endpoint and gets back new once. On top of that, we shared the observable and saved the authorization tokens to our local storage inside the same method. Here is what the method looks like:

refreshToken(): Observable<string> {
  const url = 'url to refresh token here';
// append refresh token if you have one
  const refreshToken = localStorage.getItem('refreshToken');
  const expiredToken = localStorage.getItem('token');
return this.http
    .get(url, {
      headers: new HttpHeaders()
        .set('refreshToken', refreshToken)
        .set('token', expiredToken),
      observe: 'response'
    })
    .pipe(
      share(), // <========== YOU HAVE TO SHARE THIS OBSERVABLE TO AVOID MULTIPLE REQUEST BEING SENT SIMULTANEOUSLY
      map(res => {
        const token = res.headers.get('token');
        const newRefreshToken = res.headers.get('refreshToken');
        // store the new tokens
        localStorage.setItem('refreshToken', newRefreshToken);
        localStorage.setItem('token', token);
        return token;
     })
  );
}

We are going to utilize the same method to renew our authorization token. So, let’s call the refreshToken() method and return it inside our getToken() method:

return this.refreshToken();

So, our complete getToken() method will look like this:

getToken(): Observable<string> {
  const token = localStorage.getItem('token');
  const isTokenExpired = this.decoder.isTokenExpired(token);
if (!isTokenExpired) {
    return of(token);
  }
return this.refreshToken();
}

Attaching Authorization Header

Our HTTP Interceptor already intercepts response with 401 and refreshes the token. We don’t want to remove that, but rather add our new functionality on top of it. This is because, due to network latency, the request might take longer than anticipated and the authorization token expires before getting to the server. So, we still need to intercept expired token responses from the server and refresh them. So, first I want to bring your attention to inflightAuthRequest property of the http interceptor. This holds the refresh requests in progress, so that other subsequent requests requiring to refresh their token can hitch onto it instead of sending their own refresh request. This is made possible by the share operator of RXJS. So, foreach intercepted request, we need to check if the inflightAuthRequest is set, and subscribe to it. If not set, we need to initiate a new one.

if (this.inflightAuthRequest == null) {
this.inflightAuthRequest = authService.getToken();
}

Next, we will use switchMap, to send the initial request we intercepted after we got the token from the getToken() method.

return this.inflightAuthRequest.pipe(
switchMap((newToken: string) => {
// unset request inflight
 this.inflightAuthRequest = null;
// use the newly returned token
 const authReq = req.clone({
headers: req.headers.set('token', newToken)
});
return next.handle(authReq);
}),
catchError(error => {
// the code to catch 401 response here
 })
);

NB: Once the getToken method is resolved successfully, remember to unset the inflightAuthRequest property, so that you don’t end up attaching an expired token to request that come after that.

The complete code for the above post can be found here.

Cool Password Validation – Angular Reactive Forms

Maina Wycliffe — Tue, 18 Sep 2018 23:34:54 +0000

In this post, we are going to be creating a simple signup form, with email, password and confirm password controls. We will then validate the data to ensure it fulfills our requirement before a user can submit the form. We are going to enforce the following rules for the password:

Must be at least 8 characters in length,
Must be alphanumeric, with at least one upper and one lower case character
And must have at least one special character.

We are going to validate each of the 5 rules individually using RegExp. And then, we will display a nice visual interface indicating to the user which rule they have not fulfilled. We will also be checking to see whether the password and the confirmation passwords are a match. Here is what the end-product will look like:

In this demo, we are going to use bootstrap for the user interface and Material Icons set for icons. Feel free to use the UI Library and Icon set of your choice. So, without further ado.

Getting Started

First, we are going to create a new project using Angular CLI.

$ ng new ng-bootstrap-password-validation-example

Then, we need to install and setup bootstrap for our angular project. First, install bootstrap using your favorite package manager:

$ npm install -s bootstrap
// or
$ yarn add bootstrap

Then, add bootstrap SCSS Styles to the list of styles for your project inside your angular.json file. There are three of them, but only one is necessary - node_modules/bootstrap/scss/bootstrap.scss.

...
"styles": [
  "src/styles.css",
  "node_modules/bootstrap/scss/bootstrap-grid.scss",
  "node_modules/bootstrap/scss/bootstrap-reboot.scss",
  "node_modules/bootstrap/scss/bootstrap.scss"
],
...

Next, we need to add material icons to our angular project. Open your index.html (Located inside the src directory at the root of your angular workspace) and add the following link:

<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>

This is the easiest way to add material icons to your project. If you are interested in learning of the other ways of adding material icons to any project, you can visit the official guide here. And finally, we need to vertically re-align material icons, so they appear more centralized. We will use the following CSS code:

.material-icons {
 display: inline-flex;
 vertical-align: middle;
}

Add the above code in your app styles, by default its styles.css located under the src directory at the root of your angular workspace. The last thing we need to do is import the modules we need in our app module. In this project, we are going to require ReactiveFormsModule only, since we are building a reactive form. So, let’s add that module to our imports in the app module (By default app.module.ts).

@NgModule({
  ...
  imports: [
   BrowserModule,
   ReactiveFormsModule
  ],
  ...
})
export class AppModule {}

Building a Custom Validator

Angular provides built in validators, but in our case they won’t help us achieve what we want. We need a custom validator that uses regex to check whether a password contains a special character or a number and report the error to back to us.

NB: If you want to learn more about creating a custom validator, please visit the following link where I cover it in greater details.

So, our custom validator will accept the validation RegExp expression, and validation error object to return if it encounters an error. For instance, if we want to check whether it has a number, we will pass the following:

patternValidator(/\d/, { hasNumber: true }),

Where /\d/ is the RegExp expression for checking if it has a number and { hasNumber: true } is our error to return. The error part of our parameters will allow us to use the control.hasError("hasNumber") within our template, when checking whether to show the error. Now, let’s build our validator. First, we are going to create a CustomValidators class, where we can place multiple custom validator methods for our project.

$ ng g class custom-validators

Then, we are going to add a static pattern validator (patternValidator) method.

NB: Follow the comments to see what individual lines of code do.

static patternValidator(regex: RegExp, error: ValidationErrors): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } => {
    if (!control.value) {
      // if control is empty return no error
      return null;
    }
// test the value of the control against the regexp supplied
    const valid = regex.test(control.value);
// if true, return no error (no error), else return error passed in the second parameter
    return valid ? null : error;
  };
}

And we also need a second CustomValidator to check whether our password and confirm password are a match. Add a second customValidator, called passwordMatchValidator and add the following code.

NB: You can follow the comments on the code for what individual lines do.

static passwordMatchValidator(control: AbstractControl) {
  const password: string = control.get('password').value; // get password from our password form control
  const confirmPassword: string = control.get('confirmPassword').value; // get password from our confirmPassword form control
  // compare is the password math
  if (password !== confirmPassword) {
    // if they don't match, set an error in our confirmPassword form control
    control.get('confirmPassword').setErrors({ NoPassswordMatch: true });
  }
}

For this project, we are going to use the default component – AppComponent.

Component Class

First, we need to inject the FormBuilder in to our component.

constructor(private fb: FormBuilder) {}

Next, we need to add a new property in our component class – frmSignup, that will hold information about our form:

public frmSignup: FormGroup;

Next, we need to create a method for adding form controls to the frmSignup property we just created above: We call the method createSignupForm, and it will return a FormGroup class.

createSignupForm(): FormGroup {}

Then inside the createSignupForm() method above, we need to add the controls for our form and the validation rules required.

NB: Follow the comments below for more information about individual lines of code.

createSignupForm(): FormGroup {
  return this.fb.group(
    {
      // email is required and must be a valid email email
      email: [null, Validators.compose([
         Validators.email,
         Validators.required])
      ],
      password: [ null, Validators.compose([
         // 1. Password Field is Required
         Validators.required,
         // 2. check whether the entered password has a number
         CustomValidators.patternValidator(/\d/, { hasNumber: true }),
         // 3. check whether the entered password has upper case letter
         CustomValidators.patternValidator(/[A-Z]/, { hasCapitalCase: true }),
         // 4. check whether the entered password has a lower-case letter
         CustomValidators.patternValidator(/[a-z]/, { hasSmallCase: true }),
         // 5. check whether the entered password has a special character
         CustomValidators.patternValidator(/[ [!@#$%^&*()_+-=[]{};':"|,.<>/?]/](<mailto:!@#$%^&*()_+-=[]{};':"|,.<>/?]/>), { hasSpecialCharacters: true }),
         // 6. Has a minimum length of 8 characters
         Validators.minLength(8)])
      ],
      confirmPassword: [null, Validators.compose([Validators.required])]
   },
   {
      // check whether our password and confirm password match
      validator: CustomValidators.passwordMatchValidator
   });
}

Are you still with me? Now let’s move to our component template.

Component Template:

We will create a normal reactive form as you normally would:

<form [formGroup]="frmSignup" (submit)="submit()"></form>

Then, we add our individual form controls:

<input id="email" formControlName="email" type="email" class="form-control" />

Then, we need to show validation errors to users. For instance, to check whether the email provided is valid, we use the following expression:

frmSignup.controls['email'].hasError('email')

And the same for a required form field:

frmSignup.controls['email'].hasError('required')

And to display a message, we can simply use *ngIf:

<label
class="text-danger"
*ngIf="frmSignup.controls['email'].hasError('email')"
>
Enter a valid email address!
</label>

NB: This will display the Enter a valid Email Address! error only when there is such an error. You can do the same for required, and custom validation errors.

The same goes for confirming whether confirm password and password are a match:

<label
class="text-danger"
*ngIf="frmSignup.controls['confirmPassword'].hasError('NoPassswordMatch')"
>
Password do not match
</label>

We can also add a red border around our form field to give the error some prominence. We are going to add is-invalid bootstrap class using ngClass, adding the class when the form control has an error and remove it when there is no error:

[ngClass]="frmSignup.controls['email'].invalid ? 'is-invalid' : ''"

So, now our form field looks like this:

<input
id="email"
formControlName="email"
type="email"
class="form-control"
[ngClass]="frmSignup.controls['email'].invalid ? 'is-invalid' : ''"
/>

Password Rules Validation

There is not much difference from the above code when it customs to custom validation rules.

<label
class="text-danger"
*ngIf="frmSignup.controls['password'].hasError('hasNumber')"
>
Must have at least 1 number!
</label>

But, since we don’t want to just hide and show the errors as with other form fields, we want to show text with green font for rules the password has fulfilled, and a red font color for rules not fulfilled. So, instead of *ngIf, we will use a ngClass, to switch between bootstrap classes text-success and text-danger.

[ngClass]="frmSignup.controls['password'].hasError('required') ||
frmSignup.controls['password'].hasError('hasNumber')  ? 'text-danger' :
'text-success'"

We also need to do the same for icons, showing a check icon when a rule has been fulfilled and cancel icon otherwise.

<i class="material-icons">
{{ frmSignup.controls['password'].hasError('required') ||
frmSignup.controls['password'].hasError('hasNumber') ? 'cancel' :
'check_circle' }}
</i>

So, our complete code will look like this for checking whether password has a number:

<label
class="col"
[ngClass]="frmSignup.controls['password'].hasError('required') || frmSignup.controls['password'].hasError('hasNumber')  ? 'text-danger' :'text-success'"
>
<i class="material-icons">
{{
frmSignup.controls['password'].hasError('frmSignup.controls['password'].hasError('hasNumber')
? 'cancel' : 'check_circle' }}
</i>
Must contain atleast 1 number!
</label>

And the same goes for our other password rules:

<label
[ngClass]="frmSignup.controls['password'].hasError('required') || frmSignup.controls['password'].hasError('minlength')  ? 'text-danger' : 'text-success'"
>
<i class="material-icons">
{{ frmSignup.controls['password'].hasError('required') ||
frmSignup.controls['password'].hasError('minlength') ? 'cancel' :
'check_circle' }}
</i>
Must be at least 8 characters!
</label>
<label
class="col"
[ngClass]="frmSignup.controls['password'].hasError('required') || frmSignup.controls['password'].hasError('hasNumber')  ? 'text-danger' : 'text-success'"
>
<i class="material-icons">
{{ frmSignup.controls['password'].hasError('required') ||
frmSignup.controls['password'].hasError('hasNumber') ? 'cancel' :
'check_circle' }}
</i>
Must contain at least 1 number!
</label>
<label
class="col"
[ngClass]="frmSignup.controls['password'].hasError('required') || frmSignup.controls['password'].hasError('hasCapitalCase')  ? 'text-danger' : 'text-success'"
>
<i class="material-icons">
{{ frmSignup.controls['password'].hasError('required') ||
frmSignup.controls['password'].hasError('hasCapitalCase') ? 'cancel' :
'check_circle' }}
</i>
Must contain at least 1 in Capital Case!
</label>
<label
class="col"
[ngClass]="frmSignup.controls['password'].hasError('required') || frmSignup.controls['password'].hasError('hasSmallCase')  ? 'text-danger' : 'text-success'"
>
<i class="material-icons">
{{ frmSignup.controls['password'].hasError('required') ||
frmSignup.controls['password'].hasError('hasSmallCase') ? 'cancel' :
'check_circle' }}
</i>
Must contain at least 1 Letter in Small Case!
</label>
<label
class="col"
[ngClass]="frmSignup.controls['password'].hasError('required') || frmSignup.controls['password'].hasError('hasSpecialCharacters') ? 'text-danger' : 'text-success'"
>
<i class="material-icons">
{{ frmSignup.controls['password'].hasError('required') ||
frmSignup.controls['password'].hasError('hasSpecialCharacters') ? 'cancel' :
'check_circle' }}
</i>
Must contain at least 1 Special Character!
</label>

Demo and Source Code

You can find a demo to play with here and the complete source code for the above project here.

Angular 7 Spotlight – News and Updates

Maina Wycliffe — Mon, 17 Sep 2018 10:31:16 +0000

We are about a month or less for the official release of Angular 7. Today, we are going to take a closer look at what to expect in Angular 7, Angular Material and how you can try out the new version of Angular. So, without further ado.

Angular 7 and Angular CLI

First, let’s focus on features coming to both Angular 7 and Angular 7 CLI.

Updated Compiler – Angular Compatibility Compiler

We are getting an updated compiler for angular 7. This is great news because it means that you can expect to reduce your bundle size by allowing old packages to use Ivy Rendering Engine. This is a huge performance gain for most application, since smaller bundles, means less size to download and faster load times. Over the next few days, I will be experimenting on some of my projects and I will get back to you with the results. Keep in mind we are still in beta.

Improvement to Angular Schematics

As of Angular 7, Schematics will allow for interactive install of dependencies and also when creating new angular projects. For instance, when you run ng new project-name, Angular CLI will prompt you whether to add routing and which stylesheet to use. This is particularly helpful, as I forget to add those flags most of the time, and it means one less thing to worry about.

Router Improvement

In the next version of Angular, the CanLoad Interface will now have UrlSegment[] which will store URLs a user tried to navigate to and can be redirected to them later. This is especially important when you want to redirect user back after they have been authenticated. For more details, please checkout the changelog here.

Angular Material and CDK

Moving on, lets focus on Angular Material – one of my favorite UI tools for Angular. On top of lots of bug fixes and minor improvements, here are the major changes to expect:

Virtual Scroll

Virtual Scroll enables you to display a large list of items (hundreds or thousands) by only rendering the number of items on view point. There are other third-party solutions out there but it’s great to see it being officially supported by the Angular Team. This is part of Angular Component Development Kit (Angular CDK) which means you can use it with any UI framework you wish to. You can learn more about this feature here.

Drag and Drop

This is another exciting feature for Angular CDK. This module allows you to create a drag drop UI which can be used for free dragging, sorting and transferring items through a list etc. It provides a complete API for you to interact with the object being dragged with touch and mouse event detectors and locking along an axis – vertical or horizontal only dragging. You should really see it in action here.

Support for Native Select in MatFormFieldModule

While not as exciting as the above two, this is a very important development. If you wanted to add a select form field in angular material, you were required to use MatSelectModule, but as of Angular 7, Material will now support the native html select input.

<select
matNativeControl
placeholder="Favorite car"
[(ngModel)]="selectedCar"
name="car"
>
<option value="" disabled selected></option>
<option *ngFor="let car of cars" [value]="car.value">
{{car.viewValue}}
</option>
</select>

For more information, visit the beta documentation here. And finally, Angular 2 Material is being updated to the 2018 Material Design Guidelines. It is still in progress, so you might come across some visual inconsistencies, hopefully it will be done by the time its released.

Trying and Testing Angular 7

There two ways you can get into the action with Angular 7. One is a global install of Angular 7 CLI and then all projects you create will be in Angular 7. This won’t affect existing projects. I would strongly advice against this. To upgrade, you one of the following commands depending on the package manager you are using:

$ yarn global upgrade @angular/cli@7.0.0-beta.3
$ npm install -g @angular/cli@7.0.0-beta.3

And any new projects will from now onwards be created with Angular 7. The second option is to manually upgrade a single project. First, upgrade the local version of Angular CLI:

$ yarn upgrade @angular/cli@7.0.0-beta.3
$ npm update @angular/cli@7.0.0-beta.3

And then update the individual packages using ng update command: For instance, upgrading Angular Core:

$ ng update @angular/core@7.0.0-beta.5

NB: You have to pass the exact version you want, otherwise it will install the latest stable version of Angular. The same goes for angular material.

ng update @angular/material@7.0.0-beta.0

The last option is to dedicate a directory, where angular 7 projects will be placed. Since, a local version of Angular CLI supersedes the global one. Then all angular projects will be created using Angular 7. First, create a new project directory and then install angular cli:

$ yarn add @angular/cli@7.0.0-beta.3
$ npm install @angular/cli@7.0.0-beta.3

Remember to report any bugs you come across on github issue tracker. This will help improve Angular, Angular CLI and Angular 2 Material.

Logging HTTP Response Times in Angular

Maina Wycliffe — Sat, 15 Sep 2018 12:11:57 +0000

Most API and Backend Services have a metric service to measure to measure request response times. The one downside of this is, it doesn’t consider network latency, or how the device capability is affecting the performance of your web app. This is important, since a lot of the people access your web apps using low end mobile devices.

Collecting such telemetry data is vital, as it can help you fine tune the performance of your web app. In this post, we will look at how you can measure the time it takes to send and receive HTTP responses, from the frontend. Once you have access to the data, you can then send it to a logging server.

To make this information useful for analyses in future, we will also be collecting browser, operating system and any device information we can get. Remember to update your apps terms of use and privacy policy accordingly.

How it Works

We are going to be using a HTTP Interceptor to intercept both outgoing requests and incoming responses. Then, we will be adding a timestamp for outgoing requests and then read it on responses. And then, we are going to find a difference between the current timestamp and the one for outgoing request.

We will then take that information, together with device information and send it to a logging server. To collect device data, we are going to be using ngx-device-detector library. This will give us information such as OS, Browser, User Agent etc. So, without further ado.

Initial App Setup

First, we need to create a new angular application:

$ ng new ng-measure-http-response-times

Next, we will install our app dependency, using your favorite package manager:

$  yarn add ngx-device-detector
$ npm install ngx-device-detector

And then, import both DeviceDetectorModule and HttpClientModule in your application module.

...
import { HttpClientModule } from '@angular/common/http';
import { DeviceDetectorModule } from 'ngx-device-detector';
...
@NgModule({
  ...
  imports: [
    ...
    HttpClientModule,
    DeviceDetectorModule.forRoot()
    ...
  ],
  ...
})
export class AppModule {}

Create a HTTP Interceptor

Next up, let’s create a HTTP Interceptor. You can do this by generating a class using angular cli and then adding support for dependency injection.

$ ng g class http-response-time-logger

Then implement http interceptor interface, add dependency injection support and an intercept method for our class:

...
@Injectable()
export class HttpResponseTimeLogger implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { ... }
}

Next, we need to inject DeviceDetectorService to our class, so we can use it within our intercept method:

constructor(private deviceService: DeviceDetectorService) {}

And then register our interceptor class in the app module, list of providers:

@NgModule({
  ...
  providers: [
    ...
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HttpResponseTimeLogger,
      multi: true
    }
  ],
  ...
})

Adding A Timestamp Header

Now, we need to get the current timestamp header when the request is being sent. Our timestamp will be in millisecond for some level of accuracy.

const startTimestamp = new Date().getTime();

Then, we need to clone our request and add the timestamp header:

const newReq = req.clone({
headers: req.headers.set('startTimestamp', startTimestamp.toString())
});

The idea here is, you will get the header from the request on the server and return it with the response. You can use a middleware to automatically retrieve the header and attach it to the response. Next, return the newly cloned request and tap to the response.

return next.handle(newReq).pipe(
  tap((res: Response) => { });

Calculating and Logging HTTP Response Time

Then, inside our tap method, we need to read the timestamp from the response header and get the current timestamp in millisecond, then finally get the difference.

// another timestamp
const endTimestamp: number = new Date().getTime();
const startTimestamp2: number = Number(res.headers.get('startTimestamp'));
// get the difference
const responseTimes = endTimestamp - startTimestamp2;

NB: You don’t have to get the difference inside your http interceptor. You can also log the start and end timestamps and let the server handle the calculation for you.

Next up, we need to get the device information using the DeviceDetectorService method.

const deviceInfo = this.deviceService.getDeviceInfo();

Now we have everything we need to log the data. One option would be to send the data over to the logging server directly.

this.http
.post('URL HERE', {
startTime: startTimestamp2,
endTime: endTimestamp,
difference: difference,
deviceInfo: JSON.stringify(deviceInfo) // decode the data on the server
 })
.subscribe();

NB: You can also store the logs locally and collect them periodically on the background.

Logging a Portion of all Requests

You can also decide instead of logging all requests, to log some of the requests. One way you can achieve this, is by generating a random number between 1 and 6. And then check if the number is greater than 3. If the number is greater than 3, don’t log the request, otherwise log the request. At the beginning of the intercept method, we need to add the following code:

const random = Math.floor(Math.random() * 6) + 1;
// if number is less than 3 skip logging
if (random > 3) {
return next.handle(req);
}

If everything works perfectly, you will be logging three in every six requests, about 50 % of the requests at random. So, our final class should look like this:

@Injectable()
export class HttpResponseTimeLogger implements HttpInterceptor {
constructor(
private deviceService: DeviceDetectorService,
private http: HttpClient
) {}
intercept(
req: HttpRequest<any>,
next: HttpHandler
): Observable<HttpEvent<any>> {
const random = Math.floor(Math.random() * 6) + 1;
// if number is less 3 skip logging
 if (random > 3) {
return next.handle(req);
}
// get timestamp
 const startTimestamp = new Date().getTime();
const newReq = req.clone({
headers: req.headers.set('startTimestamp', startTimestamp.toString())
});
return next.handle(newReq).pipe(
tap((res: Response) => {
// another timestamp
 const endTimestamp: number = new Date().getTime();
const startTimestamp2: number = Number(
res.headers.get('startTimestamp')
);
// get the difference
 const responseTimes = endTimestamp - startTimestamp2;
// get browser information
 const deviceInfo = this.deviceService.getDeviceInfo();
// send the data to the server
 this.http
.post('URL HERE', {
startTime: startTimestamp2,
endTime: endTimestamp,
deviceInfo: JSON.stringify(deviceInfo)
})
.subscribe();
})
);
}
}

ngFor – Working with Large Lists in Angular

Maina Wycliffe — Fri, 14 Sep 2018 12:02:03 +0000

ngFor is directive that iterates through a list of data and instantiates a template for each item in the list. It does an amazing job when dealing with small list. The issue with ngFor is that it loads everything on DOM, which is slow – possibly iterating over hundreds of items and rendering them.

This can impact the performance negatively by hogging memory and processing power. On top of that, any change to a single item on the list, the whole list is re-rendered. There are workaround for this, one option is to paginate results. In this case, you display a portion of the data to the user and let the user move through the data in sets, like a book. This is great for performance but not great for the user experience since the user must always click on the next button to navigate through the data.

So, where am I going with this? In this post, I am going to look at two solutions for working with large lists in Angular without sacrificing the user experience or performance. So, without further ado.

Using angular2-virtual-scroll

Let’s take this scenario, you have 1000 items to display. If you used ngFor, all of them would be rendered, but with this library, it will only display the section of the list which is on the view point. This could be about 5 items out of a possible 1000 Items.

As you scroll down, the library will remove items not in view and add new items, maintaining a constant number of items on display. This greatly improves performance, because only a small number of items are rendered in the dom. It also provides an event trigger to dynamically load more content – for instance, from a Rest API endpoint.

Combine this with a Service Worker, and you will see incredible performance improvement in your angular app. You can watch a demo for this library in action here. To get started using this library, install it using your favorite package manager:

$ yarn add angular2-virtual-scroll
$ npm install angular2-virtual-scroll --save

Then, import the package into your app module (for lazy loaded modules, import it under a shared module or in the lazy loaded module you are going to use it).

import { VirtualScrollModule } from 'angular2-virtual-scroll';

And then, add it to your imports array:

...
imports: [
  ...
  VirtualScrollModule
],
...

Now, you can use it in your app, as follows:

<virtual-scroll [items]="items" (vsUpdate)="viewPortItems = $event">
<my-custom-component *ngFor="let item of viewPortItems">
</my-custom-component>
</virtual-scroll>

NB: As you can see from the above demo, the library determines the items in view point and creates a list of those items which you can iterate through using ngFor.

You can visit the documentation of the library here. And you can also find some samples here.

Using ngVFor Libraries

This is a relatively new library – about a month old as of the time of writing. The authors of this library intended it to be used as a direct replacement of ngFor. Hence calling it Virtualization for ngFor (ngVFor). What caught my eye was the incredible performance gain being promised. I mean 90 times faster than ngFor cannot be ignored. It works exactly like ngFor, and you can replace globally all your ngFor directives with ngVFor directive and you will still see some performance gain.

<div class="data-list-items-container" ***ngVFor**="let row of testData"></div>

But to fully realize the promised performance gain though, you must wrap your ngVFor around a virtualization container.

**<nggud-items-control></nggud-items-control>**

Just like the Angular Virtual Scroll library above, this will measure the view point and pass that information to the *ngVFor directive to only display items on view point, this allows for faster rendering and faster scroll through your content. For more information about the performance benefits and technical details, visit this blog post on medium.

To get started using this library, install it using your favorite package manager:

$ yarn add ngvforlib
$ npm install ngvforlib

Then, import it to your app module:

import { NgGUDCoreModule } from 'ng-vfor-lib';

And then add it to the list of your imports:

...
imports: [ 
...,
NgGUDCoreModule
],
...

And finally, you can use inside your components:

<nggud-items-control>
<div class="data-list-items-container" *ngVFor="let row of testData">
<!-- ... -->
</div>
</nggud-items-control>

If you want to understand how it works, please visit this blog post here.

Conclusion These two libraries – one new and the other old are great for

handling large lists in angular. I am quite sure, they are not the only once out there. If you have any library that I should add to this list, you can post it on the comment section below and I will have a closer look at it. For tables, I suggest using something like Angular CdkTables or something similar which provides features for displaying data inside tables.

Service Worker – Optimizing the Performance of an Angular App

Maina Wycliffe — Wed, 12 Sep 2018 11:44:42 +0000

Basically, a service worker intercepts all outgoing http requests sent by your application on the browser. You can choose which request to respond to by using a set of rules (policies) to guide the service worker on how to handle different requests.

This gives your app some level of offline capabilities and can hugely impact the performance of your app by serving content even faster, on repeat calls and visits. On top of that, it will take some load off your servers, which can reduce your expenses.

NB: At its simplest, a service worker is a script that runs in the web browser and manages caching for an application.

Introduction

In this post, I will take a closer look at how to optimize the performance of angular app using a Service Worker. We will be using an old tutorial we worked on sometime back for creating an Angular Material AutoComplete with HTTP lookup. It queries the Github API with the keyword you are typing and return a list of possible repos for you to choose one. The more you type, the more relevant the queries become.

You can learn more about that here. So, in this post, we will be adding and configuring a service worker to the demo we created. We are going to aggressively cache the queries to the Github API using a service worker for 30mins. In case of repeated requests, the service worker will serve the same results from a local cache. Without further ado:

Adding Support for a Service Worker

Adding a Service Worker is rather s straight forward process in Angular 6. This is due to angular schematics support, which was introduced in Angular 6. We can achieve this by using the command below:

$ ng add @angular/pwa

The above command, makes modification to your app, adding some files and boilerplate code for both Progressive Web Apps (PWAs) and Service Worker.

Let’s take a close look at Service Worker specific modifications: In the main app module, the following code was added:

ServiceWorkerModule.register('ngsw-worker.js', {
enabled: environment.production
});

This enables a service worker for your application during production. Please note, due to security issues, a service worker is only enabled when your site is loaded on HTTPs or on Localhost. And another file was also created at the root of the workspace – ngsw-config.json.

By default, it contains rules to cache static assets of a our PWA. They are all contained in a json property called assetsGroup, which are resources that are part of the app versions and are all updated together. Resources such as JS, CSS, Images and any links from CDNs and other static resources should be added here.

{
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": ["/favicon.ico", "/index.html", "/*.css", "/*.js"]
}
},
{
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": ["/assets/**"]
}
}
]
}

Configuring Service Worker for API Calls

By default, http requests are not cached by the service worker. You must add rules to specifically cache various HTTP requests. This are grouped together in a Data Group property.

NB: Data Groups is an array of Data Group items, which can be presented in the form of the following Typescript Interface:

export interface DataGroup {
name: string;
urls: string[];
version?: number;
cacheConfig: {
maxSize: number;
maxAge: string;
timeout?: string;
strategy?: 'freshness' | 'performance';
};
}

Taking a close look at the above interface, it has the following properties:

Name – The name of the policy. Can be anything.
URLS – An array of URLs strings to cache. Could follow a pattern.

Note: Negative glob patterns are not supported.
Version (Optional) – Indicates that a new version of the API is backward compatible and old versions may be discarded.
CacheConfig: This has 4 properties:
- MaxSize – The maximum number of items to be cached.
- MaxAge – How long something stays in the cache. Measured in minutes (m), hours (h), days (d), milliseconds (u) and seconds (s).
- Timeout – Indicates how long the service worker will wait for a response before falling back to a service worker cache.
- Strategy – Two strategy can be applied here:
  - Freshness – always looks for fresh content from the backend, fallbacks to cache in case of timeout – relies on timeout setting above.
  - Perfomance – always use a local cache whenever available and has not expired – relies on maxAge setting above.

Configuring our Demo App Service Worker

First, we are going to add a data group to our ngsw-config.json file.

{
//...
"assetGroups": [
// ...
],
"dataGroups": [
//...
]
}

Next, we are going to add a new caching policy or rule for our API Call to Github. We will name the policy Github API Call. The new policy should look like this:

{
"name": "Github API Call",
"urls": ["https://api.github.com/search/repositories"],
"cacheConfig": {
"maxAge": "30m",
"strategy": "performance",
"maxSize": "10"
}
}

In the above configuration, we are setting a maximum age of 30 minutes for all request to our URLs. You can reduce that time so that it reflects the frequency of updates on your backend. I am also using the performance strategy, requiring use of local cache if it is not expired. I have set the maximum number of cached requests to 10 requests, after that, old request are discarded.

Demo and Source Code

If you want to see the above demo in action, you can find it here. Be sure to open the dev tools and observe the network traffic as the service worker responds to the requests. Run a few requests first, then take the app offline and repeat the request and see whether it still works. You can also find the source code of the angular app here.

Angular CdkTable – Working with Tables like A Pro – Part 1

Maina Wycliffe — Mon, 10 Sep 2018 14:16:23 +0000

Angular Component Development Kit (CDK) is a set of un-opinionated developers’ tools to add common interaction behavior to your angular UI with minimal effort. It mainly offers some of the tools found in Angular 2 Material, but with the freedom to use the UI of choice.

Whether you want to use Bootstrap, Clarity Design System etc. This will be a two-part post. This post will be an introduction to Angular CdkTable, with a working demo. In the second post, we will add additional functionality such as sorting, searching, which adds some flair to your tables. We will use Angular CdkTable to handle the table controller and Bootstrap for the UI using Bootstrap Table Component. This can easily be swapped for a custom CSS solution or any other UI Framework you want. Let’s get started

Setting up Bootstrap

First, we are going to create a new application and add Angular CDK and Bootstrap.

$ ng new angular-cdk-table-demo

And then, install Angular CDK, which is part of Angular Material and bootstrap.

$ yarn add @angular/cdk bootstrap
$ npm install @angular/cdk bootstrap

We are only interested with CSS Bootstrap and not jQuery. So, we need to import those SCSS files into our app inside angular.json under styles.

"projects": {
  "your-app-name": {
    "targets": {
       // ...
       "build": {
          // ...
          "options": {
            // ...
            "styles": [
              // ...
              "./node_modules/bootstrap/scss/bootstrap-grid.scss",
              "./node_modules/bootstrap/scss/bootstrap-reboot.scss",
              "./node_modules/bootstrap/scss/bootstrap.scss"
              // ...
            ],
            // ...
          }
}
}
}
}

Now, we have partially integrated bootstrap in to our Angular app. If you wish to fully use the power of bootstrap (Including replacing jQuery with Angular native components) follow the tutorial here.

Using Angular CdkTable on Our Component Controller

First, let’s import CdkTableModule and add to our list of imports in our application module (app.module.ts).

import { CdkTableModule } from '@angular/cdk/table';

And then:

imports: [
//...
 CdkTableModule //...
];

Next up, we need data to display in our table. So, I went ahead and created some data that I think makes sense. We add the data as a component property – StudentData. I also went ahead and created an interface for our data – StudentResults.

public StudentData: StudentResults[] = [
  { name: 'John', class: 'Grade 6', marks: '300', grade: 'B' },
  { name: 'Charles', class: 'Grade 6', marks: '300', grade: 'B' },
  { name: 'Eunice', class: 'Grade 6', marks: '420', grade: 'A' },
  { name: 'Kate', class: 'Grade 6', marks: '410', grade: 'A-' },
  { name: 'Joe', class: 'Grade 6', marks: '310', grade: 'B-' },
  { name: 'Peter', class: 'Grade 6', marks: '200', grade: 'C' },
  { name: 'Henry', class: 'Grade 6', marks: '250', grade: 'C+' },
  { name: 'Paul', class: 'Grade 6', marks: '450', grade: 'A' },
  { name: 'Pius', class: 'Grade 6', marks: '400', grade: 'A-' },
  { name: 'Kennedy', class: 'Grade 6', marks: '150', grade: 'D' }
];

Then, we need to prepare our data, so we can connect it to our Angular CdkTable. First, we need a DataSource property in our component:

public StudentDataSource: BehaviorSubject<StudentResults[]>;

Then, connect our StudentData to that property.

constructor() {
  this.StudentDataSource = new BehaviorSubject<StudentResults[]>(
    this.StudentData
  );
}

Next, we need to define the columns that will be visible for our table:

public DisplayedColumns: string[] = ['no', 'name', 'class', 'marks', 'grade'];

Now, let’s head over our template and create the view.

Creating our View with Bootstrap

Let’s add our table, with Bootstrap classes. I am going to have a condensed, stripped and dark themed table. You can learn more about the bootstrap tables here.

<table class="table table-condensed table-striped table-dark"></table>

Next, let’s add a cdk-table directive and connect our our Data Source through dataSource property.

<table
class="table table-condensed table-striped table-dark"
cdk-table
[dataSource]="StudentDataSource"
></table>

Next, we need to define the columns for our table and connect them to the column data. We do this by using ng-container with cdkColumnDef with the column name. Inside ng-container, we need to define the header and body cell of our column.

<ng-container cdkColumnDef="name">
<th cdk-header-cell *cdkHeaderCellDef>Name</th>
<td cdk-cell *cdkCellDef="let element">{{element.name}}</td>
</ng-container>

We need to repeat the above process, for each column we have in our table:

<ng-container cdkColumnDef="name">
<th cdk-header-cell *cdkHeaderCellDef>Name</th>
<td cdk-cell *cdkCellDef="let element">{{element.name}}</td>
</ng-container>
<ng-container cdkColumnDef="class">
<th cdk-header-cell *cdkHeaderCellDef>Class</th>
<td cdk-cell *cdkCellDef="let element">{{element.class}}</td>
</ng-container>
<ng-container cdkColumnDef="marks">
<th cdk-header-cell *cdkHeaderCellDef>Marks</th>
<td cdk-cell *cdkCellDef="let element">{{element.marks}}</td>
</ng-container>
<ng-container cdkColumnDef="grade">
<th cdk-header-cell *cdkHeaderCellDef>Grade</th>
<td cdk-cell *cdkCellDef="let element">{{element.grade}}</td>
</ng-container>

The final thing we have to do, is define our rows – header and body rows. For our header row, we are going to add cdk-header-row directive and pass the list of columns to display through the cdkHeaderRowDef directive.

<thead>
<tr cdk-header-row *cdkHeaderRowDef="DisplayedColumns"></tr>
</thead>

And then, in our table body, we are going to add a cdk-row directive and pass the column row definition data through the cdkRowDef directive:

<tbody>
<tr cdk-row *cdkRowDef="let row; columns: DisplayedColumns;"></tr>
</tbody>

And that’s it. We have successfully used Angular CdkTable with Bootstrap to display data.

Source Code and Demo

You can find the source code for this post here and the demo here.

Working with Angular CLI Budgets in Angular 6

Maina Wycliffe — Sat, 08 Sep 2018 10:57:10 +0000

In this post, I am going to cover Angular CLI Budgets in details. So, what are CLI Budgets? CLI Budgets is a way of way of ensuring that your angular final build bundles do not deviate by much from the expected sizes. For instance, if you expected the whole built application size to be 2MB, with a deviation of +/-10% for warning and +/- 20% for errors. You can set this configuration in Angular, so that during the build process, Angular CLI will throw a warning when it deviates by more than 10% and an error when it deviates by more than 20%. This is what is known as an Angular CLI Budget.

As developers, we are sometimes experimenting with our projects, trying new things. This can result to some unused libraries being left inside our application that can bloat the size of the final built artifacts. With Angular CLI Budgets, you can manage this by ensuring that your production build doesn’t deviate by much from your own expectation.

Please note, Angular CLI Budgets will not determine for you which libraries are causing your project to be over or under budgets. But, it will give you a hint, which you must follow up and investigate. This is where tools such as Webpack Bundle Analyzer and Source Map Explorer can be useful.

Adding CLI Budgets to your App

First, open your angular.json, at the root of your Angular CLI Workspace. Next, we need to add our budget for our environments.

"projects": {
  "angular-cli-budgets-demo": {
    // ...
    "architect": {
      "build": {
        // ...
        "configurations": { // <==== your environments are here
          "production": { // <==== production environment
// ...
            "budgets": []
          },
          "staging": { // <===== custom staging environment
              // ...
              "budgets": []
          }
        }
      },
 // ...

We will place our budget just below our other environment configurations. Our budget property accepts an array of budgets with the following content:

"budgets": [
  {
     "type": "bundle", //_** type of budget to setup**_
     "name": "main", //_** the name of the bundle to be tested**_
     "baseline": "300kb", //_** the baseline size for comparison**_
     "error": "40%", //_** the deviation from the baseline to trigger error (+/- 40%)**_
     "warning": "30%", //**_ the deviation from baseline to trigger warning (+/- 30%)_**
     "maximumError": "20%", _**// triggers error if size is 20% more than baseline**_
     "maximumWarning": "10%", //_** triggers warning if size is 10% more than baseline**_
     "minimumError": "20%", //_** triggers error if size is 20% less than baseline**_
     "minimumWarning": "10%", //**_ triggers warning if size is 10% less than baseline_**
   }
]

The following types are allowed:

bundle – The size of a specific bundle.
initial – The initial size of the app.
allScript – The size of all scripts.
all – The size of the entire app.
anyScript – The size of any one script.
any – The size of any file.

Setting the Maximum Size Budget

Next, let’s say you didn’t want your built application to be more than a specific size – like 400KB. Let’s add a budget for that and see how it goes:

{
"type": "all",
"baseline": "400kb",
"maximumError": "25%",
"maximumWarning": "12%"
}

Since our app is small, this doesn’t trigger any errors or warnings as shown below:

Now, let’s lower our baseline to 250KB:

As you can see from the image above, this triggers the following error and warning:

WARNING in budgets, maximum exceeded for total. Budget 307 kB was exceeded by 70.5 kB.
ERROR in budgets, maximum exceeded for total. Budget 358 kB was exceeded by 19.3 kB.

And if we increase the baseline value to 300KBs, it should trigger the warning only, as shown below:

Setting a Deviation from Baseline Budget

Let’s say we want our error to be trigger if the main bundle is 20% large or smaller than the size, and a warning if it’s 10%. Our budget will look like this:

{
"type": "bundle",
"name": "main",
"baseline": "300kb",
"error": "20%",
"warning": "10%"
}

Our main bundle is about 250Kb, this should trigger a warning but not an error. This is because the minimum threshold value of 90% of 300Kb (276kb) was not reached but it was reached by the error minimum threshold which is 80% of 300Kb (240kb).

And if we lower our error threshold to 15%, we will trigger both errors:

I hope now you are getting the picture. If we were to lower the baseline from 300kb to 200kb. We should trigger the maximum threshold error and warning instead of the previous minimum threshold error.

Setting Minimum Size Budget

You can also set the minimum size for various output artifacts. An error or warning is triggered if the specified file is less than the minimum size. Let’s modify the above budget and instead set a minimum size instead of a deviation:

{
"type": "bundle",
"name": "main",
"baseline": "300kb",
"minimumError": "20%",
"minimumWarning": "10%"
}

And if we build this, it should trigger only a warning and not an error:

If we lower the minimum error from 20% to 15% we should trigger both an error and a warning:

Final Thoughts

I hope this gives you an idea of how to work with Angular CLI Budgets. I steered cleared from dealing with bytes, KBs and Mbs because I found it to be working rather inconsistently when it comes to errors, minimum errors and warning. That said, I found working with percentages to be enough for my work and I would recommend that to anyone.

Must Have Tools for Angular Developers 2018

Maina Wycliffe — Thu, 06 Sep 2018 06:05:32 +0000

In web development or any job in general, tools are very vital for you to do your job right. Tools help improve productivity, reduce mistakes and provide useful and rich insight towards your code. Angular is build around excellent tools such as Angular CLI. You can improve your experience by adding a few more tools to your tool box. Here are six tools for you to consider:

Angular Console

You can think of Angular Console as a Graphical User Interface for Angular CLI. It provides the power of Angular CLI but with a nice user interface to interact with. When you open an angular cli workspace, Angular console will show you all apps and libraries within the workspace. It provides a nice visual interface to do almost everything Angular CLI can do. In fact, from what I can tell, it provides an abstraction of Angular CLI, running those commands for you in the background. “Whether or not you are brand new to the Angular ecosystem or a seasoned pro, a command-line novice or a power-user, Angular Console will add a lot of value to your workflow.

https://vimeo.com/284057890

With a single click of a button, you can accomplish various tasks around your app such as building, serving, generating etc. It even provides a link to your default text editor if you wish to work on your project.

For more information about Angular Console, visit the official website here.

Compodoc

Would you like to generate a static documentation of your application? That’s exactly what Compodoc does. The idea here is that it generates a clear and rich in information documentation of your angular application, with the goal of helping other developers – like team members – understand the features of your application/library better.

Other developers can then navigate through your application, with access to how different modules, components, services relate to each other and work.

It has full support for Angular CLI out of the box – no configuration needed. And it also supports JSDoc Light for providing more information inside your code. Other features include: Documentation Coverage Reports – Reports on how much of your code is documented.

And it has a clean and easy to use interface which provides excellent user experience. With support for themes, automatic table of contents and search for going through the documentation. To get started with compodoc, install it globally using your favorite package manager:

$ yarn global add @compodoc/compodoc
$ npm install -g @compodoc/compodoc

And then define a script task in your package.json:

"scripts": {
    // ...
    "compodoc": "./node_modules/.bin/compodoc -p src/tsconfig.app.json"
},

And then run it:

$ npm run compodoc

You can learn more about compodoc here and it’s usage here.

Webpack Bundle Analyzer

If you would like to know what your final build of Angular is made of, then this is the go to tool. It helps you visualize your projects webpack output files with a nice interactive zoomable tree map. With Webpack bundle analyzer, you can simply walk around your final angular build, with access to your code and third-party libraries you have used.

This is particularly useful if you want to understand why your app is so huge. Or if you basically want more insight into the building blocks of your application. Helping you to discover which third-party libraries made it to the final build. With this information, you can decide to remove and optimize your application ensuring it meets your expectation.

It enables you to see the sizes of your application before minification, after minification and after gzip compression by the server.

To get started with this tool, install is a dev dependency in your project using your favorite package manager:

$ npm i webpack-bundle-analyzer --save-dev
$ yarn add webpack-bundle-analyzer –dev

Then, build your application with --stats-json flag:

$ ng build --prod --stats-json

And finally, run Webpack Bundle Analyzer against the generated stats.json file located under dist/app-name for angular 6, and dist for angular 5 and below:

$ npx webpack-bundle-analyzer dist/<APP-NAME>/stats.json

Your app name can be found inside your angular.json configuration file.

You can learn more about Webpack Bundle Analyzer here.

Source-Map-Explorer

This is another tool to help you understand your final build better. It analyses your compiled angular app byte by byte and create a tree map visualization of where your code is coming from. If your final build is too large/small you might want to understand what library is contributing to that bloat. For a quick demo of this tool, checkout this video below:

https://www.youtube.com/watch?v=7aY9BoMEpG8

To use source-map-explorer, first install it globally using your favorite package manager:

$ npm install -g source-map-explorer
$ yarn global add source-map-explorer

And then build your angular application with --source-map flag set to true:

$ ng build --source-map=true --prod

And finally run it on one or more of your generated bundles. For instance, main bundle:

$ npx source-map-explorer dist/main.xxx.bundle.js

TSLint

“TSLint is an extensible static analysis tool that checks TypeScript code for readability, maintainability, and functionality errors.”

This is a set of rules, which you can customize, that help improve the quality of your code. It is great especially for teams, ensuring consistency style of coding from different developers.

On top of that, it has rules regarding almost every scenario such as variable, class and interface naming, line breaks, where to place the bracket etc. And it is supported by a host of text editors out there, and angular CLI will install it when you use it to setup your angular project. All you have to do is find the appropriate extension/plugin for your favorite text editor.

For more information about TSLint, visit the official git repo here.

Augury

This is a Dev Tool Extension for both Chrome and Firefox that helps you visualize your angular application through component trees and debugging tools. It enables you to gain useful insight such as application structure, change detection and performance characteristics of your application.

“Augury is the most used Google Chrome Developer Tool extension for debugging and profiling Angular 2+ applications.

This is a useful tool to have since it will provide you with useful insight about how your app is behaving on the browser. For this to work though, either your app must be in developer mode or at least generate source maps, if it’s a live application. You can generate source maps by passing the --source-map=true flag during build:

$ ng build --source-map=true --prod

You can install this extension on chrome here and Firefox here. For more information, please visit their github repo here or website here.

Final Thoughts

These are some of the tools that I can confidently recommend to you. There are other honorable mentions such as codelyzer and ngrev both from the same developers. Feel free to checkout on these two tools.

And finally, thank you for getting this far, if you liked this post feel free to share, and if you didn’t, tell me why on the comment section below.

Angular Hidden Treasures – Features you might know About

Maina Wycliffe — Tue, 04 Sep 2018 13:43:13 +0000

In this post, we are going to look at four important features in angular that can help you during your app development life cycle. These features are there but are mainly not openly advertised unless you go out looking for them. This is not because they are not useful but can be quite difficult to use for beginners and not entirely needed for small project.

Angular CLI Budgets

This is a simple but quite useful feature for Angular. Basically, you specify a baseline size you expect for various parts of your angular app. Then, set how much the size of your parts should deviate from the baseline – a threshold – both minimum and maximum. And during compilation, Angular CLI will check the output artefacts against the configuration and warn you when you are over or under the budget you set. This feature ensure that the final output of angular projects meets your expectation – in terms of expected bundle sizes. This saves you from having to breakout the bundle analysis tool on each production build. You only have to analyze the bundle when you are over or under budget to try and understand why.

Usage

The budget configurations are set inside angular.json under the environment you wish to enforce your budgets for:

// angular.json
{
//...
"configurations": {
"production": {
//...
"budgets": [
{
"type": "bundle", // check allowed types below
"name": "vendor",
"baseline": "750kb", // baseline size for comparison. (size in b, kbs, mbs. **No percentage allowed here**)
"warning": "100kb", // threshold for warning relative to baseline. **Can also be in percentage**.
"error": "200kb" // threshold for error relative to the baseline. **Can also be in percentage.**
}
]
}
}
}

NB: You provide the baseline size of the application and then provide values of how much the size can deviate from the that baseline, from a maximum and minimum value. In our configuration above, you get a warning if it deviates from the baseline by 100kb and an error if it deviates by 200kb.

Allowed Types are:

bundle - The size of a specific bundle.
initial - The initial size of the app.
allScript - The size of all scripts.
all - The size of the entire app.
anyScript - The size of any one script.
any - The size of any file.

Code Coverage

The second feature is for testing angular apps (angular code base). When running tests in Angular CLI, using ng test, you can enable code coverage reports. They allow you to see which parts of the code base has not been tested properly. To generate a code coverage report, you must pass --code-coverage flag when running tests:

ng test --watch=false --code-coverage

You can also enable it by default in angular.json to allow code coverage reports to be generated by default:

// ...
"test": {
  "builder": "@angular-devkit/build-angular:karma",
  "options": {
    "main": "src/test.ts",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "src/tsconfig.spec.json",
    "karmaConfig": "src/karma.conf.js",
    "styles": ["src/styles.css"],
    "scripts": [],
    "assets": ["src/favicon.ico", "src/assets"],
    "codeCoverage": true // <== Code Coverage Reports Here
  }
},
//...

Now, the neat part is that you can enforce Code Coverage in your Angular Application. For instance, if you wanted 80% of your code to be covered, all you have to do is open karma.conf.js and add the following content in the coverageIstanbulReporter property:

coverageIstanbulReporter: {
  reports: ['html', 'lcovonly'],
  fixWebpackSourcePaths: true,
  thresholds: {
    statements: 80,
    lines: 80,
    branches: 80,
    functions: 80
  }
}

NB: The threshold property will enforce a minimum of 80% code coverage for each of the items under threshold when unit tests are run in the project.

Generating an App Shell

The third feature in this list, is for performance optimization. The app shell or application shell is the minimum CSS, HTML and JavaScript required to power UI for an application. The goal here is to provide as fast as possible a shell of your app (i.e. navigation, footer, header, loading bar etc.) – as the rest of the content is being loaded after initialization. The performance is further improved when cached offline (using service workers) for returning users, giving them near native performance improvement.

NB: An application shell (or app shell) architecture is one way to build a Progressive Web App that reliably and instantly loads on your users’ screens, similar to what you see in native applications.

Angular provides a feature to generate a prerendered app shell for your application for a specific route. This allows users to see a very fast paint, as the app is being loaded. Once initialized, the default view can be replaced with intended content. The prerendered page is loaded with the initial http response from the server together with the index.html. Since its route specific, this will result in more page specific resources being loaded initially. Since, this is a long but useful feature, I am going to recommend the following tutorial from Angular University. You can also learn more about App Shell here.

Hot Module Replacement (HMR)

Our final feature is a webpack feature that can be enabled for angular. This feature allows for modules to be replaced without need for a full browser refresh. This allows you to retain much of the application state, usually lost when reloading. It also saves you valuable times by only updating what has changed. And changes to the code reflect almost instantly, like when you are messing with dev tools on the browser. I previously covered this feature in details here – You will be able to run how to enable and use this feature in Angular.

How to Handle Errors Globally in Angular

Maina Wycliffe — Sun, 02 Sep 2018 13:28:58 +0000

By default, when errors occur in Angular during runtime, they are written to the browser console. This is great during development and testing but not great when running on production. This is one environment where you have no access to. And the users may lack technical skills to help. No matter how hard you work on your app, errors are almost inevitable.

It is therefore necessary to be able to handle errors in a friendly manner and collect them for investigation, analysis and correction. In this post, I will show you how to intercept the default error handler, and then send the errors to a remote logging service (Simple REST API call) and show a friendly message to the user.

Why?

In a previous post, I wrote about catching and logging http errors and some readers asked whether it is wise to trust logs from the users. My argument is simple, while that data is not 100% trustworthy, it provides an important diagnostic data which can guide you in discovering new errors in your application.

It helps you know which parts of your application require attention and investigation. Most of your users will most likely leave your app without leaving feedback if it ever fails. Also, collecting such errors provides technical information (i.e. Stack Trace) which is not possible to get from users. You could also use Machine Learning to dig into the logged data and wind out false reports.

Creating a Custom Error Handler Class

First, we need to create a new class using Angular CLI.

ng generate class custom-error-interceptor

Next, we need to implement the ErrorHandler interface for our new class.

export class CustomErrorHandler implements ErrorHandler {}

Then, we need to add an handleError method in our class, which will catch the errors in our app and do something with the errors.

handleError(error: any) {}

The method accepts an error parameter which is the error content. Now, we need to do something with our error when it gets here. One option would be sending it to a remote logging server such as AWS Cloud Watch and provide a custom error message to the user. To do this, we need to create a logger service and inject it to our custom error handler class.

constructor(private loggerService: LoggerService) {}

And then inside our handleError method, we can send the error to an API End Point.

this.loggerService.log(error).subscribe();

After that we can show a friendly message to the user. For this we will use Angular Material Snackbar. First, we are going to inject MatSnackBar to our custom error handler class, next to our loggerService we injected previously.

constructor(private loggerService: LoggerService,private snackBar: MatSnackBar) {}

Now, we can show our message:

this.snackBar.open('Your message here', 'Dismiss', {
duration: 2000
});

NB: This can be replaced with something like Angular Material Dialog or Bootstrap Modal Window. You can also use Angular Flex Layout to adaptively show either a snack bar on a small device and a modal window on a large device.

Now, our complete class should look like this now:

export class CustomErrorHandler implements ErrorHandler {
constructor(
private loggerService: LoggerService,
private snackBar: MatSnackBar
) {}
handleError(error: any) {
// send to the observable
 this.loggerService.log(error).subscribe();
// next show a friendly message
 this.snackBar.open('Your message here', 'Dismiss', {
duration: 2000
});
}
}

Our Logger Service

Our logger service will look something like this:

@Injectable({
providedIn: 'root'
})
export class LoggerService {
constructor(private http: HttpClient) {}
log(error: any): Observable<boolean> {
return this.http
.post(
'Your URL Here',
error, // <<<<=============== sending error as body
 {
observe: 'response'
}
)
.pipe(map(e => true));
}
}

NB: Please note, that am sending the error as the body. This might not work depending on the logging server. You might have to parse the error and compose a message before sending it to the logging server. You can also send it a base64 string and decode it on the server before storing it.

Registering the Custom Error Handler

Finally, for our custom Error Handler to work, we need to add it to the list of our providers:

@NgModule({
declarations: [AppComponent, HttpClientModule],
imports: [BrowserModule, BrowserAnimationsModule],
providers: [
{
provide: ErrorHandler,
useClass: CustomErrorHandler
}
],
bootstrap: [AppComponent]
})
export class AppModule {}

Enabling Hot Module Replacement (HMR) in Angular 6

Maina Wycliffe — Fri, 31 Aug 2018 09:12:40 +0000

Hot Module Replacement (HMR) is a key webpack feature that is not enable by default in Angular. It allows for modules to be replaced without need for a full browser refresh. This allows you to retain much of the application state, usually lost when reloading. It also saves valuable times by only updating what has changed. And changes to the code reflect almost instantly, like when you are messing with dev tools on the browser. This is great for productivity.

In this post, I will show you how to add Hot Module Replacement to your angular project. We will add it as an extra tool for you, without taking away the tools you are already used to such as ng serve. If you find it useful, you can continue using it and if not, nothing changes, you can fallback to your old tools. To enable HMR, we are going to make some modification to our code and add a new dev dependency. Let’s gets started:

Installing Hot Module Replacement Dependency for Angular

First, we are going to install @angularclass/hmr dev package:

yarn add –dev @angularclass/hmr
// or with npm
npm install --save-dev @angularclass/hmr

Next, we need to add an extra environment for our angular application, specifically for HMR. On top of that, we need to modify our existing environments and set HMR to false. You can learn more about environment variables here.

Adding HMR Environment

Create a new environment file called environment.hmr.ts, under src/environment directory at the root of your workspace. Add the following code:

export const environment = {
production: false,
hmr: true
};

Please note, we added an extra HMR property for our environment and set it to true. After these, we need to modify our angular configuration and add this environment for both our build and serve properties. Open angular.json at the root of your angular workspace. Under build property, add a new configuration for HMR, with the content below:

"build": {
    "configurations": {
      // ...
      "hmr": {
        "fileReplacements": [
          {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.hmr.ts"
          }
        ]
      }
    }
  }

And then under serve property, add another HMR configuration with the content below:

"serve": {
    "configurations": {
      // ...
      "hmr": {
        "hmr": true,
        "browserTarget": "<project-name>:build:hmr"
      }
    }
  }

Next up, modify your typescript configurations (src/tsconfig.app.json), to add Node to the typings array.

{
// ...
"compilerOptions": {
// ...
"types": ["node"]
}
}

Updating Existing Environments

Next, we need to modify our existing environment files, and set the HMR property to false. So, inside our environment.ts and environment.prod.ts add the hmr property and set it to false. Do the same for all other extra environments you may have in your app.

// environment.prod.ts
export const environment = {
production: true,
hmr: false
};

// environment.ts
export const environment = {
production: false,
hmr: false
};

Configure your App to Use HMR

Next up, we need to configure our angular app to use Hot Module Replacement. If you have an Angular Workspace with multiple projects/apps, you will have to do this for each app. First, create a new file – src/hmr.ts – next to the src/main.ts file and add the following code:

import { NgModuleRef, ApplicationRef } from '@angular/core';
import { createNewHosts } from '@angularclass/hmr';
export const hmrBootstrap = (
module: any,
bootstrap: () => Promise<NgModuleRef<any>>
) => {
let ngModule: NgModuleRef<any>;
module.hot.accept();
bootstrap().then(mod => (ngModule = mod));
module.hot.dispose(() => {
const appRef: ApplicationRef = ngModule.injector.get(ApplicationRef);
const elements = appRef.components.map(c => c.location.nativeElement);
const makeVisible = createNewHosts(elements);
ngModule.destroy();
makeVisible();
});
};

Then, modify src/main.ts file to use src/hmr.ts code when serving your app with Hot Module Replacement enabled. This modification will only apply when you serve your app with --configuration hmr flag and not under any other circumstances.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { hmrBootstrap } from './hmr';
if (environment.production) {
enableProdMode();
}
const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);
if (environment.hmr) {
if (module['hot']) {
hmrBootstrap(module, bootstrap);
} else {
console.error('HMR is not enabled for webpack-dev-server!');
console.log('Are you using the --hmr flag for ng serve?');
}
} else {
bootstrap().catch(err => console.log(err));
}

Serving your App with HMR Enabled

Now, you can serve your app using the command below:

ng serve --configuration hmr

But since this is a long command to write every time, we can add it to our npm scripts in our package.json to make it shorter and easier to remember:

"scripts": {
 // ...
 "hmr": "ng serve --configuration hmr"
}

And finally, we can just run:

npm run hmr

Each time you run the command, you will get the following warning:

NOTICE: Hot Module Replacement (HMR) is enabled for the dev server.

With some more information on where to learn more about Hot Module Replacement.

Building Docker Images for Deploying Angular Apps

Maina Wycliffe — Wed, 29 Aug 2018 14:32:03 +0000

In this post, we are going to look at how to deploy an angular app using docker. Docker containers can be used to simplify the process of developing, testing and deploying your app into different environments. With docker containers, you can be assured that the application will run the same no matter the environment in which it is deployed.

In this demo, we are going to build a docker image for deploying an angular app to two different environments. One for production and the other for staging. Our demo application is going to have 3 environments – development, staging and production. We will be using the development environment locally for developing and testing using ng serve. While the other two environments are deployed remotely. If you don’t know how to setup environments in angular, you can checkout this post I did earlier. Without further ado.

How it works

Once you are ready to deploy on either environment – staging or production, we are going to use a dockerfile to specify how our deployment image with our built app is going to be build. A dockerfile is a special file that contains instructions on how to build our docker image. Since we need to automate the build process as much as possible, we are going to be building the angular app together with docker image.

First, we are going to pull a NodeJS (node:8.X.X) from docker hub and use it to build our angular application. Then, we will copy our compiled angular application inside the dist directory to our deployment container. Our deployment image will be a nginx alpine image – as you might have guessed using nginx proxy server. We will also need to copy the configuration to redirect all paths to index.html and compress our server output.

Getting Started

To make things simple, we will have two dockerfiles for each of our deployment environments. They will have some minor differences such as the target environment when building our angular application. We are going to be using a multi stage docker build, where in stage 1, we will create a docker image to build our angular application.

And then in the second stage we copy the results of the first stage and use it build and create a super light deployment docker image. This allows our final image to only contain the important files for deployment without any development files and tools being carried over. You can learn more about docker multistage build here.

First, we need to create a new directory called .docker in the root of our angular workspace. Inside it we are going to create three files. Two dockerfiles (prod.dockerfile and staging.dockerfile) and a nginx (nginx.conf) configurations file.

Nginx Configurations

In this configuration file, we are going to have rules for redirecting all paths to index.html and add rules to compress content before being sent to the browser. You can replace this with apache or any other web server you are familiar with. Just make sure the configuration files are okay for your server and copy them in the correct directory inside your final image. Inside the nginx configuration file (nginx.conf), add the following content:

worker_processes  1;
events {
    worker_connections  1024;
}
http {
    server {
        listen 80;
        server_name  localhost;
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        include /etc/nginx/mime.types;
        gzip on;
        gzip_min_length 1000;
        gzip_proxied expired no-cache no-store private auth;
        gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
location / {
            try_files $uri $uri/ /index.html;
        }
    }
}

Creating the Dockerfiles

Both dockerfiles will be the same, with some minor differences. For instance, the staging dockerfile will build targeting staging environment while the production will build with the prod flag. It is also possible to use the same dockerfile for both, but I find separating them doesn’t hurt. It also allows me to experiment with the staging version before making the final changes to the production one. This is all up to you. We are going to separate the dockerfiles into two sections, staging 1 and stage 2. As I said earlier, stage 1 will build the angular application and stage two will create a docker image for deployment.

Stage 1

First we need a base image to build our first docker image on, since we are building using NodeJS, we will use node:8.11.4 docker image. Feel free to use any version of NodeJS you are comfortable with.

FROM node:8.11.4 as node

Next, we declare a working directory inside our image and then copy our angular workspace into the directory.

WORKDIR /app

COPY . .

Next, we need to install our @angular/cli and if you are a fan of Yarn like me, install it too.


RUN npm i yarn

RUN yarn global add @angular/cli@latest

Next, install the dependencies for your project by running either yarn install or npm install depending on the package manager you are using. And finally, it’s time to build your angular application. For staging environment, we will use the following command:


RUN ng build --configuration=staging

While for production environment, we will use the following command:

RUN ng build –prod

And now let’s move to stage two.

Stage 2

In this stage, we are going to base our image on nginx:alpine image.

FROM nginx:alpine

And then, copy all build artefacts to /usr/share/nginx/html directory and copy the nginx.conf to the /etc/nginx/conf.d/default.conf.

COPY --from=node /app/dist/angular-docker-deployment /usr/share/nginx/html
COPY --from=node /app/.docker/nginx.conf /etc/nginx/conf.d/default.conf

NB: One thing to note for those using Angular 5, copy the DIST directory instead of the project name directory inside the DIST directory.

COPY --from=node /app/dist /usr/share/nginx/html

You can check out both docker files here.

Building Docker Images

And finally, you can build your image by running the following command at the root of your angular workspace: Windows:

docker build --rm -f .docker\staging.dockerfile -t webapp:latest .

Linux and Mac:

docker build --rm -f .docker/staging.dockerfile -t webapp:latest .

Replace webapp:latest with your preferred image name and add your image tag after colons. To build a production image, replace .docker\staging.dockerfile with .docker\prod.dockerfile. Windows:

docker build --rm -f .docker\prod.dockerfile -t webapp:latest .

Linux and Mac:

docker build --rm -f .docker/prod.dockerfile -t webapp:latest .

And your docker image is ready for deployment. In the next post, I will cover how to deploy your docker image once you have built it. Sample Code You can find the whole code for this post here.

Logging HTTP Errors in Angular 6

Maina Wycliffe — Sun, 26 Aug 2018 10:24:01 +0000

In my last post, I looked at how you can use HTTP Interceptors to attach and refresh authorization tokens. In this post, we are going to use the same HTTP Interceptor to catch HTTP errors – 500, 401, 400 etc. – and logging them remotely. It is important to analyze how your angular application is interacting with your APIs and other external API, so that you can improve the product itself. Collecting HTTP Errors at an angular app level could provide huge insight to you and your development team.

So, without further ado:

Creating a HTTP Interceptor

Let’s first start by creating a HTTP Interceptor class – HttpLogInterceptor, then adding it to our module (app.module.ts).

ng generate class http-log-interceptor

Then, open the http interceptor and make the following modifications to it:

@Injectable()
export class HttpLogInterceptor implements HttpInterceptor {
intercept(
req: HttpRequest<any>,
next: HttpHandler
): Observable<HttpEvent<any>> {}
}

First, we made the class injectable. Then, we implemented the HTTP Interceptor Interface by adding implements HttpInterceptor Interface. And by adding the intercept method – the method that will intercept and return the modified requests. Most of the action will take place inside this method. Next, we need to add the newly created HTTP interceptor class to the list of providers, in our module:

@NgModule({
  imports: [CommonModule, MatDialogModule],
  declarations: [],
  providers: [
    AuthService,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HttpLogInterceptor,
      multi: true
    }
  ]
})

Catching and Logging HTTP Errors

Inside our intercept method of our HttpLogInterceptor class, we need to take the HTTP request, then pipe it and catchErrors, then return the errors to the originator using throwError operator of RXJS.

return next.handle(req).pipe(
catchError(httpError => {
// log your error here
 loggerService.logger(httpError).subscribe(); // re throw the error so it can be caught by the subscriber
 return throwError(httpError);
})
);

Next, we need to import our logger service into our interceptor. To avoid the Cyclic Dependency Injection error, we will inject Injector into our class. Then, we will use to assign our logger service to a variable and then we can use it as normal.

const loggerService = this.inject.get(LoggerService);

In our service, we need a logger method, which will call and pass the HttpErrorResponse error to our logger. Here, will subscribe to the logging method, inside our logger service. Since, the results of logging action don’t really matter to the end user, we will proceed and rethrow the original error.

loggerService.logger(httpError).subscribe();
// re throw the error so it can be caught by the subscriber
return throwError(httpError);

What this allows you to do, is to initiate a logging action on the background without affecting the user experience while waiting for logging to be completed. This is because the logging request will be carried asynchronously. This won’t prevent the execution of the next line of code after being called.

Logging Error Method

Now, let’s create a logger method in our logger service. We will imaginatively call it “logger”.

logger(error: HttpErrorResponse): Observable<boolean> {}

Here, we will send the error details to the logging server:

logger(error: HttpErrorResponse): Observable<boolean> {
    const url = 'URL TO Loggger';
return this.http
      .get(url, {
        params: {
          url: error.url,
          content: error.error,
          status: error.status.toString()
        }
      })
      .pipe(
        map(_ => {
          return true;
        })
      );
}

In this method, we take the HTTP response error object and convert the to the URL parameters of our get http request. You could also use HTTP Post method, to send the data to the logging server, with the error data as part of the body.

Refreshing Authorization Tokens – Angular 6

Maina Wycliffe — Wed, 22 Aug 2018 06:50:32 +0000

In this post, we are going to build a http interceptor for refreshing authorization tokens once expired. The idea here is to be able to intercept http requests, attach an authorization header to the request. And to intercept http response, check for authentication errors and refresh tokens when necessary, otherwise redirect to the login page.

Once the token has been refreshed successfully, you should resend all intercepted HTTP responses back to their origin, and only return a non auth related error back to the end user. This whole process should occur smoothly without breaking the UX if successful. We should only interrupt the user when action is needed from them – such as log in in this case.

Getting Started

Let’s first start by creating a HTTP Interceptor class, then adding it to our module (app.module.ts). ng generate class http-auth-interceptor Then, open the http interceptor and make the following modifications to it:

@Injectable()
export class HttpAuthInterceptor implements HttpInterceptor {
intercept(
req: HttpRequest<any>,
next: HttpHandler
): Observable<HttpEvent<any>> {}
}

First, we made the class injectable. Then, we implemented the HTTP Interceptor Interface, by one, adding implements HttpInterceptor. And two, by adding the intercept method – the method that will intercept and return the modified requests. Most of the action will take place inside this method. Next, we need to add the newly created http interceptor class to the list of providers, in our module:

@NgModule({
  imports: [CommonModule, MatDialogModule],
  declarations: [],
  providers: [
    AuthService,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HttpAuthInterceptor,
      multi: true
    }
  ]
})

Intercepting HTTP Requests (Adding Authorization Header)

Here, will are going to take the intercepted request, clone it, modify the copied http requests and return it as the new request.

// Clone the request and authorization header
const authReq = req.clone({
headers: req.headers.set('authorization', Authorization ? Authorization : '')
});

NB: You can attach the header based on the authorization method you are using on your server. Example: Bearer Authorization.

After that, you can return the modified request which replaces the original request:

return next.handle(authReq);

Refreshing Authorization Tokens

Intercepting Expired Tokens Request

To refresh tokens, we need to monitor the responses looking for http status code 401 for unauthorized request.

So, we are going to pipe our modified http request, and catch all errors. Next, we are going to check for http status code 401. Whenever we catch an authentication error, we are going to attempt and refresh our token.

return next.handle(authReq).pipe(
   catchError(error => {
       // checks if a url is to an admin api or not
       if (error.status === 401) {
          // attempting to refresh our token
       }
   }
});

We also need to avoid sending multiple refresh requests to our endpoint. This happens when you send multiple http requests simultaneously, and all of them return an authentication error. So, we are going to share (using Share Operator) the existing refresh request across all intercepted http responses that find a token refresh request already inflight. Basically, when we catch a response with http status code 401, we are going to check if there is an inflight request to refresh our token, then hitch on it.

If none exists, we are going to send a new refresh request. In our http interceptor class, we need to and inflightAuthRequest property and set it to null. Then, when we get a http response error 401, we are going to check whether it is null.

if (!this.inflightAuthRequest) {
this.inflightAuthRequest = authService.refreshToken();
if (!this.inflightAuthRequest) {
// remove existing tokens
 localStorage.clear();
this.router.navigate(['/sign-page']);
return throwError(error);
}
}

If not, we are going to pipe the existing request and attach our request using SwitchMap operator. After the token has been refreshed successfully, we are going to resend each of our http request (that responded with 401) back to the server, hoping to get another response not related to authentication.

if (!this.inflightAuthRequest) {
this.inflightAuthRequest = authService.getToken();
}
return this.inflightAuthRequest.pipe(
switchMap((newToken: string) => {
// unset inflight request
 this.inflightAuthRequest = null;
// clone the original request
 const authReqRepeat = req.clone({
headers: req.headers.set('', newToken)
});
// resend the request
 return next.handle(authReqRepeat);
})
);

Our Refresh Method

In our refresh method, we are just going to be making a http request to our refresh token endpoint. This is also where we will add the RXJS Share Operator, ensuring that only one request is sent at a time:

refreshToken(): Observable<string> {
const url = 'url to refresh token here';
// append refresh token if you have one
    const refreshToken = localStorage.getItem('refreshToken');
return this.http
      .get(url, {
        headers: new HttpHeaders().set('refreshToken', refreshToken),
        observe: 'response'
      })
      .pipe(
        share(), **// <========== YOU HAVE TO SHARE THIS OBSERVABLE TO AVOID MULTIPLE REQUEST BEING SENT SIMULTANEOUSLY**
        map(res => {
          const token = res.headers.get('token');
          const newRefreshToken = res.headers.get('refreshToken');
// store the new tokens
          localStorage.setItem('refreshToken', newRefreshToken);
          localStorage.setItem('token', token);
          return token;
       })
    );
}

Whitelist and Blacklist Requests

What we would like to achieve in this section is a simple way to exempt some request from going through a http interceptor. There are several ways used to achieve this. One common way is to attach a header to requests which you do not want to be modified by the interceptor. Then, check if the header is present at the beginning of the interceptor method. And if present, return an unmodified http request:

if (req.headers.get('authExempt') === 'true') {
return next.handle(req);
}

This is functional but requires you to manually add the header on the requests you are blacklisting. The other method which I consider to be much better, is to have a blacklist containing URLs or URL regex patterns. The idea being that if a URL is on the list, then you can exempt it from being modified by the http interceptor. For instance, you can simply exempt an entire sub directory using a simple regex:

(((https?)://|www.)theinfogrid.com/auth/)

The above regex exempts all subdirectories with auth directory at the root. So, you can check if your URL is in the blacklist or not:

blacklistCheckup($url: string): boolean {
let returnValue = false;
for (const i of Object.keys(this.blacklist)) {
      if (this.blacklist[i].exec($url) !== null) {
        returnValue = true;
        break;
      }
   }
return returnValue;
}

This gives you the freedom to blacklist or whitelist an entire domain/subdomain, without needing to attach a header to the request manually. You can then package it as an object and iterate through it. I am assuming, this should be a small list, because if it becomes too large, it will impact the performance of your app.

Tips

You might want to consider attaching a header to the response originating from the refresh token endpoint. Then, check if the response contains the header before sending another refresh request. And if it does, and has status code 401, it means that the token was not refreshed successfully. Thus, you should redirect the user to the login page instead of sending another refresh token, which could lead into a loop of some sort.

if (error.status === 401) {
  // check if the response is from the token refresh end point
  const isFromRefreshTokenEndpoint = !!error.headers.get(
    'unableToRefreshToken'
  );
if (isFromRefreshTokenEndpoint) {
  localStorage.clear();
  this.router.navigate(['/sign-page']);
  return throwError(error);
}

To work around the Cyclic Dependency Error, do not inject your AuthService inside the constructor. Instead, inject the injector class and then use it inside the interceptor method to inject AuthService into a variable. The constructor for our http interceptor

constructor(private injector: Injector, ...) {}

And then inside our method:

const authService = this.injector.get(AuthService);

Get this Code

You can get the complete code here.

Getting Started with Debugging Angular Apps in VSCode

Maina Wycliffe — Mon, 20 Aug 2018 12:28:36 +0000

In this post, I am going to show you how to get started with debugging angular apps in VSCode. We shall target Firefox, Chrome and Microsoft Edge. VSCode Debugger provide important features that can improve your development experience.

These features include: break point, code stepping and stack traces. With VSCode debugger, you can get all errors, console messages and debug information from different browser at the same console. It also provides a consistent debug experience as compared to using individual tools found in each browser. Let’s get started:

Google Chrome Debugger

Let’s get started with chrome, since it’s the most popular browser out there. Majority of your users will likely be using it. Therefore, you must ensure everything is working as smoothly as possible on the browser. On top of that, there are other browsers that use the JavaScript Chrome V8 engine. First, install the Debugger for Chrome extension on VSCode. Once that’s complete, open the angular app you wish to debug.

Configurations

Next, we need to configure the debugger for our angular app. To do this, open the debugger (CTL + SHIFT + D) and click on the gear icons to create the launch.json file – this is where our configuration are stored. A new launch.json (under .vscode folder in the root of your VSCode Workspace) file is created with the following defaults:

{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}

Change the URL to point to the address of your Angular app Server. The default URL is localhost on port 4200 (http://localhost:4200), but some developers change that especially when you are developing multiple application. Also, change the name of your configuration to something you can easily remember. Next, serve your application as you normally would:

ng serve or ng serve --aot

And finally launch your debugger using either F5 or by pressing on the play icon, at the top of the debugger side panel. A new chrome window will be launched which will open your angular app. To view console messages and activity, open the debug console, by using CTL + SHIFT + Y or by Going to View, then Click on the Debug Console.

Debuggers for Firefox and Microsoft Edge

Next up is Firefox and Microsoft Edge. The process is much like the process of setting up Chrome above. First, install Debugger for Firefox and Debugger for Edge.

Next, open debugger on VSCode (CTL + SHIFT + D) and press on the gear icon. If you are working on the same angular app as before, clicking on the gear icon, will open launch.json, with configuration to debug on chrome. So, in this case instead of replacing the Chrome Configurations , we need to add new configurations for debugging on both Firefox and Microsoft Edge. To do this, there is an Add Configurations button at the bottom right of the window.

Click on the button, and an autocomplete dropdown window will show up, where you can type in the configurations you wish to add. So, to add Firefox, type Firefox and select Firefox: Launch (server) and to add Edge, type Edge, and then select Edge: Launch. You should have two new configurations in your launch.json:

[
{
"type": "firefox",
"request": "launch",
"reAttach": true,
"name": "Launch localhost",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}"
},
{
"type": "edge",
"request": "launch",
"name": "Launch Edge (Frontend App)",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}"
}
]

Make the necessary changes to the configurations, especially the URL to point to your server. Don’t forget to add a port to the URL of the Firefox configuration. Once you are done with the configuration, make sure you are running your Angular server. Then open the debugger (CTL + SHIFT + D) and on the drop down in between play and gear icon, select which browser you would like to debug with and click on the play button. A browser window of the browser you chose should launch and your app should open.

VSCode Console

To view console activity on VSCode, open the debug console, by using CTL + SHIFT + Y or by Going to View on the menu bar, then Click on the Debug Console. Now you can add breaking point on your angular code, and it will pause when it gets to the break point. You can also step through your code while observing how various variable change through the process using breaking points among other advantages.

I hope I have covered every aspect to help you getting started with debugging angular apps on vscode. Thank you for getting this far, if you found this useful, please don’t forget to share with your friends and colleagues. Here is another post on Visual Studio Code and Angular that might be helpful.

How to build an image cropper form control in angular

Maina Wycliffe — Fri, 17 Aug 2018 15:25:54 +0000

In an earlier post, I demonstrated how to build an extremely simple custom form control. Today, I have decided to try to up the stakes. We are going to build an image cropper and package it as a form control which is ready to be used in any of our forms – be it template driven or reactive forms. My goal for this post, is to create something that works like the file input html element, that you can select, crop and validate its content. A simple drop in solution in your forms for cropping images easily alongside other data input.

Getting Started

In this demo, we are going to be using Croppie JavaScript Library to crop our images. To make things easier, we will use an angular wrapper called ngx-croppie. I will try to make it easier to follow for those using a different Image Cropper JavaScript Library. You can install the wrapper together with croppie using either NPM or Yarn:

npm i croppie ngx-croppie
yarn add croppie ngx-croppie

And then install @types/croppie (croppie typings for TypeScript) as dev dependencies in your project:


npm i @types/croppie -D
yarn add –dev "@types/croppie

Then import NgxCroppieModule in your module.

@NgModule({
  declarations: [ ...],
  imports: [
    ...
    **NgxCroppieModule**,
    ...
  ],
  providers: [],
  bootstrap: [AppComponent]
})

And then add croppie.css in your projects list of styles inside the angular.json:

"styles": [
"node_modules/croppie/croppie.css"
]

First, we need to create a new component which will wrap around ngx-croppie component and implement the ControlValueAccessor interface.

Using ngx-croppie to crop images

NB: You can skip this whole section if you are using a different image cropper library.

Inside the component controller, we need a croppieImage property which will hold our current image. Then, we need to pass the height and width of our cropper using our cropper, so we need imgCropToHeight and imgCropToWidth properties – both have the Input() decorator. I have also added responseType property, allowing us to request the image in either base64 or blob type. And an outputOptions property, which we pass to ngx-croppie and allows us to set the image size and output format of the image. On top of that we need ngxCroppie property – marked by viewChild decorator, which just passes the element where our image cropper will be rendered into.

Methods for ngx-croppie

The first method we need is to construct CroppieOptions. This will stitch together the variables we passed to our component, to create CroppieOptions. You can learn more about the available CroppieOptions here.

public get croppieOptions(): CroppieOptions {
    const opts: CroppieOptions = {};
    opts.viewport = {
      width: parseInt(this.imgCropToWidth, 10),
      height: parseInt(this.imgCropToHeight, 10)
    };
opts.boundary = {
      width: parseInt(this.imgCropToWidth, 10) + 50,
      height: parseInt(this.imgCropToWidth, 10) + 50
    };
opts.enforceBoundary = true;
    return opts;
}

Next, we need a method that gets triggered when an image is selected.

imageUploadEvent(evt: any) {
    if (!evt.target) {
      return;
    }
    if (!evt.target.files) {
      return;
    }
if (evt.target.files.length !== 1) {
      return;
    }
const file = evt.target.files[0];
    if (
      file.type !== 'image/jpeg' &&
      file.type !== 'image/png' &&
      file.type !== 'image/gif' &&
      file.type !== 'image/jpg'
    ) {
      return;
    }
const fr = new FileReader();
    fr.onloadend = loadEvent => {
      this.croppieImage = fr.result.toString();
    };
fr.readAsDataURL(file);
  }

After that, we need another method that is triggered when you crop your image. When it is triggered, the image is passed as a parameter that you can then it to the croppieImage property.

newImageResultFromCroppie(img: string) {
    this.croppieImage = img;
    //set this croppieImage value as the value of the component
    this.propagateChange(this.croppieImage);
}

Then, on component initialization, we need to set our return image type – whether base64 or blob image type.

ngOnInit() {
    /* Size the outputoptions of our cropped imaged - whether is base64 or blob */
    this.outputoption = { type: this.responseType, size: 'original' };
}

Next, we need to add a ngOnChanges Method.

ngOnChanges(changes: any) {
    if (this.croppieImage) {
      return;
    }
if (!changes.imageUrl) {
      return;
    }
if (!changes.imageUrl.previousValue && changes.imageUrl.currentValue) {
      this.croppieImage = changes.imageUrl.currentValue;
      this.propagateChange(this.croppieImage);
    }
}

ControlValueAccessor Interface Methods

After that, we need to implement the methods necessary for ControlValueAccessor interface. This is what gives our component the behavior of a form control. I explained everything my previous post here about creating custom form controls.

writeValue(value: any) {
    if (value !== undefined) {
      this.croppieImage = value;
      this.propagateChange(this.croppieImage);
    }
}
propagateChange = (_: any) => {};
registerOnChange(fn) {
    this.propagateChange = fn;
}
registerOnTouched() {}

And finally, provide the NG_VALUE_ACCESSOR for the component:

providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CustomImageFormControlComponent),
multi: true
}
];

And don’t forget to add the interfaces we are implementing to our component:

export class CustomImageFormControlComponent
implements OnInit, OnChanges, ControlValueAccessor {}

Our Template

And then in our template, we need to add ngx-croppie component, a hidden file input html element and a button to trigger the select file dialog of our file input html element.

<ngx-croppie
*ngIf="croppieImage"
#ngxCroppie
[outputFormatOptions]="outputoption"
[croppieOptions]="croppieOptions"
[imageUrl]="croppieImage"
(result)="newImageResultFromCroppie($event)"
></ngx-croppie>
<input
#imageUpload
hidden
type="file"
id="fileupload"
#imageUpload
(change)="imageUploadEvent($event)"
accept="image/gif, image/jpeg, image/png"
/>
<button
fxFlex="100"
class="text-white font-weight-bold mat-elevation-z0"
type="button"
mat-raised-button
color="primary"
(click)="imageUpload.click()"
>
<mat-icon>add_a_photo</mat-icon>
Select Image
</button>

Using our image form control

To use our image form control, we just use a normal form control:

myform: FormGroup = null;
constructor(private fb: FormBuilder) {}
createForm(): FormGroup {
    return this.fb.group({
BlobImage: [null, Validators.compose([Validators.required])],
      base64Image: [null, Validators.compose([Validators.required])]
    });
}
ngOnInit() {
    this.myform = this.createForm();
}
submit() {
    console.log(this.myform.value);
}

And then in our template:

<form [formGroup]="myform" (submit)="submit()" fxFlex="100">
<div
fxFlex="500px"
fxLayoutAlign="center center"
fxLayout="column"
fxFlexOffset="calc(50% - 250px)"
fxFlex.xs="100"
fxFlexOffset.xs="0"
style="padding: 10px;"
>
<app-custom-image-form-control
formControlName="BlobImage"
[responseType]="'blob'"
></app-custom-image-form-control>
<mat-error *ngIf="myform.controls['BlobImage'].hasError('required')">
This field is required
</mat-error>
<app-custom-image-form-control
formControlName="base64Image"
></app-custom-image-form-control>
<mat-error *ngIf="myform.controls['base64Image'].hasError('required')">
This field is required
</mat-error>
<button fxFlex mat-button color="primary">
<mat-icon>save</mat-icon>
Submit
</button>
</div>
</form>

NB: We can also validate the content of our image form control. In the above post, I just made a required input, but you can do more by using custom form validators.

Demo and Source Code

You can try this demo here and view this demo here.

Angular Material Autocomplete with HTTP Lookup

Maina Wycliffe — Wed, 15 Aug 2018 19:19:33 +0000

In this demo, we will build an angular autocomplete component that gets autocomplete suggestions from a http service such as a REST API. The idea here is that, instead of using a static autocomplete list, we are going to pull autocomplete suggestions directly from our database. This is a neat feature to have especially if you are implementing a search function in your angular app.

Getting Started

First, I am going to assume that, you have some basic knowledge on both Angular and Angular 2 Material. If you are new to this, please check out the tutorials on Angular here and Angular 2 Material here.

In this demo, we will create a simple search for Github repositories. You enter the name of a repository and get the results. Then you can use the results (list of repositories matching the name you entered) as a autocomplete options. Github API provides the option to retrieve results for unauthenticated users, you can learn more here.

Make sure you have imported all Angular Material Modules you need for your specific project. In this project we will be using MatAutocompleteModule, MatFormFieldModule and MatInputModule.

So, without further ado, let’s get into the code:

Github Lookup Service

We are going to create a service that will interact with the Github API. It will make HTTP calls to the API and return an observable of the search results. To make things easier, we will also create an interface – GithubResponse – that we can use to type cast our results we expect from github. Please checkout out the interface details here.

First, Let’s look at our service.

// github.service.ts
export class GithubService {
constructor(private http: HttpClient) {}
search(query: string): Observable<GithubResponse> {
const url = 'https://api.github.com/search/repositories';
return this.http
.get<GithubResponse>(url, {
observe: 'response',
params: {
q: query,
sort: 'stars',
order: 'desc'
}
})
.pipe(
map((res: Response) => {
return res.body;
})
);
}
}

It has a single method, that takes in the search query and returns the results. This is your normal service and doesn’t do anything special.

Autocomplete Component

In our component, we will need an observable Property - GithubAutoComplete$ - which we can subscribe to using async pipe, so that it can always have the latest values of our autocomplete options. So, we shall first subscribe to the autocomplete form control value changes, then use the value of the autocomplete form control as the query for our search method. And then we shall return the results to the GithubAutoComplete$ property of our component.

First, declare a GithubAutoComplete$ and our form control property - autoCompleteControl:

public githubAutoComplete$: Observable<Items> = null;
public autoCompleteControl = new FormControl();

Then, let’s create a lookup method that maps the results from github to an object we can use and catch errors.

lookup(value: string): Observable<Items> {
    return this.githubService.search(value.toLowerCase()).pipe(
      // map the item property of the github results as our return object
      map(results => results.items),
      // catch errors
      catchError(_ => {
        return of(null);
      })
    );
}

And then, on component initialization (ngOnInit Method), assign our GithubAutoComplete$ to the observable of the valueChanges of our input form control.

ngOnInit() {
    this.githubAutoComplete$ = this.autoCompleteControl.valueChanges.pipe(
      startWith(''),
      // delay emits
      debounceTime(300),
      // use switch map so as to cancel previous subscribed events, before creating new once
      switchMap(value => {
        if (value !== '') {
          // lookup from github
          return this.lookup(value);
        } else {
          // if no value is present, return null
          return of(null);
        }
      })
    );
  }

NB: Please read through the comments for further code clarification. And finally, in our template, we use async pipe to subscribe to the GithubAutoComplete$ observable inside *ngFor as shown below.

<mat-form-field>
<input [formControl]="autoCompleteControl" type="text" placeholder="Pick one" aria-label="Number" matInput [matAutocomplete]="auto">
    <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
<mat-option ***ngFor****=****"let item of githubAutoComplete$ | async; let index = index"** [value]="item.name">
        {{ item.name | titlecase}}
    </mat-option>
</mat-autocomplete>
</mat-form-field>

And that’s it, a working Angular 2 Material Autocomplete which works with a HTTP Service.

NB: Remember to implement OnInit interface on your component to run the ngOnInit method on component initialization.

Source Code and Demo

You can find a demo to tryout with here and the source code here.

Thank you for getting this far on this post, I hope this was helpful. If I missed anything or something was not clear, please tell me on the comment section below. Here are some more topics on Angular:

Lazy Loading Images in Angular 6

Maina Wycliffe — Mon, 13 Aug 2018 14:51:13 +0000

In most web apps, images form a huge chunk of the size of the content. If you had, let’s say over 50 images with each having 100Kbs (after compression and resizing) in size, the total of that would be 100 x 50 which is 5MBs in total size. While storage wise, that is not a lot, on a standard 3G internet connection, it would load slowly hence negatively affect the User Experience and the performance of your web app.

This is because, while images won’t affect initial loading and rendering of the site. All 50 images will be competing for the limited bandwidth to be loaded at once, hence loading slowly. This can be rectified by lazy loading images that are not in the view.

If out of the 50 images only 3 images are in view initially, then you only need 300KBs (3 x 100 KB s) initially which is less than 10% of what you required initially. Then as each image comes in to view, it is loaded then and only then. If you combine this with a service worker, to cache the already loaded images, the performance gains could be huge.

Getting Started

For this demo, we will use ng-defer-load library for lazy loading images. This library can also be used to lazy load any element in your angular application. But for now we will just use it with images. We will start by installing and setting it up in our application: NPM:

npm i @trademe/ng-defer-load
// or with yarn
yarn add @trademe/ng-defer-load

Then, import it into your app.module.ts.

@NgModule({
  // ...
  imports: [
    BrowserModule,
    FlexLayoutModule,
    BrowserAnimationsModule,
    DeferLoadModule
  ],
  providers: [],
  // ...
})

Lazy Loading Images

First, we need images to lazy load. We will use images from Placeholder, 100 of them to lazy load them. We are going have a placeholder caption of the image of the image number. Then, we will generate the image collection using a loop, as show below:

imageCollection = [];
constructor() {
  for (let i = 0; i < 100; i++) {
      const url = 'http://via.placeholder.com/500x450?text=Image No ' + (i + 1);
this.imageCollection[i] = {
        url: url,
        show: false
    };
  }
}

As you can see, our image collection has 2 properties: URL and show properties. The show property determines whether the image will be displayed. When the image comes into view, then we will toggle the show property to true and then the image shall be loaded. Inside our template, we will loop through the image collection. Then we shall use deferLoad directive from the ng-defer-load library to check whether the image is in view. If in view, it shall set the show property to true and hence display the image.

<div
*ngFor="let image of imageCollection"
(deferLoad)="image.show = true"
style="height: 550px;"
>
<ng-container *ngIf="image.show">
<img [src]="image.url" width="100%" />
</ng-container>
</div>

NB: To avoid many images being loaded initially, it is important to assign the image container a fixed height. And that’s it, you are now able to lazy load images instead of preloading all of them initially. https://youtu.be/ODSJZN7IKys

Source Code

You can get this source code here.

Final Thoughts

ng-defer-load uses Intersection Observer to detect which items are on view. While this is not available on all browsers, it uses poly fills to fallback to scroll detection mechanism, thus ensuring it is compatible with older browsers. Thank you for getting this far on this post, if you enjoyed it, please share it and if I left out something, you can remind me on the comment section below. Here are some more posts on lazy loading and performance optimization of your angular application.

Lazy Loading of Angular Components and Modules
Lazy loading of Styles and Scripts
Introduction to Progressive Web Apps

Options for Deploying Angular Apps

Maina Wycliffe — Fri, 10 Aug 2018 21:40:25 +0000

We all develop application so that other people can use them, it’s not different for Angular apps. In this post, I will focus on options for deploying angular apps. This guide is applicable to almost all JavaScript Frameworks – with a few modifications.

Using a Content Delivery Network

This is one option that I really like and happens to be the simplest and the cheapest. Content Delivery Network (CDNs) are geographically distributed network of proxy servers. When a customer wants to access your app, they are served from the server that is closest to them.

This in turn ensures high performance and availability. CDNs are traditionally used to serve static content (JS, CSS etc.) that requires little to no processing on the server. And as you probably already know, most JavaScript applications are executed on the browser – Ignore server-side JavaScript engines like NodeJS.

This brings the advantages of a CDN to your Angular application – high availability and performance. Another thing that makes this even more attractive is low cost. There are a few things you lose out when you use this option. The first is lack of configurability – while some CDNs may be versatile, you lack the ability to control what software are running on the server.

Also, even on those Softwares running on the server, you have limited configuration control. This is especially apparent when dealing with Search Engine Optimization. You can’t redirect traffic from search engine bots to search engine friendly content or even do server-side rendering. If find this option suitable for applications behind a login wall where SEO will not offer any benefits.

Using Shared Hosting

Shared hosting provide a cheap option for hosting websites while providing some degree of configurability. Majority of them offer a control panel to manage and configure your account but you are mainly limited to a LAMP server.

The freedom provided by shared hosting is enough for most small application, especially given the low prices. You can use services such as prerender.io for Search Engine Optimization (SEO) and in future Angular Universal might support php for Server Side Rendering (SSR). But for now, only a few languages are supported.

There are hacks to spawn a NodeJS server on a LAMP shared hosting, such as this, which will setup a NodeJS server and proxy all requests to it. Deployment is a matter of building your angular project and uploading build artefacts to the root of your domain or subdomain. After that, all you need is to configure apache so that all routes fall back to index.html inside the htaccess.

RewriteEngine On
    # If an existing asset or directory is requested go to it as it is
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
    RewriteRule ^ - [L]
    # If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html

For more information about configuration for different servers environments, please check the information provided here.

Using a Dedicated Hosting

If you are not happy with shared hosting, you should consider dedicated hosting. In this case you lease a server where you have full control of everything that runs on the sever. The cost is very high for dedicated hosting as compared to shared hosting.

On the up side, you can host more than one app as long as you are aware of your servers’ limitation. For an angular application, this means not having to deal with the limitation of the other two hosting options. Your app can have full support for SEO and all advantages that come with Angular Universal/Server-Side Rendering (SSR). You can think of this as having your own server.

Using Cloud Hosting and Cloud Platforms

Cloud hosting is one of the best options for hosting your angular application or any other application for that matter. It offers most, if not all advantages of a dedicated hosting plus a few other advantages.

One key advantage is scaling on demand, pay as you go model (pay for only what you use) and pricing per second or hour. Cloud heavy weights such as Amazon Web Service (AWS), Google Cloud Platform and Microsoft Azure offer a range of hosting and cloud services.

The services include storage options, content delivery networks (CDNs), machine learning etc. AWS offers a 1-year free tier while Google Cloud Platform and Microsoft Azure have a combination of free platform credit and free tier or both. One of my favorite platforms is Google Firebase, which offers a free tier for a small application to run without incurring any cost which is great for development and startups.

On top of that, Google Firebase offers backend solutions such as Authentication, Storage and Database for you. This allows you to rapidly develop and deploy your application using world class infrastructure, that can scale on demand.

Final Thoughts

As you can see, there are several options to consider when deploying your angular application. Each is suitable depending on what you want to achieve. For instance, if you are looking to host a simple demo, the first two options are great and won’t cost you a lot.

On the other hand, if you are looking to deploy an application with high demand, the cloud hosting might be your best bet. If I skipped any option, I would love to hear your input on the comment section below.

How to Build a Custom Form Control in Angular

Maina Wycliffe — Fri, 10 Aug 2018 12:21:59 +0000

As a developer, sometimes you are required to take some inputs from a form control and do some preprocessing before submitting – commonly on the submit function. A good example of this is a phone number, where you take a country code and phone number and combine them into a complete phone number before saving. While this might work when you need to use it once or twice in your application, if you use it more than once, then a custom form control might be your best bet. A custom form control will behave just like a normal form control and will return your complete phone number.

Introduction

To build a custom form control, we are going to be using ControlValueAccessor, this is a bridge between native elements like inputs, text area and angular forms API. In simple, it allows component to behave like an input form control. Allowing you to set value and get value from it. This allows you to create complex and powerful form controls which can be reused across your application. This also allows you to use form validators to validate the output of your custom form controls quite easily if you wish to.

You can also build them as libraries and use them across multiple application, this greatly improves your development experience. Here are some more tips on how you can improve your development experience.

Getting Started

In this post, we are just going to use the FormsModule and ReactiveFormsModule. Since am a huge fan of Angular Material and Angular Flex Layout, am going to use them for the demo, but those can easily be substituted with bootstrap or any other UI Framework. This post assumes that you have at least the basics of Angular. In this demo, we are going to look at a very basic example.

We are going to create a simple custom form control that lets users enter their email address in two parts: their username and their email provider domain name. Our custom form control will return the two as a single email address. This will allow us to use built-in validators on. It will also accept a default value as a single email. And then it will separate the email into the username and provider. The it will automatically assign it to the correct input boxes. Without further ado.

Creating our Component

We will start by creating a normal component using Angular CLI: ng generate component email-address-input Then, we need to implement ControlValueAccessor in our component:

export class EmailAddressInputComponent implements ControlValueAccessor {}

And then add a provider for the ControlValueAccessor we just created:

providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => EmailAddressInputComponent),
multi: true
}
];

Next, we need to add the necessary methods for a class implementing ControlValueAccessor:

interface ControlValueAccessor {
writeValue(obj: any): void
registerOnChange(fn: any): void
registerOnTouched(fn: any): void
setDisabledState(isDisabled: boolean)?: void
}

You can learn more about the above methods here: On top of the above methods, we need to add set and get methods to set and get the value of our component. This will allow us to read and set the email value easily, including separating it into the username and provider. So, in our component, we will start by adding 3 properties – username, emailProvider and _value (note the underscore).

public username;
public emailProvider;
_value;

Next, add the methods necessary to implement ControlValueAccessor: First, add the writeValue method. It will pass the default value and set it to the _value property of the field.

writeValue(value: any) {
  if (value !== undefined) {
      this.value = value;
      this.propagateChange(this.value);
  }
}

Next, we add the other methods to implement ControlValueAccessor for our component:

propagateChange = (_: any) => {};
registerOnChange(fn) {
    this.propagateChange = fn;
}
registerOnTouched() {}

Next, we are going to add on change event method. This will update the value of our component when you type your username and email provider. The method will concatenate the username and email Provider into an email address. The method will be triggered by the input change event of either the emailProvider or username input fields. You can use any other event depending on what you want to achieve.

addEvent($event) {
    this.value = this.username + '@' + this.emailProvider;
    this.propagateChange(this.value);
}

And finally, we add set and get methods to get and set the value of our _value property:

get value() {
    const email = this._value;
    return email;
}

The set value property will take the input email address and split it into both the username and email provider and assign to respective property – username and emailProvider.

set value(val) {
    if (val) {
      this._value = val;
      [this.username, this.emailProvider] = val.split('@');
      this.propagateChange(this._value);
    }
}

Next, we create our template:

<div fxFlex="100" fxLayout="row" fxLayoutGap="10px" style="padding: 10px">
<mat-form-field fxFlex>
<input
matInput
type="text"
(change)="addEvent($event)"
[(ngModel)]="username"
[value]="username"
placeholder="Username"
/>
</mat-form-field>
<mat-form-field fxFlex>
<input
matInput
type="text"
(change)="addEvent($event)"
[(ngModel)]="emailProvider"
[value]="emailProvider"
placeholder="Email Provider"
/>
</mat-form-field>
</div>

NB: We are using ngModel for two-way binding between the template and the component class.

Using our Custom Form Control

Since now we have our custom form control, we can use it as a normal application. First, we are going to create a formGroup for our custom form:

this.formGroup = this.fb.group({
email: [this.email, [Validators.email]],
email2: ['@codinglatte.com', [Validators.email]],
email3: ['hello', [Validators.email]],
email4: [null, [Validators.email]]
});

As you can see, we are able to pass default value to our custom form control and use built-in and even custom validators just like normal form control. And using it in our template is the same:

<form [formGroup]="formGroup" fxLayout="column">
<div fxFlex="100">
<app-email-address-input formControlName="email"></app-email-address-input>
<mat-error *ngIf="formGroup.controls['email'].hasError('email')"
>Your email is invalid email</mat-error
>
</div>
<div fxFlex="100">
<app-email-address-input formControlName="email2"></app-email-address-input>
<mat-error *ngIf="formGroup.controls['email2'].hasError('email')"
>Your email is invalid email</mat-error
>
</div>
<div fxFlex="100">
<app-email-address-input formControlName="email3"></app-email-address-input>
<mat-error *ngIf="formGroup.controls['email3'].hasError('email')"
>Your email is invalid email</mat-error
>
</div>
<div fxFlex="100">
<app-email-address-input formControlName="email4"></app-email-address-input>
<mat-error *ngIf="formGroup.controls['email3'].hasError('email')"
>Your email is invalid email</mat-error
>
</div>
</form>

TIP: If you are using lazy loading, you can create a module where you declare and export all Pipes and Components that are being used across multiple lazy loaded modules.

Where is this Code?

The above source code be found on Github repository here.

Angular Reactive Forms – Building Custom Validators

Maina Wycliffe — Wed, 08 Aug 2018 16:17:18 +0000

Angular has built-in input validators for common input validation such as checking min and max length, email etc. These built-in validators can only take you so far, at some point you might need to build a custom validator. In this post, I will show you how to build your own custom validators for input and a validator to check whether password and confirm password match before submitting. This will help you be able to build custom validators for both form group and specific form controls. So, without further ado, lets get started:

How it will work

I am going to assume that you have some prior knowledge on Reactive Forms in Angular and using built-in validators. If not, please checkout this page for a quick tutorial on Reactive Forms. We are going to have three custom validators. The first validator will check whether the current user is over the age of 18 and under the Age of 60. While the second validator will check whether the email provider is theinfogrid.com (this blogs domain name). The last validator will check to see the password and confirm password are a match.

Building a Custom Validator

We are going to create a class known as CustomValidators, which will house our validator functions. This will allow us to access all our validator functions under a single class.

ng generate class custom-validator

Next, we need to first create validators for the first two cases – AgeLimit and EmailDomain Validators. We are going to add the methods as static methods inside our CustomValidator class. The names of our validator classes shall have the term Validator appended. So that, AgeLimit becomes AgeLimitValidator and EmailDomain becomes EmailDomainValidator. Each of our two methods will return a Validator Function (ValidatorFN) after evaluating whether the control value is valid or not. In case where the value is valid, the validator function shall return a null value and an object if invalid. The object shall have a name and a true value i.e.

{ ageLimit: true  } or  { emailDomain: true }

AgeLimitValidator Function

The first validator – AgeLimitValidator – shall look like this:

NB: Follow the comments inside the code for further clarifications.

static ageLimitValidator(minAge: number, maxAge: number): ValidatorFn {
    return (control: AbstractControl): { [key: string]: any } | null => {
      // if control value is not null and is a number
      if (control.value !== null) {
        // return null  if it's in between the minAge and maxAge and is A valid Number
        return isNaN(control.value) || // checks if its a valid number
        control.value < minAge || // checks if its below the minimum age
          control.value > maxAge // checks if its above the maximum age
          ? { ageLimit: true } // return this incase of error
          : null; // there was not error
      }
      return null;
    };
  }

It takes in the minimum and maximum age as parameters and uses them to evaluate age limit.

EmailDomainValidator Function

The second validator – EmailDomainValidator – function shall look like this:

NB: Follow the comments inside the code for further clarifications.

static emailDomainValidator(domain: string): ValidatorFn {
    return (control: AbstractControl): { [key: string]: any } | null => {
      // if control value is not undefined, then check if the domain name is valid
      if (control.value !== null) {
        const [_, eDomain] = control.value.split('@'); // split the email address to get the domain name
        return eDomain !== domain // check if the domain name matches the one inside the email address
          ? { emailDomain: true } // return in case there is not match
          : null; // return null if there is a match
      }
      return null; // no error, since there was no input
   };
}

Using the Custom Validators

To use your custom validator inside your reactive forms, import the class and call the validator function as you would a built-in validator.

createMyForm(): FormGroup {
    return this.fb.group({
      ...
      age: [
        null,
        Validators.compose([CustomValidator.ageLimitValidator(18, 60)])
      ],
      email: [
        null,
        Validators.compose([
          Validators.email,
          CustomValidator.emailDomainValidator('theinfogrid.com')
        ])
      ],
     ...
    });
  }

As you can see above, you can easily mix your custom validators and built-in validators. Now, inside your template, it’s a matter of checking whether that form control has the specific error and show the error message:

//For Age Limit Validator
<mat-error
*ngIf="myform.controls['age'].touched && myform.controls['age'].hasError('ageLimit')"
>
The age limit is between 18 and 60 years!
</mat-error>
//For Email Domain Validator
<mat-error
*ngIf="myform.controls['email'].touched && myform.controls['email'].hasError('emailDomain')"
>
Email address must be from theinfogrid.com
</mat-error>

And that’s it, we now have a custom validator for our form controls.

Custom Validators for Forms

The first two validators are for individual controls. What about if you wanted to validate something that involved more than one control. Like, checking whether password and confirmation passwords are a match. Here we will need a validator for our form group instead of individual form controls. Inside our CustomValidator class, let’s add a third validator method for checking whether password match – PasswordMatch – we will call it PasswordMatchValidator. Then we are going to get the password and confirmPassword values from our form and check if they match. Instead of returning a validator function like in the previous two instances, we will instead set an error in our form control for both password and confirmPassword. So, our new validator method will look like this:

NB: Follow the comments inside the code for further clarifications.

static passwordMatchValidator(control: AbstractControl) {
    const password: string = control.get('password').value; // get password from our password form control
    const confirmPassword: string = control.get('confirmPassword').value; // get password from our confirmPassword form control
    // compare is the password math
    if (password !== confirmPassword) {
      // if they don't match, set an error in our confirmPassword form control
      control.get('confirmPassword').setErrors({ NoPassswordMatch: true });
    }
  }

After that, we can add it to the list of our validators of the form group, not the control validators:

return this.fb.group(
{
// ...
 password: [null, Validators.compose([Validators.required])],
confirmPassword: [null, Validators.compose([Validators.required])]
},
{
// our validator for the form group
 validator: CustomValidator.passwordMatchValidator
}
);

And then you can add the error message in your confirmPassword form control as shown below:

<mat-error
*ngIf="myform.controls['confirmPassword'].touched && myform.controls['confirmPassword'].hasError('NoPassswordMatch')"
>
Your password and confirm password do not match
</mat-error>

I hope this post will enable you to create your own custom validators for your own form. You can find the full code on Github.

SVG/Webfont Icon Packs for your Angular App

Maina Wycliffe — Mon, 06 Aug 2018 18:56:37 +0000

If you are looking to improve your web app both visually and functionally, icons are a very good place to start. Icons if applied correctly, are easily recognized by users and therefore can substitute long text. This enables developers to utilize the screen real estate wisely especially on small devices.

For instance, if a user sees a hamburger icon, they will recognize it as the menu icon, eliminating the need to also add the word menu next to it. On top of that, they improve the visual appeal of a website and serve as a guide for users when navigating the site. Icons are shipped mainly as Web Fonts and SVG (Scalable Vector Graphics).

This provides an easy to use icons for web developers that can be resized, and effects applied on the fly easily. With Angular Material, you can use different icon packs with Angular Material Icon Component, you can learn more about how to integrate different icon packs here.

Material Icons

This is a set of over 900 Icons which are free to use on your smartphones, desktops and web applications. They are provided as both SVG Icons and Web fonts formats. With the SVG Icons, you can select individually the icons you need from the Material Icons Repository. On top of that, they can be installed using NPM and Bower.

The one downside of this icon pack is lack of social media icons. If you are looking for social icons to fill this gap, there is this GitHub repository which has SVG Icons for all major brands.

You can browse the vast icon library here and learn how to install and use Material Icons here.

Font Awesome

This is one of the most popular and comprehensive icon packs out there. There are available as both web fonts and SVG Icons and unlike Material Icons, they have social icons. While they offer free icons, 1295 icons, they have a pro license offering over 3000 icons. On top of that, a component for Angular is provided together with other popular flameworks.

You can learn more about Font Awesome here. Glyphicons Another web font/SVG icons with over 1000 icons. You can use these icons in your web app, mobile apps and desktop applications. They have a free license for the icons with about 800 icons but if you want the whole set, you will need to shell out either $25 or $59 with future updates included. You can learn more about the licensing options for the icons here.

You can learn more about Glyphicons here.

Clarity Icons

Clarity Design System is a set of UX guidelines, HTML/CSS framework, and Angular components working together to craft exceptional experiences. I covered Clarity Design System in a previous post, UI Libraries and Frameworks for Angular 6, here. You can browse the vast icon library here. They cover all major categories imaginable like technology, social, ecommerce etc.

You can learn how to get started with Clarity Icons here.

Fontello

This is more of a tool than an icon pack, but I had to add this to the list. This tool packs vector icons from multiple sources into a single usable web font. This gives you important ability of combining icons from multiple source into one icon pack for your own use.

To quote the authors: “it is like Twitter Bootstrap, but for images and icons.” This gives you the freedom to be picky of icons to include, allowing you to reduce the Web Front footprint and have icons of your choice.

If you are interested, you can visit the official website here or their wiki here.

There are other icons pack that I haven’t worked with before but are worth considering. This include:

Lazy Loading Scripts and Styles in Angular

Maina Wycliffe — Sat, 04 Aug 2018 13:39:57 +0000

In my earlier post, I covered about lazy loading of angular modules. In this post, I will cover lazy loading of scripts and styles, both external and local. The goal of this post is to show how you can defer loading of a script or style and load it manually later when you need.

This also works perfectly with external scripts that if added to the index.html file of your project would have a negative impact on performance. It works well with styles and scripts that are needed for a specific case. One such scenario that spring to mind is handling payment using PayPal.

In most cases, payment is usually processed only after a customer has order an item not before. In this case, loading PayPal by placing the script tags at the index.html would negatively impact performance while it’s only needed at the last step for payment processing.

Loading Scripts and Styles on Demand

You will most like be loading the scripts in a component. To load the style or script, we are going to use document.CreateElement method to add a new script/style element.

For the script, we will create new scripts tags with the source pointing to our script URL. For the style, we will create new link element in the header, with HREF to our style URL.

To load our script, we begin by creating a new method loadExternalScript(scriptURL), which will return a promise. A promise will make it easier to ensure that we will use our script after it has been loaded successfully and not before.

return new Promise(resolve => {
const scriptElement = document.createElement('script');
scriptElement.src = scriptUrl;
scriptElement.onload = resolve;
document.body.appendChild(scriptElement);
});

The same goes for our style, where we will create a new method and then return a promise:

private loadExternalStyles(styleUrl: string) {
return new Promise((resolve, reject) => {
const styleElement = document.createElement('link');
styleElement.href = styleUrl;
styleElement.onload = resolve;
document.head.appendChild(styleElement);
});
}

You can wrap the above two methods in a class or service if you wish. It will make it easier to reuse the methods all over your class easily. Then, call the methods to load the scripts/style as show below:

this.loadExternalScript('url/to/your/scripts').then(() => {}).catch(() => {});
this.loadExternalStyles('url/to/your/styles).then(() => {}).catch(() => {});

And that’s it. You can now load styles/scripts on demand and not before. In the next step, I am going to cover how to lazy load local scripts.

Lazy Loading Local/Internal Scripts and Styles

When Angular CLI is building your application, all the styles and scripts added to the angular.json file are automatically added to the index.html, meaning they will be preloaded before rendering.

"architect": {  
"build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "styles": [
        "src/styles.css"
      ],
      "scripts": [
        "src/some-script.js"
      ],
      //...

To avoid this, you can specify that a specific script/style is to be lazy loaded and angular will just output a bundle and won’t add it to the index.html. You do this by specifying the script/style in object format, instead of a simple string as shown above. The object formats allows you to provide more information to the CLI about how to handle a specific style sheet or script. This information includes the output name, whether to lazy load and the source of the style/script.

{
"input":"path/to/your/lazy-script.js",
"lazy": true,
"bundleName": "lazy-loaded-script"
},

You also must specify the output name (bundleName) to be able to reference to it later. If you don’t, Angular CLI will randomly generate a bundle name, which will change on each build.

"scripts": [
  "src/some-script.js",
  {
"input": "path/to/your/lazy-script.js",
"lazy": true,
"bundleName": "lazy-loaded-script"
  },
],
"styles":
[
  "src/some-styles.css",
  {
"input": "path/to/your/lazy-style.css",
"lazy": true,
"bundleName": "lazy-loaded-style"
  },
],

Working with Environment Variables in Angular 6

Maina Wycliffe — Thu, 02 Aug 2018 09:21:54 +0000

It’s common for developers to have multiple application versions that target different environments i.e. development and production. It’s common that each environment will have some unique environment variables i.e. API Endpoint, app version etc. Angular provides environment configurations to declare variables unique for each environment.

Ideally, you want to automatically apply a flag, let’s say --prod, and the angular compiler replaces the API endpoint variable with the production API endpoint for you. What you don’t want is to manually change the endpoint before building your app. This increases the chance you will make a mistake that might break your app or worse.

Dealing with only 2 Environments

By default angular supports two environments – production and environment. The environment files for the two environments can be located under the environment directory, inside the src directory at the root of your workspace or project folder. You can learn more about angular workspaces here. Inside, there are two files – environment.ts and environment.prod.ts. As you might have guessed, the second file is the production file while the first one is the dev or default environment. Angular CLI compiler, will automatically replace the first file with the second file each time you build with the --prod flag.

ng build --prod

If you open the file, the content of the first one will have production set to false while the second one will have production set to true.

// environment.ts environment variables
export const environment = {
production: false
};
//environment.prod.ts environment variables
export const environment = {
production: true
};

All variables which vary based on the environment, should be placed inside these two files appropriately. Check the examples given below for the API Endpoint.

// environment.ts environment variables
export const environment = {
production: false,
APIEndpoint: 'https://dev.endpoint.com'
};
// environment.prod.ts environment variables
export const environment = {
production: true,
APIEndpoint: 'https://prod.endpoint.com'
};

To access the variables, import the environment constant, and then use it as follows:

import { environment } from './../environments/environment';

Usage

const APIEndpoint = environment.APIEndpoint;

After that, every time you build your application without the --prod flag, then it will use the dev(default) API endpoint while when you use the --prod flag, it will use the production API Endpoint.

Dealing with 3 or More Environment

It’s also common to have more than two environments for your app. You could have, let’s say a staging and beta environments on top of production and dev environment. Angular provides a way to add the extra environments you need manually.

In our case, we need two extra environments – staging and beta, on top of the default two. We start by adding two more environment files next to our two already in existent. Start by creating two new files – environment.staging.ts and environment.beta.ts and then copy the content of the environment.prod.ts to the two files. Next, change the variables to the appropriate values as per your environment.

// environment.staging.ts environment variables
export const environment = {
  production: true
  APIEndpoint: "https://staging.endpoint.com"
};
// environment.beta.ts environment variables
export const environment = {
  production: true,
  APIEndpoint: "https://beta.endpoint.com"
};

Next, we need to make configuration changes to our angular.json – at the root of our workspace. This will enable Angular CLI to recognize our two new environments and use the new environment files we created in the previous step.

First, open angular.json and navigate to the configurations key (Key map: projects -> yourappname -> architect -> build -> configurations). By default, there will be only one key – production, with the following setting:

"configurations": {
   "production": {
       "fileReplacements": [
           {
              "replace": "src/environments/environment.ts",
               "with": "src/environments/environment.prod.ts"
           }
        ],
        "optimization": true,
        "outputHashing": "all",
        "sourceMap": false,
        "extractCss": true,
        "namedChunks": false,
        "aot": true,
        "extractLicenses": true,
        "vendorChunk": false,
        "buildOptimizer": true,
        "serviceWorker": true
   }
}

Duplicate the production key and its content, rename the key from production to staging, then on the fileReplacements key of the staging configuration key, replace:

"with":"src/environments/environment.prod.ts"

with

"with":"src/environments/environment.staging.ts"

Your new configuration for staging environment should look like this:

"configurations": {
   "production": {
        // ...
    },
    "staging": {
    "fileReplacements": [
     {
         "replace": "src/environments/environment.ts",
         "with": "src/environments/environment.staging.ts"
     }],
     "optimization": true,
     "outputHashing": "all",
     "sourceMap": true,
     "extractCss": false,
     "namedChunks": false,
     "aot": false,
     "extractLicenses": true,
     "vendorChunk": false,
     "buildOptimizer": true,
     "serviceWorker": true
   }
}

Repeat the above steps for beta and any extra environments you wish to add.


"beta": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.beta.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"serviceWorker": true
}

NB: You will need to modify the above settings to closely reflect what you expect on your environment. For instance, you might want to turn off ServiceWorker on the staging server and leave it on in beta. This will ensure service worker has not cached the app and its resources on the browser when refreshing.

Building your App

Finally, to build your application with the new custom environment, use the –configurations=environment-name flag, as show below:

//for staging environment
ng build --configuration=staging
//for beta environment
ng build --configuration=beta

And for the Angular default environment, there isn’t any changes at all to their build commands.

//for production environment
ng build --prod
//for dev environment
ng build

And that’s it, you can now configure your Angular app with as many environments as you wish.

Top VSCode Extensions for Angular Developers

Maina Wycliffe — Mon, 30 Jul 2018 10:08:14 +0000

Since the release of VSCode a few years ago, it has become very popular among developers. VSCode is my favorite text editor and use it every day for almost all my projects. The only exception are projects related to Machine Learning where Notebook Style IDEs’ are more suitable.

In my previous post, I wrote about tips to improve the angular development experience. In this post, I am going to look at the VSCode extensions that are a must have for Angular Developers. So, without further ado:

Angular Language Service Extension

This one is a must for any Angular Developer. Angular language service is a way to get completions, errors, hints, and navigation inside your Angular templates. It doesn’t matter whether they are external, in an HTML file or embedded in annotations/decorators in a string.

This extension will use Angular Language Service to provide Intellisense, AOT (Ahead of Time) Compilation Diagnostic Information, Quick Information and Go to Definition. These are useful features that make your life as a developer easier.

Visit the extension page for more information.

Angular-2 Inline

I don’t use inline templates that often, but when I do, I find that lack of Intellisense makes my work that more difficult. This extension has alleviated that problem since I started using it. It provides code autocompletion, syntax highlighting and quick information for inline templates.

Visit the extension page here for more information.

IntelliSense for CSS class names in HTML

This extension does one simple Job, scan your current workspace looking for CSS Classes and then provide autocompletion for the same classes inside your angular html templates. Whether the classes are bootstrap classes or your own custom classes, this extension will find them and provide autocompletion for them under the class attribute of your html elements. It is simple, neat and works out of the box.

You can learn more about this extension here.

Debuggers for Chrome, Firefox and Edge

These are three extensions that basically do the same thing but on different browsers. They enable you to test your Angular/JavaScript application. The neat trick is that debug information is sent directly back to visual studio code console instead of the browsers console.

On top of that, you can add break points to your Angular components, and step through the execution of your code. These are important tools to allow you to test your app compatibility with multiple browsers.

You can learn more about the extensions in the links provided below:

TSLint Extension (Typescript Lint)

This extension integrates TSLint into VSCode. TSLint is an extensible static analysis tool that checks TypeScript code for readability, maintainability, and functionality errors. This extension brings all this goodness to VSCode.

For more information about TSLint, visit the official github repo here. The extension also provides some important VSCode commands such as Auto-Fixing of problems highlighted by TSLint among others.

You can learn more about this extension here.

Prettier – Code Formatter

Every developer wants their code to look clean, organized and be consistently formatted. Clean, organized and consistent code makes it easy to read and follow and even prettier to look at. That’s the goal of this extension.

This extension also comes with a host of configuration options such as where to add line break, format on save/paste or type, whether to automatically add semicolons at the end of a statement etc. It works well with JavaScript/TypeScript and CSS. For html, VSCode seems to do a fine job on its own – no extension required.

You can learn more about this extension here.

NPM

This is a simple extension that I find extremely useful. In your package.json file, if you select or hover on a package version number, it will automatically pull the latest version of the package from NPM.

This gives you an option to easily know whether you are using the latest version of an NPM package. That’s what I use it for mainly, but it can do more than that. The extension will validate your package.json file for errors, quickly run NPM scripts and stop a running script. For those of you who use yarn, some of the features may be unavailable.

You can learn more about this extension here.

Git History

This is another essential extension for anyone who uses Git in their projects. It provides a nice UI for you to interact with your Git repo. With a click of button, you can get all your git history for your current VSCode Workspace. You can search, view previous copy of a file, compare, revert, merge and do a lot of git operations with this extension. Right click on a file inside the explorer and you can view its git history and previous versions easily. And with over 3 Million install, you can see why a lot of developers love this extension.

You can learn more about this extension here.

Angular 6 Snippets

I don’t use this extension that much, but it would be criminal not to include it. It is developed by John Papa, a prominent member of the Angular Community. It adds snippets for Angular for both TypeScript and HTML.

In a single command, it will generate boilerplate code for an angular service, component etc. or boilerplate code for your html element. On top of html and typescript, this extension also supports docker file and JavaScript.

You can learn more about this extension here.

Path Intellisense

This is a simple yet useful extension whose goal is to provide filename Intellisense inside your code. It relies on the TsConfig Base URL to map the root of your project. It enables you to navigate through your directories in your project until you get to the file you want. There isn’t much to say about this extension considering the name is quite self-explanatory.

You can learn more about this plugin here.

Conclusion

Those are some of the VSCode extensions I use to improve my Angular Development Workflow. If I left any extension from this post, you can suggest it in the comment below and I will be happy to add it to this list. Thank you for getting this far, don’t forget to share if you found this helpful.

UI Libraries and Frameworks for Angular 6

Maina Wycliffe — Fri, 27 Jul 2018 13:41:59 +0000

UI Libraries and Frameworks make it easier for developers to build clean and consistent User Interfaces (UI). They provide components, utilities for common use within your Application. Some UI Libraries provide you with the freedom to switch things up using themes. While other provide a clear consistent User Experience. Forcing developers to adhere to a set of strict design language. If you are looking for a new UI library and Framework for your application, here a few honorable mentions:

Angular Material 2

Angular 2 Material is an adaptation of Google Material Design Language for Angular 2 and above. It offers Material Design Components for angular. Some of these components include Cards, Dialog, Lists, Grid, Side Nav etc. It is closely integrated with Angular, offering APIs for its component with excellent documentation and demos. If you are a fan of Material Design, the this should be on top of your list. On its own, it lacks the ability to provide a powerful responsive design system. Therefore, it is common to pair it with Angular Flex Layout.

The two libraries are not bundled together. This allows developers to use either of the two libraries independently, or both at the same time. It is also heavily optimized for performance. This is achieved through allowing developers to import only the set of components they are using in their projects. This ensures that your deployment build doesn’t end up with extra components that you are not using.

You can learn how to get started with Angular Material here.

NG Bootstrap

Bootstrap is one of the most popular and complete UI frameworks out there. It offers everything you would like on a UI framework. The major downside to it, as far as Angular is concerned, is that it uses jQuery components. While you can still use Bootstrap classes without jQuery, you will require it to take full advantage of it. And this is where ng-bootstrap comes in.

ng-bootstrap offers a set of components build with bootstrap CSS. These components are build the angular way, using directives and components (angular components). The widgets on offer are the same as the components offered by bootstrap. This eliminates the need for jQuery. On top of the many components/widgets on offer, you still retain the advantages offered by CSS Bootstrap. You get countless styles for your different html element on your site, a responsive grid design and countless utilities classes. You can learn more about ng-bootstrap here.

Clarity Design System

This is a set of UX Guidelines, a HTML/CSS Frameworks and a set of Angular Components all rolled into one. The goal of Clarity Design System is to provide an exceptional UX by combining the three. The UX guidelines are developed through research to make it easy to design and deliver a great UX.

It offers a responsive grid system which is similar to what is offered by bootstrap. Just like the other UI Frameworks in this list, it has a lot of components and utilities for you to use. It also comes with its own Icon Set.

You can learn how to get started with Clarity here.

PrimeNG

If you have ever worked with Java UI Framework – Prime Faces, the PrimeNG will look very familiar. PrimeNG is a port of the popular Java EE framework for Angular 2 and above. It offers components, responsive design and key utilities for Angular 2 developers.

It offers over 80 components for Angular, giving it a huge advantage over ng-bootstrap and angular material. On top of that, it can easily be customized through the use of themes.

You can learn how to get started with PrimeNG here.

Onsen UI for Angular

Unlike other frameworks on this list, Onsen UI is designed for building hybrid apps for Android and iOS apps. It provides a set of components with both flat design and material design, which provides more choices for you as a developer.

You can learn how to get started with Onsen UI for Angular here.

Honorable Mentions:

Ant Design for Angular – Implements the Ant Design
Lightning Design System – Contains native Angular Components written using Lightning Design System CSS framework.
Ionic Framework - for Building Cross Platforms Apps

Angular – Managing Authentication State Using NGXS

Maina Wycliffe — Wed, 25 Jul 2018 13:26:34 +0000

Managing an apps Authentication State is a vital task that as Single Page App (SPA) developers, have to handle very often. It’s every developers goal to provide a consistent user experience in your application, depending on whether they are signed in or not.

In this post, we are going to build an authentication system that relies on NGXS for state management. NGXS is a state management library made for Angular. There are other alternative of course like the popular NGRX. You can learn more about NGXS here.

Introduction

I want to demonstrate a comprehensive authentication solution that covers all foreseeable angles. This will include:

Authentication Service – to interface with your backend
A guard to protect your routes
HTTP Interceptor – To automatically attach authorization tokens to outgoing requests
State Management – Store Authorization Token, Maintain a State

Getting Started

First, you will need to install both NGXS and a NGXS Storage Plugin.

yarn add  @ngxs/store @ngxs/storage-plugin

Then, and it to your imports in the App Module:

import { NgModule } from '@angular/core';
import { NgxsModule } from '@ngxs/store';
@NgModule({
imports: [NgxsModule.forRoot([])]
})
export class AppModule {}

For now, let’s leave the forRoot array empty. We will come back to this later once we have created our authentication state. Next, let’s work on our Authentication Service.

Authentication Service

In this service, we will have a couple of methods to authenticate users. The most common use case is to send http requests to the server and return observables. In our service we will have two methods: A sign in and a sign out method. The sign in method will return an observable with user details while the sign out will return a null observable.

// Auth Service Methods

signin(email: string,password: string): Observable<{ name: string; email: string }> {
/*
 This will presumably call a http backend and return the response

 return this.http.post<{{ name: string; email: string }}>(url, { email: email, password: password })
      .pipe(
        map(res => res.body)
      )
    */
return of({
      name: 'Some Name',
      email: 'some@email.com'
    });
}
signout(): Observable<null> {
    return of(null);
}

Auth State Management

The first thing we need to create are model and action class for our state. You can put each on its own separate file, or all of them in on a single file. Then, we need to create a single model to hold our current authentication model/data.

// Auth State Model
export class AuthStateModel {
// if you have an extra token like authorization, you can add it here plus any other user information you might want to store
 token?: string; // refreshToken?: string;
 email?: string;
name?: string;
}

After that, we need to create two actions – A Sign in action and a Sign out action:

// Auth State Model

export class Signin {
static readonly type = '[Auth] Signin';
// these are parameters to pass to the action when dispatching it also known as metadata // they work just like normal parameters in normal parameters
 constructor(private email: string, private password: string) {}
}
export class Signout {
static readonly type = '[Auth] Signout';
}

Next, we need to create our state class (authentication state class) and wire everything up:

// Auth State Model

@State<AuthStateModel>({
name: 'auth' // the name of our state
})
export class AuthState {
@Selector()
static token(state: AuthStateModel) {
return state.token;
}
@Selector()
static userDetails(state: AuthStateModel) {
return {
name: state.name,
email: state.email
};
}
}

You can add extra selectors for different information stored with our state like refresh token and other personal details

// Auth State

// ...
export class AuthState {
// ...

@Selector()
static refreshToken(state: AuthStateModel) {
return state.refreshToken;
}
constructor(private authService: AuthService) {}
@Action(Signin)
login(
{ patchState }: StateContext<AuthStateModel>,
{ email, password }: Signin
) {
return this.authService.signin(email, password).pipe(
tap(result => {
patchState({
token: result.token,
name: result.name,
email: result.email
});
})
);
}
@Action(Signout)
logout({ setState, getState }: StateContext<AuthStateModel>) {
const { token } = getState();
return this.authService.signout().pipe(
tap(_ => {
setState({});
})
);
}
// ...
}
// ...

And finally, we need to add our new Auth State to the state of array of NgxsModule.forRoot([]) method (The array we left empty at the beginning):

NgxsModule.forRoot([AuthState])],

And because we want our authentication state to survive page reloads, lets import the NGXS Storage Plugin we installed into our app module.

NgxsStoragePluginModule.forRoot({
key: ['auth.token ', 'auth.email ', 'auth.name ']
});

NB: The keys passed start with the name of our state followed by the item we are storing. So, if you check local storage on the browser, you will find the token under auth.token instead of just token.

Signing in and out

Now, we can add a method to sign in and sign out in our components. Instead of directly calling sign in and sign out methods in Auth Service, we will call on NGXS Store to dispatch sign in and sign out actions. Then we will subscribe to the observable:


signin(): void {
    this._store
      .dispatch(new Signin('some@email.com', 'password'))
      .subscribe(success => {}, error => {});
}

The same goes for our sign out method:

this._store.dispatch(new Signout()).subscribe(success => {}, error => {});

NB: Remember to inject NGXS Store into your components:

import { Store } from '@ngxs/store';

And:

constructor(private _store: Store) {}

HTTP Interceptor

In one of my earliest posts, I covered HTTP Interceptors in Angular, in this section I won’t go into details about them. Our http interceptor will catch all requests and attach our token from our auth state. We are going to fetch the token from our auth state and attach it to every outgoing requests.

First, get our auth token from the auth state:

const token = this._store.selectSnapshot(state => state.auth.authorization);

NB: We are using selectSnapshot to get the token because it returns a simple string/value that is readily usable by our http interceptor. There is no need to subscribe to get the token we need.

Then, clone and attach the token to the header of our intercepted http request:

// Clone the request to add the new header.
const modifiedRequest = req.clone({
headers: req.headers.set('authorization', token ? token : '')
});

NB: Always remember to always validate the token on the server side.

And finally, send the modified request:

return next.handle(modifiedRequest);

Don’t forget to add it to your list of providers in the app module:

providers: [
// ...
 AuthService,
{
provide: HTTP_INTERCEPTORS,
useClass: OurHttpInterceptor,
multi: true
}
// ...
];

Router Guard

Router Guards are used to protects routes from unauthorized access. In our case, we need to check whether the user is authorized and if not redirect to the login page. We need to get the token, from our auth state and check if it is set. If not, then redirect back to login or home page:

First, inject NGXS store and router into our auth guard:

constructor(private _store: Store, private router: Router) {}

Then, inside of our canActivate method, we need to check if the token is set, and if not redirect to the sign in page:

// ...

export class GuardGuard implements CanActivate {
// ...

canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): boolean {
const token = !!this._store.selectSnapshot(
ourState => ourState.auth.authorization
);
if (!token) {
this.router.navigate(['/']);
return false;
}
return true;
}
//...
}

The same will do for canActivateChild method if you need one. And that’s it. You should now have a functioning authentication system using NGXS that can sign in and sign out users, maintain authentication state, attach authorization tokens to your HTTP request and protect routes from unauthorized requests.

You can find all the above code in the Github Repository here.

Angular Tips to Improve your Development Experience

Maina Wycliffe — Mon, 23 Jul 2018 05:49:13 +0000

Developing web apps using Angular and other frameworks and languages can be sometime a daunting task. You need to write thousands of lines of code and sometime rewrite countless times some of them, to achieve a common goal. Today, I am going to share some Tips to make your development work less daunting. Most – if not all – of these tips are applicable to other JavaScript frameworks and Programming in general but for the sake of simplicity (and my sanity) I will concentrate on Angular and TypeScript.

Build Libraries for use in your Projects

If you are an active angular developer, you will always be working on multiple projects at any given time. While most projects are unique in their designs, there are those overlapping aspects which are shared across most if not all projects. You can make it easier by building libraries for the shared features and use them across multiple projects that needs them. This could potentially save you a lot of copy-pasting and testing hours. It also makes it easier to update the code and upgrade to newer versions of Angular without necessarily breaking old applications. Even better, you could open-source the libraries and have other developers, use, contribute and enrich your libraries. And with angular 6, it is even easier to build, package and deploy libraries. If you are looking to get started, here are some tutorials to help you.

Always Write Test (Both End to End and Unit Testing)

This may sound obvious to experienced developers, but it’s not, especially to beginners and intermediate ones. Writing Tests is a time-consuming activity that most developers don’t see the need for. Sometimes, you are just working on small project and other times working on a tight deadline. Before you know it, the project is so large, in such a way writing tests has become an enormous task. So, the rule of the thumb is, write tests for all your projects. If you are looking to get started with testing, I suggest the official documentation of Angular.

User Alias for Imports

Have you ever tried to restructure your code by moving things around in an Angular CLI Workspace? You end up having to update so many components, services, modules etc. that imported those items. This may not be a problem in a small project but in a huge project it can be time-consuming. You can make this easier by using aliases. Instead of using a relative path to your service:

import { someservice } from ‘../../../services/some.service’;

You can instead user an alias that points to your services:

import { someservice } from ‘@myservices’;

To achieve this, first, you need to create a TypeScript files for exporting all your services – let’s call it services.ts. Then export all the services we want from inside this file:

export * from './some.service';
export * from './some.other.service';

After that, modify the typescript configuration (tsconfig.json) and add a reference to our service.ts under our paths:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    // ...
    "paths": {
      "@services": ["src/app/services/services"],
  }
}

This way, any changes to the path of a service (like moving it somewhere else or just renaming it), then all you need to do is reflect the new location inside the service.ts file.

Write Readable Code

We have all been there, when you spend a lot of time trying to figure out what a block of code does. Or wondering what that variable with an ambiguous name does. Poorly written code is not only a problem to other developers who will read your code but even to you. When you come back to your code after a while and start wondering – what did I want to achieve here or how or what’s does this do? Then you should review your coding habit – I am also guilty about this [bummer].

I would love to go on about this, but it will turn out to be a rant which is not helpful to anyone. Instead, I advise you to watch John Papa presentation on readable code on ng-conf below.

Always use Static Type and Interfaces for your objects

In TypeScript, Interfaces define the type of content and shape an object can have. For instance, If the object is a list of students, then it might have a name, age, class etc. inside. So, what an interface does is define, the object must have a name, age and class. In this case, name and class are of type string while age is a number. By using interface and static types in your code, you will be able to catch a good number of errors that may arise due to type mismatch – like trying to multiply a string and a number.

But, the main reason I am suggesting this – in the context of this post – is, when you are using a good text editor (i.e. VS Code, Atom, Sublime etc.) you will be able to receive Intellisense (auto-completion, error checking and navigation) right inside your angular templates (You will need Angular Language Service for that).

This gives you a piece of mind that your variables are correctly reflected inside the template. There are no stupid errors misspelling errors. That’s time and effort saved that you can use elsewhere. This is not an exhaustive list, if you have a tip to share, post it in the comment section for others who will come after you.

A Guide for Building Angular 6 Libraries

Maina Wycliffe — Sat, 21 Jul 2018 11:18:54 +0000

In an earlier post, I wrote about Angular CLI Workspaces, a new feature in Angular 6 that allows you to have more than one project in a single workspace (Angular CLI environment). In this post, I will show you how to create angular 6 Libraries. On top of that, I will show you how to pass configurations and data to your new library from your Angular Application.

Why?

If you have multiple active angular projects, you may have come to realize that there so many things they share or have in common. Sometime, as a developer you are forced to copy paste their code to new projects for features they have in common.

A good example of this is Authentication. While the UI (Sign in, sign up, password reset etc. forms in the case of Authentication) may change, the underlying code (Services, HTTP Interceptors, Guards etc.) tends to remain the same apart from some incremental modifications and bug fixes. Wouldn’t it be easier that instead of copy pasting, you could just have a private library that you can hook into your project and have access to all the features you need for your new project? This would save you lots of hours which you could utilize on the UI and other features of your new project.

Overview of our Library

We are going to work with a demo that does the following: A component to display a list of Football/Soccer National Teams and the number of World Cup trophies they have won. A service that will take a list of teams Injected to our library and sort it by descending order. The config file will be injected using the forRoot method through the module (Similar to the way you pass routes to the router module).

import : [ RouterModule.forRoot(routes) ]

NB: To inject our configuration, we will rely on Injection Token method. It is not the only way to pass configurations into a library or module. If you want to explore the other methods, I suggest going over this excellent post by Michele Stieven.

For our demo, we are going to rely on the following libraries: Angular Material, Angular CDK and Angular Flex Layout.

Getting Started

To get started, we are going to create a new angular project (just a regular project):

ng new application-name

Then, open that directory on terminal or PowerShell:

cd application-name

And generate a library inside our angular workspace using ng generate library command.

ng generate library test-library --prefix=tl

A new library is generated and is placed under the /projects/my-library directory in your angular workspace. To use your library in your current app, you need to build your library every time. To build the library, use the ng build command followed by the name of the project (library in this case):

ng build my-library
ng build --prod my-library

The build artefacts can be found under a directory with the name of the library, inside the /dist directory in your workspace.

Working on the library

If you open your project folder, the folder structure will look like this: When you generate a library, Angular CLI will creates 3 files: the main library module, a component and a service. For our demo, there is no need to add any extra component or service. But, if you need to add one, the ng generate command with the project flag will do the trick.

ng generate component component-name --project-name=test-library
ng generate service service-name --project-name=test-library

Building the Library

Our demo library can be broken down into 3 items: The Library Module (think of AppModule), Our Service and Component. On top of the three items, there are classes and interfaces that will play a supporting role for our library. You can get the whole source code on Github here. First, we need to define an injection token constant to use Injection Token method:

export const TestLibConfigService = new InjectionToken<TestLibConfig>(
'TestLibConfig'
);

And then, we need to define our interface(TestLibConfig) for the object we will be passing using our forRoot method.

export interface TestLibConfig {
title: string;
teams: {
country: string;
trophies: number;
}[];
sport: string;
}

NB: To avoid Circular dependency warning, you can put the TestLibConfig and TestLibConfigService into separate files instead of the module file. These warnings occur because the two will be imported by the service and the module, while the module will import the service.

Library Module

Since we now have an injection token, we can now go ahead and create our forRoot method that we will use to pass the configuration object to our library.

static forRoot(config: TestLibConfig): ModuleWithProviders {
return {
ngModule: TestLibraryModule,
providers: [
TestLibraryService,
{
provide: TestLibConfigService,
useValue: config
}
]
};
}

As you can see, our forRoot method takes a config object and provides it together with the services that are in our library. Also, we need to import Material Components we are using in our Library and declare and export our component.

@NgModule({
imports: [
BrowserModule,
FlexLayoutModule,
MatListModule,
MatToolbarModule,
MatCardModule],
declarations: [TestLibraryComponent],
exports: [TestLibraryComponent]
})

Library Service

Then, we need to inject the configuration object into our service.

constructor(@Inject(TestLibConfigService) private config: TestLibConfig) {
console.log(config);
}

Now the configuration object is ready for use in our service. The rest of the service looks like this:

export class TestLibraryService {
// inject our configuration into our service
 constructor(@Inject(TestLibConfigService) private config: TestLibConfig) {
console.log(config);
}
// You can now use your configuration as you normally would
 // if it was a http request, then you could return observables which you can subscribe to
 getConfig(): Observable<TestLibConfig> {
return of(this.config);
}
getTitle(): Observable<string> {
return of(this.config.title);
}
getTeams(): Observable<{ country: string; trophies: number }[]> {
// just for fun, let's sort this by descending order
 // we shall use, bubble sort
 const sorted = this.config.teams.slice();
for (let i = 0; i < sorted.length; i++) {
for (let j = 0; j < sorted.length - 1; j++) {
if (sorted[j].trophies < sorted[j + 1].trophies) {
const swap = sorted[j];
sorted[j] = sorted[j + 1];
sorted[j + 1] = swap;
}
}
}
return of(sorted);
}
getSport(): Observable<string> {
return of(this.config.sport);
}
}

Our Component:

And finally, our service is ready to be used by our library component normally. Here is the component content:

export class TestLibraryComponent implements OnInit {
public teams$: Observable<{ country: string; trophies: number }[]>;
public title$: Observable<string>;
constructor(private testLibService: TestLibraryService) {}
ngOnInit() {
this.teams$ = this.testLibService.getTeams();
this.title$ = this.testLibService.getTitle();
}
}

And the template looks like this (Remember I am using Angular Material, you can replace everything easily with any UI Library like Bootstrap and it will still work):

<mat-toolbar color="primary"> <span>Demo App</span> </mat-toolbar>
<div gdAuto>
<div
fxLayout="column"
fxFlex.xs="100"
fxFlex="600px"
fxFlexOffset="calc(50% - 300px)"
fxFlexOffset.xs="0"
>
<mat-card>
<mat-card-header>{{ title$ | async }}</mat-card-header>
<mat-card-content>
<mat-list role="list">
<mat-list-item
*ngFor="let x of teams$ | async; let i = index"
role="listitem"
>
{{ i + 1 }}. {{ x.country }} - {{ x.trophies }}</mat-list-item
>
</mat-list>
</mat-card-content>
</mat-card>
</div>
</div>

Next, build the library:

ng build –prod test-library

Using our Library in our Angular App

After building the library is complete, go ahead and import it to your Angular application:

import { TestLibraryModule, TestLibConfig } from 'test-library';

And add it to your imports array:

@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
TestLibraryModule,
TestLibraryModule.forRoot(testLibConfigs)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}

Don’t forget to define the testLibConfigs constant which we are passing to the library:

const testLibConfigs: TestLibConfig = {
title: 'World Cup Teams',
teams: [
{
country: 'France',
trophies: 2
},
{
country: 'Brazil',
trophies: 5
},
{
country: 'Germany',
trophies: 4
},
{
country: 'Argentina',
trophies: 2
},
{
country: 'Spain',
trophies: 1
},
{
country: 'England',
trophies: 1
},
{
country: 'Uruguay',
trophies: 2
},
{
country: 'Italy',
trophies: 4
}
],
sport: 'Football/Soccer'
};

And finally, you can now use the library component inside your app components as shown below:

<div gdAuto><tl-test-library></tl-test-library></div>

NB: Our demo library is using the prefix tl. By default, libraries will use app prefix just like a normal angular app. You can specify the prefix for the library when generating a library using --prefix flag.

Deploying your Library

When you have build your library, you will want to deploy it. To do that, just navigate to the build artefacts of your library and run NPM publish.

cd dist/test-library
npm publish

Angular 6 – Introduction to Progressive Web Apps

Maina Wycliffe — Sat, 14 Jul 2018 01:22:13 +0000

Earlier this week, I wrote a post about optimizing your angular application using lazy loading. In this post, I will focus on Progressive Web Apps to further improve the performance and user experience.

Introduction

The main goal of Progressive Web Apps (PWAs) is to provide a reliable, fast and engaging experience to your users. This basically involves caching static resources of your web app on the browser or client device, while also utilizing a ServiceWorker to cache some requests based on predetermined rules.

Basically, a ServiceWorker acts like an edge Content Delivery Network (CDN) on the client browser with almost zero latency. For instance, if you are operating a blog – the content of the blog post rarely changes once written. Therefore, there is no need to fetch it each time the user requests it or loads the page. It would be better if you could cache the blog post and only check for changes maybe every hour. This results to a much more smoother and rich experience for your users.

If you are interested in learning more about the internals of PWAs, please visit this page. The beauty of PWAs is that they will still work as normal website in older browsers or browsers. But in newer browsers, the experience is further enhanced. Another advantage is that it is possible to package and submit your PWA to Microsoft Store (For windows 10 users) increasing your audience significantly. A good example of this is the Twitter PWA. As major players continue to support PWAs, the benefits are only going to increase.

Adding Support for PWAs to Your App

In Angular 6, adding support for PWA is almost too easy, thanks to Schematics support. With a single command, angular will download and install relevant libraries and setup the basics of PWAs and ServiceWorker. The command is:

ng add @angular/pwa

When you run the above command, a web app manifest (manifest.json) and an Angular ServiceWorker config (ngsw-config.json) files are created. A web app manifest is a set of instructions to the browser on how the web app should behave once installed by the user. While the Angular ServiceWorker config file specifies which files and URLs to cache and how they should be updated.

Service Worker Configurations

By default, the ServiceWorker looks like this:

{
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": ["/favicon.ico", "/index.html", "/_.css", "/_.js"]
}
},
{
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": ["/assets/**"]
}
}
]
}

This will cache the following resources: index.html, favicon.ico, CSS and JavaScript build artefacts and your assets under assets directory. You can add any extra JS and CSS files you have to this list. You can find a detailed description of the service worker configuration file here.

App Manifest JSON

On the other hand, the web app manifest looks like this by default:

{
"name": "appname",
"short_name": "appname",
"theme_color": "#1976d2",
"background_color": "#fafafa",
"display": "standalone",
"scope": "/",
"start_url": "/",
"icons": [
{
"src": "assets/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "assets/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "assets/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "assets/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "assets/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "assets/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "assets/icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "assets/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}

The first thing you would want to do is replace the icons under icons with your own. Then, change your app name to your full app name and short name to the shortest name possible a visitor is familiar with. And finally change the theme color and background color to your web apps colors. You can leave the rest as they are. For a more detailed description of the manifest file, please learn more here. A few key things to note here:

Angular will only add the service worker to your app when you build with the production flag.
Due to security reasons, you need an SSL/TLS certificate to use a ServiceWorker on your website. This setting is enforced by the browser and there is nothing much you can do about it. For testing purpose, you can test a ServiceWorker on localhost without an SSL Certificate. On the positive side of things – you can easily get a Let’s Encrypt certificate for free here that works with any hosting.

Optimizing your Angular App using Lazy Loading

Maina Wycliffe — Sun, 08 Jul 2018 22:36:17 +0000

Lazy loading is a technique where you defer loading of content until such a time it’s needed. In single page apps (SPA), usually the whole web app is loaded initially before rendering can even begin. This includes sections of the web app that a user doesn’t need immediately or might never need.

The time it takes to load and render the initial view is usually high especially on slower connections. This is made worse if your app is very large. You can reduce the time it takes to load the initial view by breaking down your applications into smaller chunks, then loading them on demand i.e. Lazy Loading.

Introduction

Let’s take this scenario – If you have an app with three sections: Admin, Customer and Public sections. It’s very rare that visitors using the public section are interested in the admin or customer section. The components, modules and content that are part of those two sections are more content the browser needs to download before it can render your app. The visitor might not even need those sections and you wasted their time and possibly data. It makes sense to break down your application into at least 3 chunks and load them when needed.

So, if your application is over let’s say 2MB, and if the chunks are ideally equal in size, they end up being about 600 – 700 KBS for each section which ideally increases your loading times by about 66%. This can be further improved by breaking it down into smaller chunks for the individual section or lazy loading the content in the individual pages such as images and articles. This is entirely up to you as the developer.

Before we can continue, you need to have a good grasp on the basics of angular and routing in angular. You can learn the basics of angular routing here.

Getting Started with Lazy Loading

Lazy loading works with angular route module, which supports it out of the box. If you are creating a new application, use the --routing flag to automatically add routing module to your app.

ng new application-name --routing

NB: For Angular 7 and above, you can drop the --routing flag, and angular CLI will prompt you whether you want to enable Routing for your new project.

This will generate a routing file (app-routing.module.ts) next to the app.module.ts. Inside the routing file, there will be an empty variable routes, where you place your routes.

Next, you need to create a feature module (lazy loaded module) for each section of your app you want to lazy load. Ideally, they should be place at the root of the directory where all the components of that sections are placed.

In our case, if we structured our application in such a way that all components for the admin section are in the admin directory, then the feature module for admin, should be placed inside the directory at the root (admin/admin.module.ts and admin/admin-routing.module.ts). To generate such a module, you use the ng generate (g) module module-name command with --routingand --flat options.

This generates a new module with a routing module at the root of the given directory. Learn more about ng generate for modules here.

In our case, our command will look like this:

ng generate module admin/admin --flat --routing

You can do the same for each of our other feature modules (I will refer to them as lazy loaded modules from now onwards) – guest and customer:

ng generate module customer/customer --flat –routing
ng generate module guest/guest --flat –routing

Adding Routes

Next, you need to instruct the main module router, to load lazily the module modules you have just created. To do this, we need to provide path and loadChildren keys for each of our lazy loaded module in our route object.

After Angular 8

Before the release of Angular 8, angular used a static custom string to import lazy loaded modules. This made it harder for Typescript and Linters to catch incorrect path or module until runtime. This changed with the release of Angular 8, which now uses Dynamic imports method to import Lazy Loaded Modules.

[
{
path: 'admin',
loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) // dynamic import
 }
];

NB: If you use ng update to update Angular to version 8, Angular will automatically convert the import paths from static custom string to dynamic import.

Before Angular 8

[
{
path: 'admin',
loadChildren: './admin/admin.module#AdminModule'
}
];

You must provide the path to the module followed by the module name, separated by a hash under the loadChildren key. This should be done for all lazily loaded module.

[
{
path: 'guest',
loadChildren: './guest/guest.module#GuestModule', // For Angular 7 and Below
 loadChildren: () => import('./guest/Guest.module').then(m => m.GuestModule) // For Angular 8, using dynamic import method
 },
{
path: 'customer',
loadChildren: './customer/customer.module#CustomerModule', // For angular 7 and Below
 loadChildren: () => import('./customer/customer.module').then(m => m.CustomerModule) // For Angular 8, using dynamic import method
 }
];

The routes in your feature module should look as your normal routes do. Also, take note that you can mix both lazy loaded routes and your normal routes.

Shared Pipes and Components

Working with lazy loaded modules is not always as straight forward as you would like. For one, you can’t declare a component or a pipe in multiple modules in the same angular application. Also, you can’t use two components or pipes together that are not declared in the same module. These are some of the restrictions that I have come across and there could be more. But don’t worry, there are work around for this issues and others.

If you have a component or a pipe you would like to share across multiple lazy loaded modules, you need to create a shared module. In that module, you must declare the Components and Pipes you need to share and then export them. Then, in the lazy loaded module you want to use the shared components and pipes, you import the shared module and you will have access to all components and pipes exported under the shared module. A shared module is just a normal module without routing. I prefer placing all my shared modules under a single directory.

To generate such a module, use the ng generate module module-name --flat. Then, declare (not import) all the pipes and components and the export them.

NgModule({
imports: [CommonModule],
declarations: [CustomComponent1, CustomCompent2, CustomComponent3],
exports: [CustomComponent1, CustomCompent2, CustomComponent3]
});
export class SharedModule {}

NB: Avoid creating large shared modules unless necessary. If you find yourself doing this, you need to evaluate your lazy loading approach and possibly change it.

Working with Third Party Modules (Packages or Libraries)

This is where you will really rip the benefits of Lazy Loading if you rely heavily on large libraries. For each lazy loaded module, you must import only the needed Modules/Libraries it needs. This can significantly reduce the size of your chunks and reducing loading times of your application. A good example of this is Angular Material, which has a lot of material components that needs to be imported. With lazy loading, you can only import only the material component you need per lazy loaded module.

NB: You can also bundle multiple modules under a single shared module to make it easier to import all these modules – just the same way as we did with shared components and pipes.

Working with Services

Services in Angular are less problematic since there singleton. This means that there is only one instance of a service shared by the whole angular app. As such, you can provide services at the highest possible level of your apps lazy loading hierarchy. This allows all lazy loaded modules below to inherit the instance of your service(s). You can learn more about singleton services here.

Final Thoughts

Lazy loading is just one of the many steps of optimizing an angular application. On top of lazy loading angular modules, you can also lazy load content such as images. You can use 3rd party libraries to achieve this. In the next few weeks, I am going to be covering more steps for optimizing your angular application, to reduce load times and improve the user experience.

#100DaysOfMLCode – Join the challenge and learn Machine Learning

Maina Wycliffe — Fri, 06 Jul 2018 23:36:43 +0000

Machine Learning is the new cool kid in the block. It has huge application from Space Exploration to Finances, Medicine and Science. It is also estimated that demand for Machine Learning experts is going to increase for the foreseeable future, with an estimated increase of about 60% this year alone. On top of that, the industry has gone through huge transformation over the last few years. Before, to be a machine learning expert, you needed to have a PHD (or some high education level), but that’s no longer the case. Due to the involvement of large tech companies like Alphabet (Google parent company), IBM, Microsoft and others, it is now easier for anyone to start a career in Machine Learning.

What is #100DaysOfMLCode?

This is a challenge issued to Machine Learning developers (experts or newbies) to dedicate at least an hour a day for the next 100 days to learning and building machine learning models. I will let Siraj Raval explain this in the YouTube video below: https://www.youtube.com/watch?v=cuQMBj1cWPo By accepting and committing to the challenge publicly, you are likely to be dedicated to the course. Also, the fact that you are not doing this alone will be a motivation to many people to stay true to the course. The challenge ends at the end of this year (2018). For more details about the challenge, visit the official github repo here.

I am new to Machine Learning

If you are new to Machine Learning, there multiple resources which you can use to learn and am going to share them below. But before you can get started, I would like to suggest that you familiarize yourself with Python or R Programming languages. This is because majority of the tools you are going to come across will work natively with Python or R. Also, learning some mathematics especially in linear algebra and matrices will not hurt. If you are looking to getting started, below is a list of learning resources to help you:

Machine Learning Crash Course by Google – This is a free course by Google to introduce you to concepts of Machine Learning and TensorFlow. It has been used by Google internally to train their ML engineers and comes highly recommended.
A Guide by Siraj Raval for Learning Machine Learning in 3 Months.
io – You can use this website to Learn Machine Learning concepts using a hands-on step by step interactive tutorial. You can also polish your Python programming skills using the same model if need be. I recommend this to those with minimal to little experience of Python Programming.
YouTube – If you want to learn through demonstrations and short videos, just head over to YouTube and search for Machine Learning tutorials. Also, I would recommend you follow Siraj Raval and TensorFlow YouTube Channel.
And finally, Kaggle – A great platform where you can learn Machine Learning.

I will keep updating this article for new learning resources as I come across them. Join #100DaysOfMLCode movement on twitter and together let us master Machine Learning. And remember to spread the love, don’t do this alone.

Using custom date formats for Angular Material Date Picker

Maina Wycliffe — Tue, 03 Jul 2018 19:29:11 +0000

Angular material has a very nice date picker but while its functionality can accommodate a lot of developers, sometimes it just falls short. For instance, I find it very inflexible when dealing with date formats. While I understand that it’s nice to have a common date format for the whole application, sometimes you need to be able to set date formats on the fly without breaking your back. Sometimes all you need is a simple solution that is ready to be used anywhere in your application.

Introduction

This tutorial assumes you have some knowledge in Angular and Angular Material, because I won’t go into details on the basics like setting up modules. You can learn more about Angular here and Angular Material here. This tutorial has been tested with Angular 6, but I expect it to work with Angular 5 as well but not any earlier version than that.

We will be using ControlValueAccessor from @angular/forms to create a custom form component that will wrap around Angular Material Date Picker component. The new component will extend the Material Date Picker component and allow you to pass a date format in which to use. To format the date, we will use MomentJS which you can learn more about here. Feel free to use a different library or rely with JavaScript/Typescript in build methods.

In the demo for this tutorial, we will have multiple Date Pickers that give back different date formats. To simplify this tutorial, I will ignore all properties of Angular Material Date Pickerthat are optional like minimum and maximum date. This can easily be remedied by passing them as options in your component using the Input() method. This method allows parent components to pass variables to child component, you can learn more about this here.

You can play with this tutorial demo here.

Getting Started

To get started, you need to install (using either NPM or Yarn) the following packages: momentjs, angular-material, angular-flex-layout and material-moment-adapter inside your angular application. You can install them using Yarn in one command as shown below:

yarn add –dev @angular/material moment @angular/material-moment-adapter @angular/flex-layout

For those using Angular 6, you can install angular material using the new ng new command:

ng add @angular/material

Finally import the following in your main NgModules file:

FormsModule,
ReactiveFormsModule,
BrowserAnimationsModule,
MatDatepickerModule,
MatInputModule,
MatFormFieldModule,
FlexLayoutModule,
MatCardModule

On top of Angular Material, I am using Angular Flex Layout, which you can learn more about here.

Create Custom Date Picker Component

Next, create a new component – date-picker-component – using Angular CLI.

ng new component date-picker

This component will have our Material Date Picker inside it but will read and format the date as we want. It will also accept date input incase we have an initial date or are setting it programmatically from an API. Inside the component typescript file, we are going to implement ControlValueAccessor:

export class DatePickerComponent implements ControlValueAccessor {}

Then, we are going to add a provider for the component, as shown below:

providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DatePickerComponent), //Name of our component
 multi: true
}
];

NB: Remember to import remember the necessary imports for the component as shown below:

import { Component, forwardRef, Input } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { MatDatepickerInputEvent } from '@angular/material/datepicker';
import * as moment from 'moment';

Inside our component, we need to add a get and set method for the value of the date. We start by declaring a property of the form _dateValue (note the preceding underscore) and then creating the two methods to set and get the value of the _dateValue property:

@Input() _dateValue: string = null;
get dateValue() {
    return moment(this._dateValue, this.format);
}
set dateValue(val) {
    this._dateValue = moment(val).format(this.format);
    this.propagateChange(this._dateValue);
}

On top of those two methods, you need the following methods – which I won’t go into details about:

addEvent(type: string, event: MatDatepickerInputEvent<Date>) {
    this.dateValue = moment(event.value, this.format);
}
writeValue(value: any) {
    if (value !== undefined) {
      this.dateValue = moment(value, this.format);
    }
}
propagateChange = (_: any) => {};
registerOnChange(fn) {
    this.propagateChange = fn;
}
registerOnTouched() {}

We also need a placeholder and format property in our component. The placeholder will be passed to the Material Date Picker Component as a placeholder text. While format property will be used to format the value of the Date Picker when getting.

@Input() public placeholder: string = null;
@Input() private format = 'YYYY/MM/DD HH:mm:ss';

And finally, to our component template, where we will add a normal Material Date Picker input field:

<mat-form-field fxFlex="100">
<mat-datepicker-toggle matPrefix [for]="picker"></mat-datepicker-toggle>
<input
matInput
[matDatepicker]="picker"
[value]="dateValue"
(dateInput)="addEvent('input', $event)"
[placeholder]="placeholder"
/>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>

And that’s it, you have now a custom date picker that you can use anywhere in your application:

<app-date-picker
placeholder="Enter The First Date"
[(ngModel)]="firstDate"
format="YYYY/MM/DD HH:mm:ss"
></app-date-picker>

You can find the above code on github, here is the link. If you have any questions, please leave it on the comment section below.

Angular 6 - Angular CLI Workspaces

Maina Wycliffe — Sat, 02 Jun 2018 14:36:05 +0000

One of the least talked about features of Angular 6 is Angular CLI Workspaces. Workspaces or Angular CLI Workspaces give angular developers the ability to have more than one project in one workspace. This brings all your projects under the same workspace. This is not limited to applications but also angular libraries. This gives developers the freedom of breaking down large applications into smaller applications and modules. The modules such as authentication module can then be shared across the applications using those specific modules. This improves the workflow by reducing code repetition using shared libraries that are generated and managed by Angular CLI.

Getting Started

To use Angular CLI Workspaces, you must be running the latest version of Angular, Angular 6. If you are using an earlier version of Angular in your project, please upgrade by following the instructions here.

For a new project, there is nothing special about creating a new one:

ng new application-name

This will look like any other angular project, with all your source code being under src directory. To add another angular project (application or library) to your application, you use the ng generate command. This is the same command you use to generate new components, services, classes etc.

Generating a new application

ng generate application *new-application-name*

Generating a new library

ng generate library *library-name*

NB: You can learn more about ng generate command here. By default, all new applications and libraries are placed under the projects directory in the root of the angular workspace. You can change this by modifying the angular.json file in the root of your workspace, then modify the newProjectRoot to your preferred directory.

Running ng generate on new Projects

The initial application in your workspace is the default application. This means that when you run angular cli commands like ng generate component without specifying the project, then they are automatically generated in the default application. To generate components, services, classes etc. for the new projects you must provide the project option, as shown below:

ng g c my-new-component --project application-name
ng g s my-new-service --project application-name

The same applies to libraries:

ng g c my-new-component --project library-name
ng g s my-new-service --project library-name

Building and Running Different Projects

This is the easy part. When building or serving your application, you only need to add your project name to your build command, as show below:

ng serve application-name --aot
ng build application-name –prod
ng build library-name --prod

You can skip the project name when building or serving the default project.

ng serve --aot
ng build --prod
ng build –prod

The build files can be located in a project folder under dist folder in the root of your workspace. For instance, if the project name is project1, then they will be located under dist/project1 folder.

Final Thoughts

Angular CLI Workspaces is not a perfect tool but will improve with each release of Angular in the future. It would be nice if all projects could be placed under a single projects folder and not one for generated project and the src directory for the initial project. The other downside I came across is lack of or scattered documentation although this can be attributed to the fact that not many developers are using it for now. That being said, it’s a simple to use tool yet very effective that you should definitely give a try. In my case, I am already using it for most of my projects.

Automate Deployment of Angular Apps using AWS CodeBuild

Maina Wycliffe — Thu, 10 May 2018 13:42:46 +0000

Building and deploying Angular app is very time consuming, especially with large application. You also must keep track of which branch you are deploying to which environment and a little mix-up could be catastrophic. You can smoothen the building and deployment of your application using AWS CodeBuild. “AWS CodeBuild is a fully managed build service that compiles source code, runs tests, and produces software packages that are ready to deploy.”

What we are going to use

An AWS Account, if you don’t have one you can create on here. They have a 12 Month Free tier which you can learn more about here.
AWS CodeCommit/Github Repository.
AWS CodeBuild, CodePipeline, S3 and CloudFront for Deployment.
Angular Project with GIT Enabled

NB: AWS charges for using the above resources, please cleanup after you are done using them.

How does it work

AWS CodePipeline will detect changes on our repository, then will initiate the process of automatically building and deploying our app to an S3 bucket.
Then it will launch AWS CodeBuild to build and deploy the application on an S3 Bucket of your choice.

Preparations

AWS S3

You will need to create a new bucket and then give AWS CodeBuild permission to access and put the build files inside the S3 Bucket. If you don’t know how to create an S3 bucket, please follow this official guide. For permissions, we will cover this at the end of this post.

Getting Started

First, head over to AWS CodeCommit on AWS using the following link. Your window will probably look like the one below:

Click on Getting Started or Create Pipeline to get started. You will be presented with the following window, where there are six steps to follow for you to create your new pipeline. Let’s go through them step by step. If you are already familiar with AWS CodePipeline you can skip this guide up to Step 3.

Step 1: Enter Pipeline Name (Self Explanatory).

Please enter an Appropriate Name for your pipeline.

Step 2: Select Source for your Pipeline

This is the location of your Angular Source Code. It could be either AWS CodeCommit Repo, S3 Bucket Files or Github Rep. Select the source in the drop down, in our case we will use either Github or AWS CodeCommit. If you select Github, then click on the “Connect Github” button and follow the steps to authorize AWS Access. Then select the repository and the branch you would like to automatically detect changes and build.

If you select AWS CodeCommit, please select the appropriate repository and branch to automatically build. You can leave the rest of the settings as they are.

Please Note: For AWS CodeCommit, the repo you wish to connect to AWS CodePipeline must be in the same region as the one you are creating the pipeline for. You can change the region you are in by clicking on the drop-down button between Your account and Support at the top right corner of your browser. The default region is North Virginia.

Step 3: Build

This is what this whole article is about. Here we are going to setup CodeBuild to automatically build our application and deploy to an S3 Bucket.

Under Build Provider, select CodeBuild, then under configure your project, select Create a New Build Project under AWS CodeBuild.

Creating a new Build Project:

Enter an appropriate name of the New Project. No spaces.
Under Environment Image, select ubuntu.
Then under Operating System, Select Ubuntu 14
Then under Runtime, Select Base (Not NodeJS) and then Select the Appropriate Version (As at the time of writing, this was Ubuntu 14) below that.
Under Build Specification, we are going to be using yaml file at the root of our project that will provide all commands to build our Angular Project. I will provide a sample for angular later in the post. You can learn more about Build Spec File here.
You can leave the rest as they are.
Save the Build Project.

Once the Build Project has been created successfully, let’s go ahead and get the Service Role name. We are going to need this to configure AWS CodeBuild permission to put the built project on AWS S3.

Click on the View Project Details This will open in a new window.
Click on Edit Project, then scroll down to Service Role and take note of the Service Role Name.
Then, head over to AWS IAM (Identity and Access Management) on the console.
On the left panel, select
Then search and open the role of the CodeBuild Project you took note of above.
Copy the Role ARN, we will need this when configuring access to the bucket.

Step 4 Deploy

We already took care of deployment under the last step, so select No Deployment option. This is because CodePipeline doesn’t have the option to deploy to an S3 bucket. We will automatically deploy to an S3 bucket after building the project using aws-cli – it is installed automatically in the build server.

Step 5 Service Role

Create a new Aws Service Role for CodePipeline and click on next.

Step 6 Review

Review the details of the Pipeline and click on create at the bottom.

Configuring Your Project

To build your project, we need to add the commands to install all npm packages (Dependencies). Then it will run ng build and copy all the files inside /dist directory (or wherever the location of your build artefacts are placed) to the s3 bucket. To do this add a new file to the root of the project known as buildspec.yaml. Then add the following content: (Read the moment for what each line of command does)

version: 0.2
env:
    variables:
        S3_BUCKET: "<S3_BUCKET_HERE>"
APP_NAME: "<APP_NAME_HERE>"
BUILD_ENV : "prod"
phases:
    install:
        commands:
# Download and Install NodeJS 8.0
        - curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
        - sudo apt-get install -y nodejs
        - echo Installing source NPM dependencies...
        # Install http drivers for node
        - sudo apt-get update -y
        - sudo apt-get install -y apt-transport-https
        # Install Yarn Package Manager (Replace the commands below if you using NPM).
        - curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
        - echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
        - sudo apt-get update -y
        - sudo apt-get install -y yarn
        # Install Angular CLI, If you are not using Angular 6, install angular/cli@1.7.0 or lower, confirm by running ng -v inside your project folder
        - yarn global add @angular/cli@6.0.8
        # Install node dependancies.
        - yarn install
build:
        commands:
        # Builds Angular application. You can also build using custom environment here like mock or staging
        - echo Build started on `date`
        - ng build --${BUILD_ENV}
post_build:
        commands:
        # Clear S3 bucket.
        - aws s3 rm s3://${S3_BUCKET} --recursive
        - echo S3 bucket is cleared.
        # Copy dist folder to S3 bucket, As of Angular 6, builds are stored inside an app folder in distribution and not at the root of the dist folder
        - aws s3 cp dist s3://${S3_BUCKET}/${APP_NAME} --recursive
        - echo Build completed on `date`
artifacts:
    files:
        - '/'
    discard-paths: yes
    base-directory: 'dist*'

As you can see, am using Yarn Package Manager for my project, but you can replace the Yarn commands with NPM commands. And finally, we need to allow our CodeBuild permission to write and delete in to our S3 Bucket, otherwise this won’t work.

Revisiting AWS S3 Bucket Permission

Head over to AWS S3 Bucket management interface and open your bucket. Then under Permissions, you open Bucket Policy. We need to modify the policy to include the role you copied when you create the CodeBuild Project up there. Under statement, add a new object (JSON Object) and Add the following content:

{
"Sid": "CodeBuildPermision",
"Effect": "Allow",
"Principal": {
"AWS": "< ROLE ARN HERE>"
},
"Action": "s3:*",
"Resource": "arn:aws:s3:::your-bucket-name "
}

Replace your-bucket-name with your own bucket name and ROLE ARN from Step 3 Above. Finally, you need to be able to access your web app over the internet, to do this configure your S3 Bucket for Web Hosting and add a domain name if need be. This guide here will help you configure your bucket for web hosting.

How to Build Adaptive Layout Design using Angular Flex Layout

Maina Wycliffe — Sat, 21 Apr 2018 21:21:33 +0000

Angular Flex Layout is a powerful layout tool available for Angular. It provides an API than can be easily used in both component templates and class allowing you to adaptively react to the device screen size. If you are new to Angular Flex Layout and Adaptive Layout design, please check out my earlier post here.

Introduction

In today’s example, I will create a simple example that will display a form in either modal window or new page based on screen size. In small screen sizes – smartphones & phablets – it will show the form in a new page while in large devices it will display a simple modal window with the form. The form component will be the same in both instances, ensuring consistency and making it easy to update.

Why?

The reason for this is quite simple: A modal window provides a much better user experience when screen real estate is not an issue while in smaller devices it just makes things worse. With adaptive layout design you get to achieve both without compromising a lot, just some extra code to check the screen size.

Getting Started

In this example, we will be using both Angular Flex Layout and Angular Material. This post assumes you know the basics of Angular and Angular Material. You can install both using either NPM or Yarn Package Manager as shown below.

NPM:

npm install @angular/flex @angular/material @angular/cdk

Or Yarn:

yarn add @angular/flex @angular/material @angular/cdk

Go ahead and import Angular Flex Layout to your project.

import { FlexLayoutModule } from '@angular/flex-layout';

In the case of Angular Material, we are only going to require two modules – MatDialog and MatSnackbar Modules. Import them to your project too.

import { MatSnackBarModule, MatDialogModule } from '@angular/material';

And then Add them to the list of imports

@NgModule({
  imports: [
BrowserModule,
FlexLayoutModule,
MatSnackBarModule,
MatDialogModule,
MatButtonModule
RouterModule
  ],
  bootstrap: [AppComponent]
})

How it works

We are going to have 4 components in our project.

App Component (app.component.ts)
Main Component
Form Component
Page Wrapper Component
Dialog Wrapper Component

The two-wrapper component are there to make thing simple: providing a container for the form component while also injecting any data the Form Component may require. This is necessary since a dialog uses data attribute to pass data to dialog component while pages use URL query parameters. Checking whether it was loaded as a page or modal dialog at the form component just complicates everything. So, in our case, when loading a dialog - we load the Dialog Wrapper Component which in turn loads the form component as a child. And when loading the page – We load the Page Wrapper Component which in turn loads the form component as a child.

Code Highlights

I won’t go over all details in the code, I will share the Github repo, but let me highlight the key parts that you should take note:

Main Component

This is where the open button is located. Make sure to inject ObservableMedia, MatDialog and Router in to the component under constructor. ObservableMedia is from Angular Flex Layout and will allow you to query the screen size in real time as shown below:

open(message?: string): void {
    //query screen size
    if (this.media.isActive("lt-md")) {
      //redirect
      this.router.navigate(["/open-form"]);
    } else {
      //show dialog
      const d = this.matDialog.open(ModalWrapperComponent, {
        hasBackdrop: true,
        data: {
          message: message
        }
      });
d.afterClosed().subscribe(results => {
        //do something like show a message box
        this.router.navigate(["/open", message]);
      });
    }
  }

NB: I Am loading the ModalWrapperComponent instead of the FormComponent in the dialog. First, I check to see whether the screen size is less than medium (lt-md) and navigate to page housing the FormComponent.

In all other cases I load a modal dialog of the FormCompponent instead. Please refer to the image below for different breaking points for Angular Flex Layout.

The message for modal dialog is passed under data inside config options while its passed a router parameter when navigating to another page.

Form Component

The form component for now will just show the message passed to it and will not have anything special to it. To do this it needs an input and an output for the form. The input allows the parent component (wrapper components in our case) to pass the message to the form. The output on the other hand allows the child component (Form component in our case) to pass events and data back to our parent component. This is done to keep things as simple as possible.

@Input() public message: string;
@Output() public output: EventEmitter<boolean> = new EventEmitter<boolean>();

Since our variables are public, you can use them directly on the template as shown below:

<div fxFlex="100" fxLayout="column">
<p fxFlex="100" fxLayout="row wrap">{{ **message | titlecase** }}</p>
<div fxFlex="100" fxFlex="row">
<button (click)="**output.emit(true)**">Close</button>
</div>
</div>

This wrapper component will be loaded when loading the form in modal window. The component will process the modal request and then load the form component with the necessary data and react to events such as close in the form component.

First, inject MatDialogRef and MAT_DIALOG_DATA into the component and then set global message variable using the message supplied from the component data.

public message: string;
constructor(
private dialogRef: MatDialogRef<ModalWrapperComponent>,
@Inject(MAT_DIALOG_DATA) public data: any)
{
this.message = data.message;
}
close(results): void {
this.dialogRef.close(results);
}
ngOnInit() {}

And finally add the form component into your template and inject the message and output as shown below:

<div fxFlex="500px" fxLayout="column">
<app-form [message]="message" (output)="close($event)"> </app-form>
</div>

Page Wrapper Component

This will resemble the Modal Wrapper Component closely with a few key differences. First, instead of injecting MAT_DIALOG_DATA and MatDialogRef, it will take in router and activatedRoute. This is because in this case, data is passed via route parameters. Here is how it looks:

public message: string;
constructor(private router: Router, activatedRoute: ActivatedRoute) {
this.message = activatedRoute.snapshot.params["message"];
}
close(results): void {
this.router.navigate(["/"]);
}

The template doesn’t change at all:

<div fxFlex="500px" fxFlex.xs="100" fxLayout="column">
<app-form [message]="message" (output)="close($event)"> </app-form>
</div>

You can find the full example here on GitHub.

Final Thoughts This is a simple example of how you can apply adaptive layout

design in Angular with Flex Layout. And since Angular Flex Layout is independent from Angular Material, you can use this with a host of other UI Libraries. You can now expand on this and build amazing UX for your users by mixing both Responsive and Adaptive layout design. If you have any questions regarding this topic or any angular related topic, you can use the comment section below.

How to Implement Sign-in with Google in Angular and a REST API

Maina Wycliffe — Sun, 04 Mar 2018 22:48:29 +0000

A few weeks ago, I demonstrated how to implement Sign in with Facebook with a REST API. Today, I will show you how to Sign-in with Google in Angular 5 with a REST API involved. We will use PHP at the backend, but this will work with any backend language you are totally comfortable with. To put it simply, your Angular App will request a token from Google OAuth Servers and then send the token to the REST API.

The REST API will then validate the token against Google Servers (Never Trust Anything from the User) and if genuine, Sign-in or create account or do something that needed user to be authenticated. You will also get user profile data from Google including the profile picture which you can store for future reference. Let’s get started:

Create a Google App and Get API Credentials

The first thing we need is to create Google Project, so that we can get Access Credentials. To do this, you can head over to Google Developer Console and create an account or login with an existing account.

First, click on create project button near the top left corner and enter the name for your project and click save. Wait until the project has been created. Then, select the project you just created and go to the credentials of API and Services for the project by clicking on the menu icon on the top left corner, then select API and Services, and then Credentials.

If it’s a new project, you won’t have any credentials on your screen. There are a few things you need to do here. The first thing is to configure your OAuth Consent Screen. This is the screen users will see with your app name and logo as you ask for permission during the Sign in with Google Process. To configure the OAuth Consent Screen, click on the OAuth Consent Screen Tab (Refer to the image below) and fill in the requested details. The name of the App is mandatory.

Next, you need to create OAuth Credentials for your project. You should see a Create Credentials button on the screen, either at the middle of the screen or on top of the Credentials tab, just beneath the toolbar of the window. Click on the Create Credential Button, and select OAuth Client Id option in the drop-down menu that follows. In the next page, select Web Application from the options under Application Type.

And then provide the name of the credentials and click Create button. You might want to restrict the authorized domain names in the restriction section before creating the credentials. Here you will get the Client Id and the Client Secret, store them securely as you will need them for the steps that will follow.

Assuming you have successfully created a project, let’s go on and add a Sign-in with Google button to your angular app. To achieve this, we will use angularx-social-login module. You can install it using NPM or Yarn:

npm install --save angular5-social-login
// Or use yarn
yarn add angularx-social-login

Then import the Angular Social Login module into your app module as show below:

import {
SocialLoginModule,
AuthServiceConfig,
GoogleLoginProvider
} from 'angularx-social-login';

Then create a new file socialloginConfig.ts in the root of your project and add a config file for social login:

import {
SocialLoginModule,
AuthServiceConfig,
GoogleLoginProvider
} from 'angularx-social-login';
export function getAuthServiceConfigs() {
let config = new AuthServiceConfig([
{
id: GoogleLoginProvider.PROVIDER_ID,
provider: new GoogleLoginProvider()<GoogleClientIdJHere>
}
]);
return config;
}

NB: Replace the GoogleClientIdHere with your client id from the Google Project you created in the first step. Then import getAuthServiceConfigs into your app modules:

import { getAuthServiceConfigs } from './socialloginConfig ';

And finally import SocialLoginModule and add providers for SocialLoginModule as show below

@NgModule({
  imports: [
// ...
 SocialLoginModule
],
providers: [
// ...
 SocialLoginModule.initialize(getAuthServiceConfigs)
],
bootstrap: [
//...
 ]
})

Then, on your sign in component, import the AuthService, GoogleLoginProvider as shown below:

import { AuthService, GoogleLoginProvider } from 'angular5-social-login';

And Inject AuthService into your component as shown below:

constructor( private socialAuthService: AuthService ) {}

Then, add a method to handle Sign-in with Google and a button to your component. The method will look like this:

public signinWithGoogle () {
let socialPlatformProvider = GoogleLoginProvider.PROVIDER_ID;
this.socialAuthService.signIn(socialPlatformProvider)
.then((userData) => {
//on success
 //this will return user data from google. What you need is a user token which you will send it to the server
 this.sendToRestApiMethod(userData.idToken);
});
}

And then add a Sign in with Google button as shown below:

<button (click)="signinWithGoogle()">Sign in with Google</button>

The sendToRestApiMethod is a method that will use HTTP to post the data to your REST API. The Token Id (idToken)received from Google should be either a parameter or form data depending on the HTTP method you use to send the data to the server.

Here is an example:

sendToRestApiMethod(token: string) : void {
this.http.post("url to google login in your rest api",
{
token: token
}
}).subscribe(
onSuccess => {
//login was successful
 //save the token that you got from your REST API in your preferred location i.e. as a Cookie or LocalStorage as you do with normal login
 }, onFail => {
//login was unsuccessful
 //show an error message
 }
);
}

Integrating with your REST API

My REST API will be using PHP, but you can use any language you are comfortable with. For further and detailed tutorials for other language am not covering, visit the official documentation from Google here. First, install PHP Google SDK using composer as shown below (For detailed installation instruction, visit this link):

composer require google/apiclient

Once the installation is complete, go to your login script or method and call the Google OAuth endpoint to verify the Token Id (idToken) and create an account or grant user access to server-side resources or something. First, initialize the Google SDK as shown below:

$client = new Google_Client([
'client_id' => '<GOOGLE CLIENT ID HERE>'
]);

And then send the Token Id (idToken) to the server for verification as shown below:

$payload = $client->verifyIdToken($idToken);

Then, compare the claim aud value with your google client id to ensure that the idToken you got from your app was meant for your client and its valid. If they don’t match, then the token id is not valid. The payload contains personal data from the user, here is what is included in the payload:

{
// These six fields are included in all Google ID Tokens.
"iss": "https://accounts.google.com",
"sub": "110169484474386276334", //Unique Google Account Id
"azp": "1008719970978-hb24n2dstb40o45d4feuo2ukqmcc6381.apps.googleusercontent.com",
"aud": "1008719970978-hb24n2dstb40o45d4feuo2ukqmcc6381.apps.googleusercontent.com",
"iat": "1433978353",
"exp": "1433981953",
// These seven fields are only included when the user has granted the "profile" and
// "email" OAuth scopes to the application.
"email": "testuser@gmail.com",
"email_verified": "true",
"name": "Test User",
"picture": "https://lh4.googleusercontent.com/-kYgzyAWpZzJ/ABCDEFGHI/AAAJKLMNOP/tIXL9Ir44LE/s99-c/photo.jpg",
"given_name": "Test",
"family_name": "User",
"locale": "en"
}

Next, create an account or sign in the user if they already exist. The sub key in the payload is the Account Id and you can use to check if the user already exists. I suggest you generate your own User Id and do not rely with Google unique user id.

Implementing Login with Facebook with Angular and REST API

Maina Wycliffe — Tue, 06 Feb 2018 12:32:52 +0000

Today, I am going to show you how to create an Angular App with a REST API that uses Facebook Login to sign in/up users. For this application, we are going to be using PHP in our backend, but this can work with any Framework or Language for the backend.

First Thing First

The login flow of the app will work something like this: when a user clicks on Login with Facebook, the user is redirected to Facebook to give your app permission. In return, your app will receive an Access Token and some other personal information from Facebook.

But the Golden rule here is never trust anything that comes from the user. So, your app will only send the token received from Facebook to the REST API. Which in turn will verify with Facebook whether it is genuine and request personal information from Facebook.

Once the REST API has verified the details as genuine, go ahead and check whether the user exists in the database. if the user exists, go ahead and log the user in. If the user is not signed up, go ahead and sign the user up and log the user in. You can also send a welcome/confirmation email at this point.

Create a Facebook Application

For this to work, you need a Facebook application. Head over to Facebook Developers portal and create an app as demonstrated by the YouTube video below:

Assuming you have successfully setup your Facebook App successfully, you should have an App Id and App Secret. For the angular application, we are going to only need the App Id, the app secret will be used by the REST API. For social login, we are going to be using angularx-social-login npm module. You can install it using the command below

npm install --save angular5-social-login 
// Or with yarn
yarn add angular5-social-login

After you have successfully installed the module, Import it in the app.modules.ts in your project.

import { SocialLoginModule, AuthServiceConfig } from 'angular5-social-login';
import { FacebookLoginProvider } from 'angular5-social-login';

Then create a new file socialloginConfig.ts in the root of your project and add a config file for social login:

import {
AuthServiceConfig,
FacebookLoginProvider
} from 'angular5-social-login';
export function getAuthServiceConfigs() {
let config = new AuthServiceConfig([
{
id: FacebookLoginProvider.PROVIDER_ID,
provider: new FacebookLoginProvider('{FACEBOOK_APP_ID_HERE}')
}
]);
return config;
}

Then import the config file into your app modules:

import { getAuthServiceConfigs } from './socialloginConfig ';

And finally import SocialLoginModule and declare providers for SocialLoginModule as show below

@NgModule({
imports: [
/* ... */
SocialLoginModule
],
providers: [
/* ... */
{
provide: AuthServiceConfig,useFactory: getAuthServiceConfigs
}
],
bootstrap: [ /* ... */]
});

Then, on your sign in component (or wherever you wish to add this button), import the AuthService, FacebookLoginProvider as shown below:

import {
AuthService,
FacebookLoginProvider,
GoogleLoginProvider
} from 'angular5-social-login';

And Inject AuthService into your component as shown below:

constructor( private socialAuthService: AuthService ) {}

Note: If you are like me, you may already have another AuthService Service, you can import the new AuthService as an ALIAS as shown below:

import {
AuthService as SocialAuthService,
FacebookLoginProvider,
GoogleLoginProvider
} from 'angular5-social-login';

And then Inject SocialAuthService into your component as shown below:

constructor( private socialAuthService: **SocialAuthService **) {}

Now, it’s a simple matter off adding a Facebook login method and a button. The method should look like this:

public facebookLogin() {
    let socialPlatformProvider = FacebookLoginProvider.PROVIDER_ID;
    this.socialAuthService.signIn(socialPlatformProvider).then(
      (userData) => {
        //this will return user data from facebook. What you need is a user token which you will send it to the server
            this.sendToRestApiMethod(userData.token);
       }
    );
}

On success – the user has granted your app permission – then send the token from user data received to the REST API. There is no need to send other personal information such as email and name as the REST API will get that information for itself. Your sendToRestApiMethod() should look like this.

sendToRestApiMethod(token: string) : void {
    this.http.post(“url to facebook login here”, { token: token } }
        .subscribe(onSuccess => {
                       //login was successful
                       //save the token that you got from your REST API in your preferred location i.e. as a Cookie or LocalStorage as you do with normal login
               }, onFail => {
                       //login was unsuccessful
                       //show an error message
               }
        );
}

(You should put it inside an Authentication Service together with other related authentication services)

And finally add the Login with Facebook button:

<button (click)="facebookLogin()">Login with Facebook</button>

Integrating with a REST API

And Finally, to the REST API. I will demonstrate this using PHP, but you can use any language you wish, you can get detailed support for your specific language here. (Scroll to the section for Facebook Login and User Profiles).

Since you already have a App Secret and App ID and Access Token (Sent from the Angular App), this one is rather straight forward. In your PHP Method/Script for handling Facebook login, add the following code:

First, Initialize connection to Facebook API using the PHP SDK

$fb = new FacebookFacebook([
    'app_id' => "APP ID HERE",
    'app_secret' => "APP SECRET HERE"
    'default_graph_version' => 'v2.12',
]);

Replace the APP ID HERE and APP SECRET HERE with your specific details from your Facebook app.

And then, Send the access token received from the client app and request user id, name and email address of the user from Facebook. This will return those details if the access token is genuine and will fail if it isn’t.

try {
      $fbresponse = $fb->get('/me?fields=id,name,email', "Access Token Here");
} catch (FacebookExceptionsFacebookResponseException $e) {
//Handle this error, return a failed request to the app with either 401 or 500
} catch (FacebookExceptionsFacebookSDKException $e) {
//Handle this error, return a 500 error – something is wrong with your code
}

And finally, do something with the data you received from Facebook. You can check if the user exists in your user database by both email and Facebook user Id, if they exist, sign them in and if they don’t exist sign them up. You can also check if the email address is associated with another user and if so, just associate the Facebook account to the account with the email address. This is all up to you, you can handle it any way you want. You can get the Facebook User Id, Names and Email as shown below:

$me = $fbresponse->getGraphUser();
$userId = $me->getId();
$email = $me->getEmail();  
$name = $user->name()

Search Engine Optimization with Angular

Maina Wycliffe — Tue, 30 Jan 2018 17:53:26 +0000

Today, I will show you how to optimize your Angular 5 and above for search engine and other crawlers. It is important to note that, pages behind a sign in page don’t need to be optimized and you should only concentrate on publicly accessible pages. We are going to take a few steps to prepare our app for search engine optimization like adding page title and meta tags to your pages.

Adding Meta Tags and Page Title

The important part of Search Engine Optimization is to add a page title and some Metatags i.e. description, keywords, twitter cards and Facebook Graph tags if you wish. You need to add this to the different pages of your Angular app dynamically. To achieve this, you will embed them on to your routes inside your router. Add a new route property called data and then add some objects like page title and metatags to it as shown below.

[
// ... other routes
 {
component: AngularComponent,
path: '',
data: {
title: 'Page Title',
metatags: {
description: 'Page Description or some content here',
keywords: 'some, keywords, here, separated, by, a comma'
}
}
}
// ... other routes
];

Note: I have grouped all my metatags under one key, instead of spreading them at the root of data property. This will allow me to add them to the pages meta using a for-loop instead of adding each manually. This allows me to have varying number of metatags in different pages and the loop will add all of them.

SEO Service

Create a new service using Angular CLI called SEOServices as shown below ng g service SEO Open the service and import the Title and Meta service from @angular/platform-browser and Router and NavigationEnd from @angular/router modules.

import { Title, Meta } from '@angular/platform-browser';
import { Router, NavigationEnd } from '@angular/router';

Next, initialize the services inside the constructor:

public constructor(
    private titleService: Title,
    private metaService: Meta,
    private router: Router,
) {}

Next, create a method to add metatags and the page title to the page as show below:

public addSeoData() : void {
  this.router.events.filter((event: any) => event instanceof NavigationEnd).subscribe(() => {
      var root = this.router.routerState.snapshot.root;
      while (root) {
        if (root.children && root.children.length) {
          root = root.children[0];
        } else if (root.data && root.data["title"]) {
          this.titleService.setTitle(root.data["title"] + " | App Name");
          let tags = root.data["metatags"];
          for (let tag in tags) {
            this.metaService.addTag({ name: tag, content: tags[tag] });
          }
          return;
        } else {
         return;
        }
      }
    });
}

The above function loops through your hierarchy of roots until it finds the lowest root with a page title and meta tags, then adds the particulars to the page header. So, you can have a page title and meta tags to a parent root that all its children will inherit. Finally, call the service from the root component of your application (somewhere else is fine too).

public constructor (private seoService: SEOService)
{
      seoService. addSeoData()
}

Note: Remember to follow all the search engine optimization best practices for both metatags and the content. This just gives a way of achieving that but it’s not a comprehensive guide for Search Engine Optimization.

Prerendering of Content

We have now taken care of Metadata and Page Titles, now let’s take care of the big issue. Single page applications are rendered on the browser but Angular Introduced Angular Server-Side Rendering or Angular Universal to render them on the server just like PHP or any server-side scripts. At the moment, only 2 backends support Angular Universal – NodeJS and ASP.NET. Support for PHP, Java and Python will come at a latter unspecified date.

Instead of using Angular Universal, we are going to use a prerender.io service that supports almost all backends out there. This will prerender and cache your live Angular Application and serve it to bots and crawlers. This allows you app to play nice with your users and at the same time with Search Engines.

On top of that, if your app is small – less than 250 pages – you get to pay nothing and even if your app is large, their prices are quite reasonable. To get started, head over to their site and create an account, use this link to signup.

Make sure you confirm your email address and add some billing info just incase you go over their free limit. Then add your site, by clicking add url button and wait for their service to crawl and generate prerendered version of your site.

You can view the prerendered version of your app by clicking view raw html button next to your site, in the preview column. The only thing that’s remaining is integrating it with your server or backend so that it serves the prerendered version to bots and crawlers.

If you head over here, you will notice it is has support for a very huge number of backends and servers. Scroll through the list and find the backend you are using to get instruction on how to integrate it with Prerender.

Apache Server

I will show you how to add it to your apache server. Assuming you already are using Apache serve to server your Angular app, then you must have a .htaccess file to redirect all paths to index.html to avoid an error 404. Your htaccess resembles something like this:

RewriteEngine on
RewriteRule ^ index.html [QSA,L]

Add the following to your .htaccess access file:

#RequestHeader set X-Prerender-Token "YOUR_TOKEN"
<IfModule mod_proxy_http.c>
        RewriteCond %{HTTP_USER_AGENT} baiduspider|facebookexternalhit|twitterbot|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator [NC,OR]
        RewriteCond %{QUERY_STRING} _escaped_fragment_   
       # Only proxy the request to Prerender if it's a request for HTML
        RewriteRule ^(?!._?(.js|.css|.xml|.less|.png|.jpg|.jpeg|.gif|.pdf|.doc|.txt|.ico|.rss|.zip|.mp3|.rar|.exe|.wmv|.doc|.avi|.ppt|.mpg|.mpeg|.tif|.wav|.mov|.psd|.ai|.xls|.mp4|.m4a|.swf|.dat|.dmg|.iso|.flv|.m4v|.torrent|.ttf|.woff))(._) http://service.prerender.io/http://example.com/$2 [P,L]
</IfModule>

Note: You can get the token from your account page next to the header. You can get the full .htaccess file here. And voila, you have an angular application that has been optimized for search engines and bots without doing too much work.

Deploying a PHP 7 App with MongoDB to AWS Elastic Beanstalk

Maina Wycliffe — Mon, 15 Jan 2018 11:29:07 +0000

Introduction

Over the weekend, I was working on a PHP REST API that is using Mongo DB as it’s database. I haven’t worked with MongoDB before, I have always used MySQL/MariaDB/PostgreSQL DB etc. for almost all my projects. The reason am bringing the MongoDB is because you need PHP MongoDB Module to connect to the database. By default, AWS Elastic Beanstalk PHP preconfigured environment doesn’t ship with the module, hence the need to install it during deployment.

If you are not aware, Elastic Beanstalk applications needs to be stateless. Your application needs to be able to setup everything automatically on its own using EB Extensions. EB Extensions are used to modify a deployment environment so that you can install missing packages, setup configurations and do other stuff that will help your application run smoothly. All this is done automatically without your input as per the EB extensions.

You can learn more about EB Extensions here.

Installing PEAR and PHP PEAR Extensions

In my case, I needed to install the PHP MongoDB Module and Setup Composer. The second bit is straight forward but the first one is where I ran into a lot of difficulties. Almost every resource I found over the internet was working for any one not using PHP 7 and above. This is because commands used for PHP 5 for PEAR (Installing PEAR itself and Installing PEAR Packages) have changed for some reason in Amazon Linux. You need to add a 7 at the end now. For instance, to instal PEAR use the following command:

sudo yum -y install php7-pear php70-devel gcc

And to install a PEAR Package you need the following command:

sudo pecl7 install mongodb

(Notice the highlighted parts.) You could connect to your EC2 instance and install packages manually, but It’s not recommended. This is where EB Extensions come into play. In the root of your project, create a new folder called .ebextensions and add two files: packages.config and php.config. The first one will install all the packages (From yum and other Linux package managers) while the second one will install all PHP PEAR packages. In the first file – packages.config – you need to add the following content.

packages:
yum:
        php7-pear: []
        php71-devel: []
        gcc: []

This tells Elastic Beanstalk to install PHP7-pear, PHP70-devel and GCC compiler. Feel free to add extra packages as you need them. You can learn more about Packages config here. In the second file – php.config – add the following content:

commands:
  install_mongo_driver:
    command: pecl7 install mongodb
    test: "php -r "exit(extension_loaded('mongodb') ? 1 : 0);

This will first test whether PHP mongodb module exists and if it doesn’t it will install mongodb extension using PEAR. You can learn more about commands configs here.

Final Thoughts

While this post has primarily focused on MongoDB Module for PHP, it will work with any other PHP Module available on PEAR. You can search for PEAR packages here. Just remember to use pecl7 instead of just pecl during the installation process. In case of further updates, I will be sure to update this post with new information.

Adaptive Layout Design - Angular Flex Layout

Maina Wycliffe — Sun, 07 Jan 2018 20:53:59 +0000

Introduction

You probably have heard about Responsive Layout design but let me remind you anyway. Responsive layout is where components and elements of a web page change size and position based on different breaking points – Web apps that adapt to any screen size.

Unlike responsive layout, in Adaptive Layouts different components and elements are displayed or hidden on different screen sizes. While responsive design is amazing at what it does, it also has it limits especially trying to fit the same components in a large screen size and an extra small screen size. Sometimes you just want to have different components and elements for different screen sizes.

How it works

Angular Flex Layout provides you with the tools for Adaptive Layout design – fxHide, fxShow and ngIf. As you may have already guessed both fxHide and fsShow directives are used for hiding elements while ngIf adds or removes components by using DOM (Direct Object Manipulation).

DOM manipulation may be useful at some instance by reducing the footprint of your Angular application on the browser thus reducing the resources used by your app. You can use a combination of the directives with the different breakpoint to hide and show elements on your angular application. Angular Flex Layout has four breakpoint aliases – xs, sm, md and lg. To show a component only on XS devices, you do the following:

<app-component-name fxShow="false" fxShow.xs="true"></app-component-name>

Note the fxShow Directive with the dot notation followed by the preferred breakpoint alias. The first fxShow="hide" is used to hide the component on all screen sizes so that you can show it on a specific screen using the second fxShow.xs="true". To show a component on all screens sizes above small, you can use the gt-sm (greater than small) alias as shown below:

<app-component-name fxShow="false" fxShow.gt-sm="true"></app-component-name>

This will show the components on all screen sizes starting md (medium screen size) and above. You can get a list of all breakpoints below.

Unfortunately, you can not do that with *ngIf, am not sure whether support will be coming – it’s not clear on their site. it would be amazing if you could use it as follows:

<app-component-name *ngIf.gt-sm="true"></app-component-name>

Fortunately, there’s a workaround for this, while not as nice as the one above, it requires you to add some code to your typescript file of your component. As shown below:

Component

//import obersavable media
import { ObservableMedia } from '@angular/flex-layout';
@Component({
selector: 'app-component',
template: 'app-component.html'
})
export class AppComponent {
//declare a public variable of observable media
 constructor(public media: ObservableMedia) {}
}

Now you can use *ngIf in your component template as shown below

Template

<div *ngIf="media.isActive('xs')">
This content is only shown on extra small devices
</div>
<div *ngIf="media.isActive('sm')">
This content is only shown on small devices
</div>
<div *ngIf="media.isActive('md') || media.isActive('lg')">
This content is only shown on medium devices and large devices
</div>

Conclusion

Adaptive Layout design is a very important tool in a developer’s arsenal. If used wisely in combination with responsive layout design, it can produce some magical results. If used poorly, it can lead to a bloated Angular app with poor performance. This is due to increased number of component that do essentially the same thing. If you have any question regarding this topic or any other feel free to drop a comment below.

Visual Studio Code - Top 5 Extensions for PHP

Maina Wycliffe — Sun, 17 Dec 2017 21:57:01 +0000

Visual Studio Code is one of the best free text editors out there. Right out of the box, Visual Studio Code offers basic PHP support but nothing more than that. To enjoy a fruitful PHP development, you need to install PHP extensions. Today, I am going to highlight 5 extensions you might want to consider. If you would like to try out Visual Studio Code, you can download it here.

PHPCS (PHP CodeSniffer) – Ioannis Kappas

This extension offers an interface for PHP CodeSniffer. PHP CodeSniffer scans the PHP files in your workspace to detect and offer suggestions and fixes for violations of a defined set of PHP standards. It’s an excellent extension that will ensure you strictly follow standard for PHP.

You can learn more about PHP standard here. For you to use this extension, you need to install PHP CodeSniffer globally into your development machine. You can install PHP CodeSniffer using either PEAR or Composer as shown below.

// PEAR
pear install PHP_CodeSniffer
// Composer:
composer require --dev squizlabs/php_codesniffer

To install PHPCS, press F1 on Visual Studio and type the following command:

ext install phpcs

You can learn more about this extension here.

PHP Intellisense Crane – Hvy Industries

To use the creator’s words, PHP Intellisense Crane is a productivity enhancement extension for Visual Studio Code that provides code-completion for PHP. It has zero dependencies and largely works with projects of any size. The extension is active in development and you can raise issues and make feature suggestion on GitHub. This extension offers the following features: Code Completion, Go To and Peek Definition on classes, interfaces and traits and document workspace symbol provides. To install PHP Intellisense Crane, press F1 on Visual Studio Code, and type the command below.

ext install crane

Once installation is complete, wait for it to parse all PHP files in your workspace. You will see a progress bar at the status bar.

You can learn more about PHP Intellisense Crane here.

PHP Intelephense – Ben Mewburn

This is one of the best PHP Extension I have ever used. It provides a tonne of useful features without affecting negatively the performance of Visual Studio Code. It also has no external dependencies. It has the following features:

Fast camel/underscore case code completion (IntelliSense), offering detailed suggestions for document, workspace and built-in symbols and keywords.
Detailed signature (parameter) help for document, workspace and built-in constructors, methods, and functions.
Rapid workspace wide go to definition support.
Workspace wide find all references.
Fast camel/underscore case workspace symbol search.
Full document symbol search.
Multiple parse error diagnostics for open files via an error tolerant parser.
Lossless PSR-2 compatible document and range formatting.
Convenient command to add use declarations and condense referenced names.
HTML request forwarding allowing for a full HTML/Javascript/CSS/PHP development experience.

To install this extension, press F1 and type in the command below:

ext install bmewburn.vscode-intelephense-client

You can learn more about this extension here.

PHP Intellisense – Felix Becker

Just like the name suggests, it offers Intellisense autocompletion for PHP. This extension depends on PHP Language Server to work. The extension just provides an interface to the PHP Language Server. To use this extension, first install the PHP Language Server using composer as show below:

composer require felixfbecker/language-server

If you have multiple projects, you can install PHP Language Server globally as follows:

composer global require felixfbecker/language-server

You also need to have PHP7 installed in your system. Then go ahead and install the extension on Visual Studio Code. Press F1 and type in the following command:

ext install php-intellisense

You can learn more about the extension here.

PHP Debug – Felix Becker

This extension is an adapter for XDebug extension for PHP. XDebug is an extension for PHP that assists with debugging and development of PHP projects. To use this application, you need to install XDebug and PHP into your system.

You can follow the instruction found in the extension page here. To install this extension, press F1 and type in the command below.

ext install php-debug.

Angular Material Icons Components with Angular 5

Maina Wycliffe — Wed, 13 Dec 2017 11:43:03 +0000

Icons are a necessity when building modern-day web apps and sometimes they can be frustrating. While icon sets like Font Awesome and Material Icons have made it easier, there is always an icon you need that is always missing. A good example is lack of social media icons in Material Icons for whatever reason.

To avoid this problem, you can use multiple icon sets or mix between an icon set and your own set of image icons. This introduces the issue of lack of consistency on your icons. To solve this problem, Angular material uses Angular material Icon Component. Let’s look at how to use mat-icons with different icon sets.

How to Setup the Mat-Icon Component

To use this component, import the MatIconModule from @angular/material in your app module as follows:

import { MatIconModule } from '@angular/material';
@NgModule({
declarations: [AppComponent],
imports: [
// ...
 MatIconModule //...
 ],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}

Using Material Icons (Font)

This one is relatively easy. I would recommend one of two approaches. Approach 1, include the Google Material Font link from Google Font CDN in the header of your index.html in your application. Then after that, the Angular Material component – mat-icon – will recognize all material font icons by default. You can go ahead and use the icons as shown below. First, include the following in your index html header

<link
href=[https://fonts.googleapis.com/icon?family=Material+Icons](https://fonts.googleapis.com/icon?family=Material+Icons)
rel="stylesheet">

Then, you can simply use material icons as shown below:

<mat-icon>icon_name</mat-icon>

i.e. <mat-icon>home</mat-icon> for home icon

The second approach is to self-host the font icons on your own servers. You can install the icons using either npm and yarn as follows:

npm install material-design-icons@latest
//for yarn
yarn add material-design-icons@latest

Assuming you have successfully installed the material-design-icons@^3.0.1 package, then, go ahead and import the CSS stylesheet located here: ../node_modules/material-design-icons/iconfont/material-icons.css into your angular project inside your angular-cli.json, under the styles, as follows:

"styles": [
      // ...
      "../node_modules/material-design-icons/iconfont/material-icons.css", //icon.css
      "scss/styles.scss",
      // ...
    ],

Assuming you have successfully imported the stylesheet into your project, you can go ahead and start using the material icons. You can also use CSS font-size property to vary the size of the icons, as follows:

.material-icons.md-14 {
 font-size: 14px;
}
.material-icons.md-18 {
 font-size: 18px;
}
.material-icons.md-24 {
 font-size: 24px;
}
.material-icons.md-36 {
 font-size: 36px;
}
.material-icons.md-48 {
 font-size: 48px;
}

And then just include the md-* in your mat-icon to vary the size of the icons. The icons may be vertically aligned on top, this keeps them out of line with the content. To solve this problem, align them in the middle vertically as follows:

.material-icons {
     vertical-align: middle;
}

Using SVG Icons

If you have a set of SVG Icons for your angular application, you can register them with the Angular Material Icon module. This allows you to reference them anywhere in your application with ease and apply styles to your icons just like normal font icons. I use this method to include icons that are missing from the icon set am using. To register your SVG icons, follow the steps below: Identify the first component of your application (in most cases it will be the app.component.ts) and them import the MatIconRegistry module as follows:

import { MatIconRegistry } from '@angular/material';
import { DomSanitizer } from '@angular/platform-browser';

The DomSanitizer is there to mark paths to the SVG icons as trusted resources and ensure they are loaded. Then, create a constructor class to register new icons as follows:

public constructor (
    private domSanitizer: DomSanitizer,
    public matIconRegistry: MatIconRegistry) {
    //add custom material icons
    matIconRegistry.addSvgIcon('iconName', domSanitizer.bypassSecurityTrustResourceUrl('/path/to/your/svg/icon.svg'));
}

Now, you can go ahead and use the icons anywhere in angular application as follows:

<mat-icon svgIcon="iconName"></mat-icon>

Please note that in this case I have used the svgIcon=iconName to reference to the icon.

NOTE: The icons are loaded via XmlHttpRequest and due to the same-origin policy, their URLs must be on the same domain as the containing page, or their servers must be configured to allow cross-domain access.

Using Class Based Icons (Font Awesome and Similar Icons)

You can also use Font Awesome and other icon sets that use CSS Classes to load font with Mat-Icon Component. And just like SVG Icons, you must register the parent class first in your application. To use Font-Awesome, follow the steps below. Identify the first component of your application (in most cases it will be the app.component.ts) and them import the MatIconRegistry module as follows:

import { MatIconRegistry } from '@angular/material';

Then register the font-awesome class – fa – under the component constructor.

public constructor (public matIconRegistry: MatIconRegistry) {
    //add custom material icons
    matIconRegistry.registerFontClassAlias ('fa');
}

Then set the fontIcon to the class of the icon you wish to show, as follows:

<mat-icon fontIcon="fa-home"></mat-icon>

Please note that in this case I have used the fontIcon=iconName to reference to the icon. Adding Font-Awesome to your Angular Project First, install font-awesome using either NPM or Yarn as shown below:

npm install --save font-awesome
//for yarn
yarn add font-awesome

Then, if you using are SASS, include this on your styles.scss:

@import 'variables';
@import '../node_modules/font-awesome/scss/font-awesome'; //path to font awesome SCSS

Then create a _variables.scss and add the path to the fonts in the $fa-font-path variable:

$fa-font-path: '../node_modules/font-awesome/fonts';

If you are using CSS, include the path to the font-awesome CSS in your angular-cli.json as show below:

"styles": [  
"../node_modules/font-awesome/css/font-awesome.css"
]

Please note, the methods described in this post are not the only way to accomplish this. Thank you.

Responsive Navbar with Angular Flex Layout

Maina Wycliffe — Thu, 07 Dec 2017 21:58:29 +0000

Today, we are going to create a responsive Navbar using Toolbar and Sidenav Components from Angular Material together with Angular Flex Layout. We will be trying to replicate the behavior of Navbar in where it collapses on small screen and is fully displayed in Large screen.

If you are not aware, Angular Flex Layout provides a responsive Layout API with CSS flexbox and media query for Angular application. This post assumes you have knowledge in Angular 2+ applications and will not cover the basics. If you are new to Angular, you can learn how to get started here. Let’s get started:

Installation and Initial Setup

Angular Material

To install and setup Angular Material, you can follow the detailed instruction here from the official guide.

Angular Flex Layout

Installing Angular flex layout is simple. Use the following commands:

npm install @angular/flex-layout –save

yarn add @angular/flex-layout

Then import the Flex Layout Module in your app.module.ts as show below

import { FlexLayoutModule } from '@angular/flex-layout';

NB: Don’t forget to include FlexLayoutModule in the list of imports in ngModule imports.

Assuming you have successfully installed and setup both Angular Material and Angular Flex Layout, let’s move on and create a responsive navigation bar.

This is rather a straightforward process. We will create a toolbar at the top of the window and a side navigation bar with the same content as the toolbar. The toolbar will have a menu item that will open the Sidenav. This item will only be shown on small screen when the rest of the menu is hidden and vice versa. To create a toolbar, you use the following code below.

<mat-toolbar color="primary">
<span>Responsive Navigation</span> <span class="example-spacer"></span>
<a href="#" mat-button>Menu Item 1</a> <a href="#" mat-button>Menu Item 2</a>
<a href="#" mat-button>Menu Item 3</a> <a href="#" mat-button>Menu Item 4</a>
<a href="#" mat-button>Menu Item 5</a> <a href="#" mat-button>Menu Item 6</a>
</mat-toolbar>

As you see, this is Just a normal material toolbar without any responsive capabilities. Next, lets create a Sidenav with the same items.

<mat-sidenav-container fxFlexFill class="example-container">
<mat-sidenav fxLayout="column" mode="side" opened="false">
<div fxLayout="column">
<a href="#" mat-button>Menu Item 1</a>
<a href="#" mat-button>Menu Item 2</a>
<a href="#" mat-button>Menu Item 3</a>
<a href="#" mat-button>Menu Item 4</a>
<a href="#" mat-button>Menu Item 5</a>
<a href="#" mat-button>Menu Item 6</a>
</div>
</mat-sidenav>
<mat-sidenav-content fxFlexFill> Main content</mat-sidenav-content>
</mat-sidenav-container>

Now that we have both a Sidenav and a toolbar working, let’s work on making them responsive.

Adding Responsiveness using Angular Flex Layout

To add responsiveness to our navbar, we will use Angular Flex Layout to hide and show the toolbar menu items based on screen size. To do this, we enclose the menu items on a div container and then use fxHide and fxShow directive to hide and show the menu items. Example: To hide some content on small screens only:

<div fxFlex fxShow="”true”" fxHide.sm="”true”"></div>

To hide some content on both small and extra small screens only:

<div fxFlex fxShow="”true”" fxHide.lt-md="”true”"></div>

Simple? Now, let’s add this to our menu item:

<div style="height: 100vh;">
<mat-toolbar color="primary">
<span>Responsive Navigation</span> <span class="example-spacer"></span>
<div fxShow="true" fxHide.lt-md="true">
<!-- The following menu items will be hidden on both SM and XS screen sizes -->
<a href="#" mat-button>Menu Item 1</a>
<a href="#" mat-button>Menu Item 2</a>
<a href="#" mat-button>Menu Item 3</a>
<a href="#" mat-button>Menu Item 4</a>
<a href="#" mat-button>Menu Item 5</a>
<a href="#" mat-button>Menu Item 6</a>
</div>
</mat-toolbar>
</div>

Now, if you resize the browser width to small size, the menu items are hidden instead of being squeezed. But, we need to show a menu icon to reveal or draw the Sidenav on small screens. This will work similarly to the above code but have the opposite effect: Show on small screen, hide on large screens.

<div fxShow="true" fxHide.gt-sm="true"><a href="#">Show Side Menu</a></div>

As you can see, instead of hiding on lt-md (less than medium screen size) we are showing the single menu item on gt-sm(great than small screen size). You can use the table below for various breaking points of Angular Flex Layout Responsive API.

Now let’s add the code on the “Show Side Menu” menu item so that it reveals the Sidenav menu items.

<div fxShow="true" fxHide.gt-sm="true">
<a href="#" (click)="sidenav.toggle()">Show Side Menu</a>
</div>

Final Code

The whole code for a responsive navbar menu will look like this:

<div style="height: 100vh;">
<mat-toolbar color="primary">
<span>Responsive Navigation</span>
<span class="example-spacer"></span>
<div fxShow="true" fxHide.lt-md="true">
<!-- The following menu items will be hidden on both SM and XS screen sizes -->
<a href="#" mat-button>Menu Item 1</a>
<a href="#" mat-button>Menu Item 2</a>
<a href="#" mat-button>Menu Item 3</a>
<a href="#" mat-button>Menu Item 4</a>
<a href="#" mat-button>Menu Item 5</a>
<a href="#" mat-button>Menu Item 6</a>
</div>
<div fxShow="true" fxHide.gt-sm="true">
<a href="#" (click)="sidenav.toggle()">Show Side Menu</a>
</div>
</mat-toolbar>
<mat-sidenav-container fxFlexFill class="example-container">
<mat-sidenav #sidenav fxLayout="column">
<div fxLayout="column">
<a (click)="sidenav.toggle()" href="#" mat-button>Close</a>
<a href="#" mat-button>Menu Item 1</a>
<a href="#" mat-button>Menu Item 2</a>
<a href="#" mat-button>Menu Item 3</a>
<a href="#" mat-button>Menu Item 4</a>
<a href="#" mat-button>Menu Item 5</a>
<a href="#" mat-button>Menu Item 6</a>
</div>
</mat-sidenav>
<mat-sidenav-content fxFlexFill>Main content</mat-sidenav-content>
</mat-sidenav-container>
</div>

You can get the whole project on github.

Conclusion

This is a simple example of how you can use Angular Material and Angular Flex Layout to create a nice responsive navigation bar for your own application. If you have any question regarding anything I covered in this article, feel free to raise it in the comment section below and I will get back to you. You can also make suggestion on how to improve this simple navbar and other topics you would like me to cover.

5 Visual Studio Code Extensions for Angular

Maina Wycliffe — Fri, 24 Nov 2017 22:13:40 +0000

Visual Studio Code or VSCode is one of the best text editors out there. It is feature rich out of the box and has a lot of extensions which are easy to install. If you are an Angular developer using Visual Studio Code, you might want to consider the following extensions:

Angular Language Service

I have been using this extensions for a couple of weeks now and it has improved my coding experience. It relies on both @angular/language-service and typescript to provide completions list, and provide AOT (Ahead of Time) Diagnostic messages. It also offers Quick Info and Go to definition options.

Basically, all variables you have declared inside your typescript files are provided inside the template – be it an inline template or an external template. It also warns about errors that will brought up by the AOT compiler inside the Angular CLI – Such as using undefined variables inside your template and unimported or undeclared modules inside your project. Angular Language service also works nicely with Angular material, warning you if you use unimported material. It is a handy tool to have in your list of plugins.

Get Angular Language Service here.

TSLint (Typescript Lint)

Angular relies on Typescript - a superset of JavaScript. While you can still use JavaScript or something else like Dart or CoffeeScript, a lot of developers rely on Typescript for their applications. TSLint for VSCode integrates TSLint Tool into visual studio code.

“TSLint is an extensible static analysis tool that checks TypeScript code for readability, maintainability, and functionality errors. It is widely supported across modern editors & build systems and can be customized with your own lint rules, configurations, and formatters.”

For this extension to work, it requires both TSLint and Typescript to be installed either locally or globally. To install TSLint and typescript globally you can use the following command: npm install -g tslint typescript.

Get TSLint Here.

Angular 5 Snippets

This extension provides snippets for TypeScript, Html, Angular Material, ngRx, RxJS and Flex Layout. Although it requires some effort to learn how to use this extension, it can save you sometime if you learn how to use it. It is also extremely useful to developers who do not use Angular CLI as it will take some task off their hands like creating new components, services etc.

Get Angular 5 Snippets here.

Angular Essentials

Technically, this is not an extension but rather a pack of extensions. It is packed with multiple extensions for Angular in Visual Studio Code, some already discussed in this list. It contains: Angular 5 Snippets, Angular Language Service, Editor Config, Tslint, Chrome Debugger, Path Intellisense, Angular Inline, Winter is Coming theme and Prettier Formatting extension. If you wanted all angular extensions, install this extension pack and you will get most of them if not all.

Get Angular Essentials Here.

Angular Inline

If you use inline stylesheet and templates, you might want to consider Angular Inline. This extension provides Syntax highlighting and Code completion and hover information for inline html. It only works when you wrap your content using the backtrack character (`) which is kind of odd.

Get Angular Inline here

What I learned when I switched to Angular Material from Bootstrap

Maina Wycliffe — Tue, 21 Nov 2017 12:32:11 +0000

A couple months ago, I was having a debate on whether I should switch from Bootstrap to Angular Material. I have used Bootstrap for a very long time and was totally comfortable using it on all my projects. If you are not aware, Angular material is a set of components implementing Google Material Design language on angular applications. You can learn more here.

What attracted me to Angular Material was the User Experience of its component. How intuitive to user action they were as compared to Bootstrap own components. Yes, you could probably have the same effect by applying a Bootstrap theme, but is it really the same? That’s a discussion for another day. So, I finally made the decision to get out of my comfort zone and implement Angular Material on my first angular app and here is what I learned:

Transition Step by Step

If you decide to make the switch, don’t remove bootstrap at the beginning but at the end, when you have made the switch successfully. This is because Angular Material doesn’t provide a responsive layout by default like bootstrap. It can be very frustrating when your nicely build app falls apart because you decided to remove bootstrap at the beginning.

Instead, rely on bootstrap for responsive design first or switch to another responsive design library before removing bootstrap. I rememberred that before I fully committed to making the switch, I had to discard all the changes I made to the project several times. To avoid getting frustrated and most likely giving up, focus first on changing the Bootstrap components and then later you can decide on which responsive layout to use.

Responsive Design isn’t Easy with Angular Material

Like I said in the point above, Angular Material doesn’t provide a responsive layout by default. While this can be frustrating to some, it is done this way so that it can be easy to optimize when building your app.

If you want an Angular based solution for responsive layout, you will have to rely on Angular Flex Layout. It has a steep learning curve as compared to bootstrap but if you get used to it, it’s amazing and very robust.

Do not import all Modules, Just Include what you need

If you were to google, you will easily find a list of all Angular Material Components. Most people instinct is to import all modules, so that they can stop worrying about unimported modules while adding new components. While this will work, you will end up with so many unused modules (unless you are using all of them) in your app which will affect its performance.

It is easier to just import only the modules you need. This is because Angular CLI will always throw an error in case you forgot to import a module you are using. All you will have to do is simply add to your list of imported modules. Angular Material has been optimized for Angular and will only include modules you are using to the final build of your app, leaving out unused features and modules.

You will miss some things in Bootstrap

Bootstrap is an amazing and one of the most complete front-end framework out there. It has a lot of thing that are still missing from Angular Material. While some can still be added later, some might not even be added. One thing I miss most about bootstrap are the very many helper classes it has: padding, margin, text alignment, font-weight, border, background colors and so many others. May be someone, or even me should port all the helper classes from bootstrap for Angular Material.

I know these are small things, but they are still very important. Also, when it comes to component, there are some found in Bootstrap not found in Angular Material and vice versa. This can be disappointing especially if you rely on them. You can check my component by component comparison of both Angular Material and Bootstrap here.

It’s still not officially released

Why is this important? It may not be stable for use in production apps. While as of the time of writing, it is in Release Candidate 1 (released yesterday), which is much more stable as compared to when it was in beta. Still there can be changes that can break your app easily, so be careful when using it. Before updating, you take a look at the changelog first so that you don’t break your app. Here is a list some of the planned features for Angular Material:

Components Comparison Between Angular Material and Bootstrap Framework

Maina Wycliffe — Fri, 17 Nov 2017 23:09:39 +0000

Today, we are going to compare the components in Angular Material and Bootstrap Framework. This comparison is meant to help you decide on whether to go with bootstrap or angular material for your application. Bootstrap provides a nice looking, simple, clean user interface while Angular material looks to provide an enhanced user experience. While this comparison might be useful to most people, to others it might be a matter of preference. Let’s get started:

Common Components

First, we will look at common components between Angular Material and Bootstrap. By comparing the common components, we get to see which is better or more suitable for your project.

Buttons & Button group

Both Angular Material and Bootstrap implement this feature quite similarly. Angular provides less color options for button – Basic, Primary, Accent, Warn, Disabled and Link. On the other hand, Bootstrap provides about 9 color options: Primary, Secondary, Success, Danger, Info, Dark, Warning and Link. Angular material takes this further by providing different types of button: Fab Buttons, Icon Buttons, Raised and Basic (not raised – link like) Buttons. The icon buttons and Fab Buttons are good for small screen devices.

Card

I don’t have much to say about cards in both Angular material and Bootstrap. I could not find much difference and I found it straight forward to use either. That said, bootstrap provides more color options as compared to the plain card provided by Angular Material. Maybe it’s because I haven’t dug dipper into the card API in Angular Material, but I would say bootstrap has small advantage here. You can easily fix this issue with CSS.

Collapse or Expansion Panel?

While both Bootstrap and Angular Material might be using different names for these components, I did not find any significant difference between them. You can choose either and you will not be disappointed. May be the collapse from bootstrap looks a bit dated but that could be easily taken care by some CSS Styling.

Forms & Input

These is a group of components for forms found in both Angular Material and Bootstrap. These are the controls you would require for your forms such as text input, checkbox, radio button, text area etc. In this case, Angular has more controls out of the box as compare to Bootstrap. This includes a Date Picker, a Slider, a Slider Toggle and AutoComplete field – Searchable select control. So, in this case Angular Material is much preferable as compared to bootstrap.

This a case of naming difference for the same component. Having used both, I would be hard pressed to say which one is better. But if you were just interested with a modal window only, then go with angular material as you can import that component only. The same applies to all angular material components.

Menus Components

Both Angular Material and Bootstrap have menus components but with different implementation. Angular Material has a toolbar which is equivalent to Bootstraps own navbar component. Angular has a unique sidebar component which has no equivalent in Bootstrap. Bootstrap provides an easy way to create a responsive navbar as compared to Angular Material. In angular you have to rely on Angular Flex Layout for a responsive toolbar which can be difficult. Both Angular Material and Bootstrap provide components for normal menu and drop-down menu.

Lists Components

The angular material list component is much better compared to the bootstrap list group component. The bootstrap component has more color alternative as compare to Angular material but that can be solved by some CSS styling. Other Components

Pagination
Progress
Tooltips

Bootstrap Unique Components

Just like they have some common components, this two have their differences. There are some components found on Bootstrap but not found in Angular Material. It is important to note these components can still be added to Angular Material or vice versa on a latter release. These is a list of components that are currently found Bootstrap but not Angular Material.

Angular Material Unique Components

Here is a list of components currently found in Angular Material but not in Bootstrap:

Date picker
Slider
Slide toggle
Toolbar
Grid list
Stepper
Chips
Icon
Progress spinner
Snackbar
Sort header

Conclusion

Both Angular Material and Bootstrap have lots of amazing components. While in the case of bootstrap there is more than just component, it has utilities and a lot of helper classes and responsive grid design all rolled up in one. On the other hand, Angular material does have some helper classes and better integration with Material Icons. On its own, it doesn’t provide responsive web design but can be used together with Angular Flex Layout to achieve that. If you decide to go with Angular material, you might want to have a look at Angular Flex for responsive design. In case you decide to go with Bootstrap, here is a guide to assist you get started with bootstrap in your Angular project.

Is Angular Flex Layout (with Angular Material) Better than Bootstrap for Responsive Layout?

Maina Wycliffe — Wed, 15 Nov 2017 00:06:51 +0000

First before I can say anything else, I want to express my huge respect and love for Bootstrap. I am not writing this to bash bootstrap in any way, in fact bootstrap is one of the most robust frontend framework I have ever used. A few years ago, Google announced a new designed language when they released Android 5 (Marshmallow) and since then, it has been spreading like wildfire. If you wanted to use Material design in Angular, you use Angular Material. Angular Material is in simple terms is a set of components (i.e. Date Picker, Cards, Toolbar etc.) with the material design aesthetic. On its own, Angular Material can not provide a responsive design like bootstrap does. And that’s where Angular Flex Layout comes in and that’s what I want to focus on.

Angular Flex Layout

Bootstrap has a simple grid system divided into 12 sections for different screen sizes – Extra Small (xs), small (sm), medium (md) and large (lg). The extra small (xs) has been removed in Bootstrap 4. Angular Flex Layout on the other hand provides a more robust grid system which relies with CSS flex. The issue with relying on flex is browser compatibility. While most browsers support flex CSS in their latest versions, some earlier versions don’t. This may be problematic if your users have an old incompatible version of browser. In that case, stick with bootstrap. It has 5 regions but with different breaking points for different screen sizes as compared to Bootstrap. Refer to the image below:

The beauty of Angular Flex Layout approach is how you define the layout regions in relationship to each other. It is not also limited to 12 regions like bootstrap but rather you can include any unit of measure to define a region. You can use percentage points, pixels, inches to define width, height, margin and its extremely easy to do so. It makes using CSS flex very easy, although coming from bootstrap it took time getting used to it. A good example of this is: Let’s say you want to create a layout with 3 unequal columns:

In bootstrap

<div class="row">
<div class="col-sm-6"></div>
<div class="col-sm-4"></div>
<div class="col-sm-2"></div>
</div>

In Angular Flex Layout

<div flex fxLayout="row">
<div fxFlex="50"></div>
<div fxFlex="33"></div>
<div fxFlex="17"></div>
</div>

As you can see from the sample code, they produce much similar codes but with flex you can use percentage or pixels or anything else for sizes. You can now manipulate the above code for different screen sizes like, arranging them vertically for small devices as shown below:

<div flex fxLayout="row" **fxLayout.lt-sm="column" **>
<div fxFlex="50"></div>
<div fxFlex="33"></div>
<div fxFlex="27"></div>
</div>

You can achieve the same with bootstrap, but that mean repeating the class on all divs as follows:

<div class="row">
<div class="col-md-6 **col-sm-12" **></div>
<div class="col-md-4 **col-sm-12" **></div>
<div class="col-md-2 **col-sm-12" **></div>
</div>

To get a feeling of what Angular Flex Layout can do, visit the following live demo here. With Angular Flex Layout, you can apply specific classes, styles and directives on specific screen sizes or a range of screen sizes as defined here. For example, to apply a class to only small devices, all you have to do is add a .sm to the end of the ngClass name as shown below:

<div **ngClass.sm="class-for-small-devices" **></div>

I am not saying it’s perfect, in fact, it’s far from that. But for a library still in beta it works very well. There are somethings I like in bootstrap like helper classes for boldening text, aligning text, padding, margin among others. But that won’t stop me from switching from Bootstrap to using both Angular Material and Angular Flex Layout.

Requirements

Requirement part is a bit confusing in the official documents because they have stated the following:

requires Angular v4.1.x or higher.
is currently only available for Angular (v2.x or higher) Applications.

I don’t know which one is which. If you have the latest version of Angular, you are good to go. But, for those still using v2 or v4.0 – please give it a go and comment below on whether It works.

How to Get Started

To install Angular Flex Layout, you can use either Yarn or NPM with the following commands

yarn add @angular/flex@latest
npm install @angular/flex@latest

Then, you have to remember to import it into your project in the app.module.ts

import { FlexLayoutModule } from '@angular/flex-layout';

And remember to add it to your list of imports imports. After that you are can use angular/flex for in your projects.

Conclusion

To conclude, Angular Material and Angular Flex Layout are better than bootstrap. This is not to say you shouldn’t use bootstrap, but you should consider using both libraries. Of course, you can still use either independently if you wish to, Angular Material for the nice-looking UI component and Angular Flex Layout for responsive design.

NgRev – Analyze and Profile your Angular App

Maina Wycliffe — Mon, 13 Nov 2017 15:29:27 +0000

NgRev is a graphical tool designed to reverse engineer your Angular application. It is not a browser extension like Augury, but a standalone software available for MacOS, Windows and Linux. It does a static code analysis of your application and doesn’t require your application to be built (compiled) to use it. The tool allows you to navigate in the structure of your application and observe the relationship between the different modules, providers and directives. This can be helpful if you wish to get up to speed on a new project by seeing how it build.

The one downside I found was that it stopped working with my application when I upgraded to Angular 5 application. I have used it on several of my projects in Angular 4 and it was working fine though. May be an update will be released soon to make it compatible with Angular 5 and Angular CLI 1.5. You can follow the issue raised on the apps Github page here.

If you would like to try out NgRev, please go to this link and download the app for your operating system. Install the downloaded application, if you are stuck with installation, follow these detailed instructions located on their github page.

How it works

First, your application needs to be compatible with Angular AOT (Ahead of Time) Compiler. When using Angular, some people compile their application without AOT. It is faster but also ignores lots of errors – I learned that the hard way. To build with AOT, all you need to do is add the -aot flag when serving or building your app.

ng server -aot or ng build -aot

If your app is compatible follow the following instruction (Works for both Angular CLI and Angular Seed Project):

Open the ngRev Application
Click on the open project button (big large blue button at the center of the application)
Navigate to your project folder and select tsconfig.json located inside the src folder inside the project folder.
Now you can navigate through your project graphically.

PHP: Frameworks vs Microframeworks

Maina Wycliffe — Sun, 12 Nov 2017 22:18:37 +0000

Introduction

A PHP Framework in simple terms is a platform used by developers to create web applications – obviously made by PHP. They help developers concentrate on their applications – the bigger picture – instead of some small details like creating a database connection. Instead you can concentrate on how best to query your data. They make it easier to develop PHP applications rapidly and take care of thing like security and enforce coding standards or style of coding. Frameworks tend to be bloated with many libraries a developer may never use.

A good example for this are databases. There are so many databases you can use with your application such as MySQL, MSSQL, Oracle etc. A PHP framework will have libraries and ability to connect to all this database and if you are just using one, then you don’t need the rest of the database libraries. And that’s why we have microframeworks.

A microframework is a framework in its own light but with barebone libraries and functionality with modular support – they are skeletons of frameworks. A microframework only has the libraries you need to get started and then you can add modules for what you need to do. Microframeworks have a small code footprint. It also improves their performance.

Good examples of a microframeworks are Slim and lumen among others. While examples of frameworks are Laravel, Zend and Symphony.

When to use Frameworks?

The world is large enough for both Frameworks and Microframeworks. The thing is, you need to know when to use a framework and when to use a microframework. Frameworks can be used on projects of all kinds, especially when you are on tight deadline. Frameworks are good for building large PHP application that will utilize the large number of libraries that come with them.

When to use Microframeworks

Unlike frameworks, Microframeworks are not for every web application. They are suitable to small PHP applications like REST APIs. These applications perform specific functions and hence require just a few libraries which leads to a small footprint. They also provide developers with the freedom of choosing their own libraries to achieve what they want.

You can still use a microframework instead of a framework and vice versa but I would not recommend it. This is because if you were to use a microframework in place of a framework, you would end up adding a lot of libraries found in frameworks and hence end up with a framework. On the other hand, if you used a framework in place of a microframework, you would have a lot of libraries that are unnecessary. This would affect the performance of your application negatively.

Conclusion

When it comes to choosing a framework or microframework or even whether to use a framework, personal preferences come into play. But if you were looking for some guide on which framework to use, please read the following detailed analysis.

On a personal note though, I would recommend Laravel or Symphony for a framework and Slim or Lumen for a microframework. Lumen is microframework from Laravel and hence if you are already acquainted with Laravel, then Lumen is the obvious choice.

Augury – A Tool to Debug and Profile your Angular App

Maina Wycliffe — Fri, 10 Nov 2017 22:39:33 +0000

Augury is an open source tool available to Google Chrome that was developed by Google in conjunction with Rangle.IO for debugging and profiling your Angular application. Augury will provide detailed insights of your application structure and how different app building blocks relate to each other. These building blocks are: Components, Services, Routes, Modules, Dependencies, Injectors, Data bindings, Events and Object properties. Augury helps Angular developers to visualize their application through component trees and debugging tools. For Augury to work your app must be in development mode and won’t work on when in development mode.

Features

It has the following features that are useful to your application:

Dependency Injection

Augury Provides a hierarchical view of the structure of your Angular App. You can view components and how they relate to each other in the application – Parent – child component relationship. It will provide more information on the property tab (located on the right) if you select a component. This will display the state and the title of the component. You can also view the source code of a component by selecting view source on the property tab.

Please note if a source map doesn’t exist for your application, you will see minified JS source instead of your beautifully crafted TypeScript code Also, you can view the app dependencies inside the state property under the property tab. This information is also provided visually using the injector graph tab just next to the property tab. It provides a visual representation of component dependencies instead of using the source code to do the same. You can learn more about this here.

Module List

This will provide you with information about all the modules in your application starting with appModule. This feature provides a list of imports, exports, providers, declarations found in the module. This includes all angular modules you have used in your application such as BrowserModule, httpModule etc. and all your feature modules that you have created yourself. You can learn more about this here.

Routes Tree

Router tree displays all the defined routes that are currently loaded in the application in a hierarchical tree manner. It starts from the AppComponent which is the root components going all the way to the last component in the root. It will show you the name of the component and the router path if you hover on a route in the route tree. You can more about augury routes feature here.

Installation

You can get augury in the Google Chrome Webstore here. Then click on add to chrome and wait for the process to complete. There are other browser that accept chrome extensions but I have not tested whether augury works on them.

Using Augury

You must have an angular application in development mode to use Augury. Then open the developers’ tools (DevTools) in chrome by pressing Ctrl + Shift + I in windows or Cmd + Opt + I in Mac OS X. Then locate the Augury tab on the far right.

You can get augury tutorials and detailed demos here.

Angular 5 – Handling Token Based Authentication

Maina Wycliffe — Thu, 09 Nov 2017 00:28:59 +0000

Token based authentication is popular for single page applications. A token is a security code issued by a server for authenticating and identifying users. When a user login to the system or application, the servers issues a token that expires after a specified period. The use of token eliminates the need for the app or system to remember or store the user’s credentials. You can learn more about token based authentication here. When creating an app that uses Token Based Authentication in Angular, you need to make the following considerations:

Where will you store the token?
How will you send them to the server with every request?
How will you handle unauthorized (Status 401) response?
How will you handle token refreshes?

To break it down, let’s look at the 4 considerations:

Where will you store the token?

Web browsers usually offer 3 types of storage: Cookie, Session Storage and Local Storage. Each storage method has its own advantages and disadvantages. I would recommend using a Session Cookie to store your token. Why? Local storage does not get cleared when the user closes their browser and it would be difficult to clear the data on all circumstances. Session Storage on the other hand is limited to one tab per session, hence if a user opens more tabs they would have to login on each occasion (unless that’s exactly what you want). This leaves cookies, as a method of storage and not for maintaining sessions. A session cookie will be shared across all tabs and windows in the browser and will be deleted once the user closes the browser. This cookie would have to be set and be readable by the app, so no Http-only flag. And since sending the cookie to the server has no effect, set the path to a non-existent path to prevent that. To set a session cookie don’t set an expiry date to the cookie and the browser will know to clear the cookies when it’s closed. To set cookies using angular, use ngx-cookie-service component.

How will you send tokens to the server with every request?

You will need to send the token to the server with every request. Failure to do so, the server will not be able to identify and authenticate you hence will reject your request. To do this, you can use the authorization header and attach the token as the value of the header. The server will then read the header and get the token to authenticate your request. To do this, you will require to intercept all http requests and attach the header automatically. You can learn how to create a http interceptor here. Then with every request you can add the authorization header inside the http request as shown below:

const Authorization = authService.getToken(); //read the token from storahe
const authReq = req.clone({
headers: req.headers.set('authorization', Authorization)
}); // Clone the request to add the authorization header.
return next.handle(authReq); // Pass on the cloned request instead of the original request.

(NB: I have just used a simple header name, you can use the method of your choice like Bearer Authentication scheme) You have now managed to send the token with every request to the server.

How will you handle unauthorized (HTTP Status 401) response?

The other consideration is handling unauthorized responses from the server. A server returns unauthorized response (HTTP Status 401) if there is an issue with the credentials i.e. invalid or if they don’t exist. The server could also return this option if the token is expired and a refresh is required (We will discuss this in the next step). It’s important to note that unauthorized response is different form forbidden (HTTP Status 403) which means you have the correct credentials but you are forbidden from accessing a specific resource. Since the server was unable to authenticate the user, you could redirect them to the login page or show a login modal form. To achieve this, you need to catch all error responses from the server and check for those returning status 401. Then you could redirect them to the login page as shown below:

return next.handle(authReq)
.catch((error, caught) => {
if (error.status === 401) {
//logout users, redirect to login page
 authService.removeTokens();
//redirect to the signin page or show login modal here
 this.router.navigate(\['/auth/signin\]); //remember to import router class and declare it in the class
 return Observable.throw(error);
} else {
return Observable.throw(error);
}
}
) as any;

This will simply redirect all status codes 401 to the sign in page.

How will you handle token refreshes?

It would be a bad precedent to set the token expiration to too long or have the user login to the system every few minutes because a token expired. A good compromise is coming with a way of refreshing an expired token. For instance, you could have a refresh token that last longer than the other authorization token but can only be used once. Then you can set the authorization token to expire in a few minutes and the refresh token to expire a little bit longer like a couple of hours. This way, even when the authorization token expires you can ask for a new one from the server transparently. What I like to do is have the server return a status code that is not defined by the HTTP standard. A good example is 419 or 490. Then the interceptor can catch all 419s and attempt to refresh the authorization token. If successful, it should resend the original request with the new authorization header. If it fails, redirect the user to the login page. The refresh method would look something like this:

refreshToken(): Observable<string> {
    let refreshAuth = this.getRefreshToken(); //get refresh token from storage
    let url: string = BASE_URL + "auth/refresh";
    return this.http.get(url, {
      headers: new HttpHeaders().set('refreshAuthorization', refreshAuth),
      observe: 'response'
    }).map(refreshResponse => {
      let authToken: string = refreshResponse.headers.get('authorizationToken');
      let refreshToken: string = refreshResponse.headers.get('refreshToken');
      //add token to storage
      this.createToken(authToken, refreshToken); // method for adding token to cookie storage
      return authToken; //return the new authorization token
    });
  }

Now you can intercept all responses with status code 419 for expired tokens and attempt to refresh the tokens. The code below shows how to handle refreshing of tokens with a custom http code 419. It should be inside the catch block of the http interceptor.

if (error.status === 419) {
return authService.refreshToken().flatmap(t => {
this.inflightAuthRequest = null;
const authReq = req.clone({ headers: req.headers.set('authorization', t) });
return next.handle(authReq); //refresh was success, resend the original request
 });
}

This will try and refresh the token and incase it fails, it will redirect the user to the login page. Now you have a simple token based authentication system in Angular. Here is the full code for the http interceptor.

How to build a HTTP Interceptor in Angular 5

Maina Wycliffe — Wed, 08 Nov 2017 00:20:16 +0000

Introduction

A HTTP Interceptor enables you to catch HTTP requests and responses so that you can modify them. It is very useful especially when you want to add extra headers to all outgoing requests or catch error responses from the server. One use case scenario for an interceptor is adding authorization header for authentication to all request.

You could add an authorization header manually to all requests but that would be a lot of work. Or you could automatically intercept and append the header before sending the request to the server. Another use case scenario is handling errors and caching of content. You can use an interceptor to catch errors and log them or serve cached content to the user instead of getting content from the server.

We are going to build a simple Interceptor that will catch-all outgoing requests and incoming responses and log them in console. You can view the console of your browser by opening the developers’ tools.

Getting Started

First, we are going to create a new Angular 5 Application using Angular CLI.

ng new httpinterceptor

A new directory will be created known as httpinterceptor. This is the location of your newly created project. You can run the application and the output would look like this: We shall use JSON PlaceHolder as our endpoint to make our http requests. This is a Fake Online REST API for Testing and Prototyping. It has several variations of http requests which we can call expecting different results, it’s also free. To make any http requests we need to import the HttpClientModule into our application in the app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, HttpClientModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}

Next, we need to add two buttons in our app.component.html file. The two buttons will call different methods on click. The first method will call an genuine URL while the second one will call a bogus URL that doesn’t exist hence triggering an error. Replace everything in the file with the following:

<div style="text-align:center">
<h1>Click one of the two buttons</h1>
<button (click)="method1Call()">Method 1</button>
<button (click)="method2Call()">Method 1</button>
</div>

Now that we have a user interface, we need to add the two methods to our app.component.ts and import HTTPClient.

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
constructor(private httpClient: HttpClient) {}
method1Call(): void {
this.httpClient
.get('https://jsonplaceholder.typicode.com/users')
.subscribe(success => {
console.log('Successfully Completed');
console.log(success);
});
}
method2Call(): void {
this.httpClient
.get('https://jsonplaceholder.typicode.com/user12')
.subscribe(success => {
console.log('Successfully Completed');
console.log(success);
});
}
}

We expect the first request to succeed but the 2nd one to fail. Instead of using the fail method inside a subscribe method, we will use the interceptor to catch the errors and log them. Here are the results so far.

Adding a HTTP Interceptor

To add an interceptor, create a new class using Angular CLI.

ng g class my-http-interceptor

And then import the following modules (HttpEvent, HttpInterceptor, HttpHandler, HttpRequest) from HTTPClientModule. Then create an interceptor method as follows:

import { Injectable, Injector } from '@angular/core';
import {
HttpEvent,
HttpInterceptor,
HttpHandler,
HttpRequest
} from '@angular/common/http';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/catch';
@Injectable()
export class MyHttpInterceptor implements HttpInterceptor {
constructor() {}
intercept(
req: HttpRequest<any>,
next: HttpHandler
): Observable<HttpEvent<any>> {
console.log('intercepted request ... ');
// Clone the request to add the new header.
 const authReq = req.clone({
headers: req.headers.set('headerName', 'headerValue')
});
console.log('Sending request with new header now ...');
//send the newly created request
 return next.handle(authReq).catch((error, caught) => {
//intercept the respons error and displace it to the console
 console.log('Error Occurred');
console.log(error);
//return the error to the method that called it
 return Observable.throw(error);
}) as any;
}
}

Now you have an interceptor but it won’t work because the application doesn’t know it exists. Open the app.modules.ts and modify it to include the interceptor by: Importing the interceptor class from your class and import the HTTP_INTERCEPTORS from @angular/common/http as shown below.

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { MyHttpInterceptor } from './httpinterceptor';

Then add a new HTTP_INTERCEPTOR provider to your app.modules.ts. This will enable your app to recognize and use the new interceptor. This should be added inside the @NgModules below the imports as illustrated below:

providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: MyHttpInterceptor,
multi: true
}
],

Your new app.modules.ts should look like this now:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { MyHttpInterceptor } from './httpinterceptor';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, HttpClientModule],
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: MyHttpInterceptor,
multi: true
}
],
bootstrap: [AppComponent]
})
export class AppModule {}

And the results will look as follows for a working interceptor:

Any new http request you make from this project will all pass through the interceptor. You can find the whole source code of this project on Github here. Thank you.

Image Sliders and Carousels for Angular 4

Maina Wycliffe — Sun, 05 Nov 2017 23:39:28 +0000

Web developers require from time to time to create different types of images sliders and carousel in their apps. Most developers coming from jQuery and other plugin tend to want to use the tools they are already familiar with – like that amazing jQuery plugin you used before. But doing that would make your app bloated if you imported an extra library that you will be under using. It would be much better if you used an Angular carousel module to achieve this. So, today I have decided to do some research and test out 5 carousel modules for Angular (Not AngularJS) and above.

1. Bootstrap Carousel

Bootstrap is one of the most popular frontend frameworks out there. It has component for almost everything and its well designed and easy to use. It relies mainly on jQuery to function. The reason am suggesting you use it, it’s because you can replace jQuery with Angular module so that bootstrap works without jQuery. This module is known as ng-boostrap. You can learn how to setup Bootstrap 4 in your Angular 4 app here. You can use the Bootstrap carousel component to make a nice image slider for your app with ng-bootstrap using the following instructions. Ng-bootstrap has some nice tutorials on how to use it with bootstrap here.

2. Angular4 Carousel

Angular Module for Image Slider and Carousel

This is a simple image carousel for an Angular app. It doesn’t do more than that or less, it does simply what it says it does – be an image slide. If you are already too deep in your application, this can be a simple, quick solution for you. Learn more about this image carousel here and demo here.

3. ngx-carousel

This is a light image slider with multiple options. It offers options such as Banner image slider and tile image slider with and without loop. The only downside with this carousel is that it doesn’t contain any CSS hence you will need to add on your own. If you are not experience this might be a problem. The upside is that it supports gestures and touch controls using hammerjs. You can view a demo here and installation for instructions here.

4. ngx-slick

Another image slider for Angular that does just what it says. It is simple just like Angular4 carousel. You can view an example here and checkout the instructions to install it here. It has the option to have a banner image slider or tile image slider. It’s a decent image slider module to have in your arsenal.

5. Angular2+ Draggable Carousel

4th on this list is a different kind of image slider. It offers two options: An image slider (tile and banner images) as illustrated in the image above and scroll bars for large single images. This can be suitable for adding large image on a page without taking large chunk of space or as simple image slider. And likes it names says, it also offers the option to drag through the images in the slider. Here is a demo and instruction on how to use it.

How to upgrade your Angular 4 App to Angular 5.0

Maina Wycliffe — Sat, 04 Nov 2017 19:56:11 +0000

Angular 5 was finally released earlier this week after several delays. It brings a lot of improvements over Angular 4 and new features as discussed in my previous post here. On top of Angular 5, Angular CLI v1.5 was also released. So, today I will show you how to upgrade your angular 4 app to Angular 5. Before you can get started with this process, it is important that you backup your app. Also, I would advise you to create an upgrade branch on git instead of working on your master or dev app. This will help you have a working app just in case the upgrade doesn’t work.

Upgrade Angular CLI to version 1.5

First and foremost, we need an up to date Angular CLI to take advantages of Angular 5 build optimizer among other features. If you are not using angular CLI, you can skip this step. I am assuming you have installed Angular CLI globally and as such you need to upgrade the global version. If you are using NPM, you need to use the sequence of the commands below:

npm uninstall -g angular-cli
npm cache clean npm install -g @angular/cli@latest

The first command will uninstall Angular CLI globally, while the second command will clear the cache. The last command will install the latest version of Angular CLI. For those using Yarn Packager Manager, follow the following command

yarn global upgrade @angular/cli@latest

To confirm that your Angular CLI has been updated to the latest version (v1.5), use the following command.

ng -v

This will show you the current version of Angular CLI as indicated in the image below.

Upgrade Your Angular 4 App

Preliminary Steps

First, run through the checklist below and modify your app accordingly. Do this to avoid breaking your app after you upgrade (Please note, If you started with Angular 4 you might not have to change anything here):

Stop using DefaultIterableDiffer, KeyValueDiffers#factories, or IterableDiffers#factories
Rename your template tags to ng-template
Replace OpaqueTokens with InjectionTokens.
If you call DifferFactory.create(…) remove the ChangeDetectorRef argument.
Stop passing any arguments to the constructor for ErrorHandler
If you use ngProbeToken, make sure you import it from @angular/core instead of @angular/platform-browser
If you use TrackByFn, instead use TrackByFunction
If you import any animations services or tools from @angular/core, you should import them from @angular/animations
Replace ngOutletContext with ngTemplateOutletContext.
Replace CollectionChangeRecord with IterableChangeRecord
Anywhere you use Renderer, now use Renderer2
Switch from HttpModule and the Http service to HttpClientModule and the HttpClient service. HttpClient simplifies the default ergonomics (You don’t need to map to JSON anymore) and now supports typed return values and interceptors. Read more on io
If you use DOCUMENT from @angular/platform-browser, you should start to import this from @angular/common
If you use preserveQueryParams, instead use queryParamsHandling
If you rely on the date, currency, decimal, or percent pipes, in 5 you will see minor changes to the format. For apps using locales other than en-us you will need to import it and optionally locale_extended_fr from @angular/common/i18n_data/locale_fr and registerLocaleData(local).
Do not rely on gendir, instead look at using skipTemplateCodeGen. Read more
If you created a custom form control with min and max input properties, you will need to adapt to the new behavior by renaming them or using the native validators.

How to Update

Now, I believe you are ready to upgrade your app to Angular 5. If you are using NPM, use the commands below to do the upgrade:

npm install @angular/animations@'^5.0.0' @angular/common@'^5.0.0' @angular/compiler@'^5.0.0' @angular/compiler-cli@'^5.0.0' @angular/core@'^5.0.0' @angular/forms@'^5.0.0' @angular/http@'^5.0.0' @angular/platform-browser@'^5.0.0' @angular/platform-browser-dynamic@'^5.0.0' @angular/platform-server@'^5.0.0' @angular/router@'^5.0.0' typescript@2.4.2 rxjs@'^5.5.2'

npm install typescript@2.4.2 --save-exact

And if you are using Yarn Package Manager, use the command below:

yarn add @angular/animations@'^5.0.0' @angular/common@'^5.0.0' @angular/compiler@'^5.0.0' @angular/compiler-cli@'^5.0.0' @angular/core@'^5.0.0' @angular/forms@'^5.0.0' @angular/http@'^5.0.0' @angular/platform-browser@'^5.0.0' @angular/platform-browser-dynamic@'^5.0.0' @angular/platform-server@'^5.0.0' @angular/router@'^5.0.0' typescript@2.4.2 rxjs@'^5.5.2'

And there you have it, your Angular 4 app has been successfully upgraded. You can run your application to make sure everything is working fine If you have any question, you can contact me through social media on Twitter or on LinkedIn. Thank you.

The Most Disliked Programming Languages

Maina Wycliffe — Fri, 03 Nov 2017 22:51:04 +0000

Stackoverflow has published a study on their blog for the most disliked programming languages. To come up with this list, stackoverflow studied developer inputs for stackoverflow jobs.

When developers are creating their stories to showcase their achievements and skills, stackoverflow provides an option for developers to choose which languages they would like to work with and which they would not. This provides an accurate metric for both disliked and liked languages by developers on the stackoverflow site.

This offers us an opportunity to examine the opinions of hundreds of thousands of developers. There are many ways to measure the popularity of a language; for example, we’ve often used stackoverflow visits or question views to measure such trends. But this dataset is a rare way to find out what technologies people tend to dislike, when given the opportunity to say so on their CV.

Method of Measure

To measure which is the most disliked languages, stackoverflow came up with the following formula: They compared the fraction of time a disliked tag appeared in someone else liked or disliked tags. If it’s 50%, it means equal people liked and disliked it while it’s 1% means 99 liked the language as compared to just 1 who disliked it.

Most Disliked Programming Languages

Based on the above methodology, here are the 10 most disliked programming languages:

Perl – 19%
Delphi – 19%
VBA – 17%
PHP – 9%
Objective-C – 9%
Coffeescript – 8%
Ruby – 7%
C# (C-Sharp) – 5%
Java – 4%
C++ - 3%

Least Disliked Programming Languages

Also, here is a list of the least disliked languages from the study.

R
Kotlin
Typescript
Rust
Bash
Clojure
Swift
Python
JavaScript
Go

All least disliked languages had a percentage of approximately less than 2. On top of that, the least disliked languages are also the fastest growing languages. Kotlin has been gaining popularity since Google adopted it as first language for android. It got android developer attention in the Google I/O event earlier this year. Typescript on the other hand is seen as the future of JavaScript and been widely accepted by developers especially in Angular JavaScript Framework.

Angular 5 has been released

Maina Wycliffe — Wed, 01 Nov 2017 23:39:23 +0000

Angular 5 was finally released after several delays yesterday, November 1, 2017. It was also accompanied by Angular CLI 1.5. This is a major release and in line with Angular team promise of major releases twice a year. It focusses on making Angular application smaller, faster and easier to use.

How to upgrade

5.0 for Basic Apps">

The Angular Team has built a tool to guide you through the upgrade process from any version of Angular. The tool can be found here.

What’s new?

HTTPClient

Angular introduced HTTPClient in Angular 4.3 found inside @angular/common. The team has marked the original @angular/http for deprecating in Angular 5. If you will upgrade to Angular 5, you will need to update your http to the new one found in @angular/common which is better than the deprecated one.

Build Optimizer

This will be turned on by default in Angular 5. Build optimizer is included in Angular CLI for making your application bundle much smaller by understanding your application. This is done by removing unnecessary parts of your application while also retaining all the necessary parts. It also removes Angular decorators from your application’s runtime code. Decorators are used by the compiler, and aren’t needed at runtime and can be removed. Each of these jobs decrease the size of your JavaScript bundles, and increase the boot speed of your application for your users.

Compiler Improvements

The Angular team has made improvements to Angular compiler to support incremental compilation. This in turn increases the speed of rebuilds especially for productions and build using AOT flag. Also, Angular compiler operates as typescript transform, increasing the rebuilds speeds when using TypeScript 2.3. You can take advantage of this by using the AOT flag.

ng serve -AOT

“When performing an incremental AOT build of https://angular.io, the new compiler pipeline saves 95% of the build time (from more than 40 seconds to less than 2 seconds on our development machines).”

Large projects with over 1000 components might not benefit from incremental compilation, it’s a known issue. This will be turned on by default to everyone on future versions of Angular CLI as soon as its evident that everyone can benefit from the increased speeds. On top of all that, you can now choose whether you want whitespaces in your application can be preserved on not. The norm has been to preserve them faithfully. You can specify this as part of each component’s decorator, where it currently defaults to true.

@Component({
  templateUrl: 'about.component.html',
  preserveWhitespaces: false
}
export class AboutComponent {}

Improved Decorator Support

Angular now support expression lowering in decorators for lambdas and the value of useValue, useFactory and data in an object literal. This allows you to use values that can only be calculated at runtime in decorators for expressions that are lowered. You can now use a lambda instead of a named function, meaning you can execute code without affecting your d.ts or your public API.

Internationalized Number, Date, and Currency Pipes

Angular will stop relying on the browser API to provide international numbers, dates and currency formatting. This forced developers to rely on polyfill to ensure consistency across all browsers. Instead, the Angular Team has created its own implementation relying on CLDR to provide extensive locale support and configurations for any locales you want to support. You can learn more about this here.

Angular Universal State Transfer API and DOM Support

Angular universal is a project focused on helping developers perform server-side rendering (SSR). This means you can use your server to render your application and then bootstrap on top of the generated code. This is good news to developers as you can now add support for scrappers and crawlers that don’t support JavaScript. It can also boost your application speed leveraging your server capabilities and use of a cache to avoid re-rendering of static pages on request. On top of that, Angular team has added ServerTransferStateModule and BrowserTransferStateModule.

This module will allow you to generate information as part of your rendering with platform-server, and then transfer it to the client side so that this information does not need to be regenerated. This is useful for cases such as when your application fetches data over HTTP. By transferring state from the server, this means developers do not need to make a second HTTP request once the application makes it to the client.

The documentation for this will come soon. Also, the Angular Universal Team has added domino to platform server. Domino adds more DOM manipulations out of the box in the server side and has improved Angular support for 3rd party JS and components that are not server side aware.

Other Changes

Replaced the ReflectiveInjector with StaticInjector
Zone speed improvements
Added support for multiple names for your components / directives.
You can now run validation and value updates on blur or on submit, instead of on every input event.
Angular is now compatible with RxJS 5.5 – The latest version
Added new lifecycle events to the router, allowing developers to track the cycle of the router from the start of running guards through to completion of activation.

For more information, visit the official blog announcement here.

How to setup Yarn Package Manager for Angular (Updated)

Maina Wycliffe — Tue, 31 Oct 2017 07:46:10 +0000

Last week, I briefly touched on Yarn Package Manager in my post about 5 must have tools for angular developer. Yarn Package Manager – simply referred to as Yarn – was developed by Facebook as a replacement for Node Package Manager (NPM). Yarn has been widely adopted by Facebook for its core Projects: main Facebook app and website, Instagram, Oculus, and WhatsApp.

To put it simply, Yarn is a better version of NPM. It offers speed, security and reliability over NPM. I have been using Yarn for a couple months now and I will not switch back to NPM anytime soon. Yarn has the same packages as NPM, you don’t have to worry about lack of packages. To install any package from NPM, just copy the name of the package and install it as follows (replace package-name with the name of the package):

yarn add package-name

Is it Compatible with Angular CLI?

Angular CLI is another tool that helps you manage your angular project. It helps you create, build, generate components, services and others for your project. By default, it uses NPM for package management but it also supports Yarn.

How to Install Yarn Package Manager

To install yarn package manager, you need to head to the following webpage. Download and follow the instruction specific to your Operating System.

Yarn is available for Windows, Linux and MacOS. Once you have successfully installed Yarn. (You can test by running the command below, it will give you the yarn version number)

yarn -v

You can now set Angular CLI to use yarn by running the command below. This will change the default package manager from NPM to yarn globally. For Angular 5 and below, use the following command:

ng set --global packageManager=yarn

NB: For Angular 6 and above, use the following command:

ng config -g cli.packageManager yarn

Now, any new project you start with Angular CLI will be using Yarn instead of NPM. If you have an existing project and would like to switch to yarn, you will need to install all NPM packages into yarn lock file. Just run the command below, it won’t interfere with your NPM packages as it depends on them.

yarn install

Installing Packages Using yarn

To install packages using Yarn is rather simple. Find or take any NPM package name and add it using yarn add command as indicated below:

yarn add package-name-1 package-name-2 …

i.e.

yarn add @ng-bootstrap/ng-bootstrap

Other Commands

Starting a new project

yarn init

Adding a dependency

yarn add [package]
yarn add [package]@[version]
yarn add [package]@[tag]

Adding a dependency to different categories of dependencies

Add to devDependencies, peerDependencies, and optionalDependencies respectively:

yarn add [package] --dev
yarn add [package] --peer
yarn add [package] --optional

Upgrading a dependency

yarn upgrade [package]
yarn upgrade [package]@[version]
yarn upgrade [package]@[tag]

Removing a dependency

yarn remove [package]

Installing all the dependencies of project

yarn or yarn install

Revert to NPM

In case you are unimpressed with yarn or you find the change of command hard to take, you can revert to NPM with the command below. For Angular 5 and below:

ng set --global packageManager=npm

NB: For Angular 6 and above:

ng config -g cli.packageManager npm

Terms of Use

Maina Wycliffe — Mon, 30 Oct 2017 11:34:03 +0000

Terms

By accessing the website at https://codinglatte.com, you are agreeing to be bound by these terms of service, all applicable laws and regulations, and agree that you are responsible for compliance with any applicable local laws. If you do not agree with any of these terms, you are prohibited from using or accessing this site. The materials contained in this website are protected by applicable copyright and trademark law.

Use License

Permission is granted to temporarily download one copy of the materials (information or software) on Coding Latte’s website for personal, non-commercial transitory viewing only. This is the grant of a license, not a transfer of title, and under this license you may not:
1. modify or copy the materials;
2. use the materials for any commercial purpose, or for any public display (commercial or non-commercial);
3. attempt to decompile or reverse engineer any software contained on Coding Latte’s website;
4. remove any copyright or other proprietary notations from the materials; or
5. transfer the materials to another person or “mirror” the materials on any other server.
This license shall automatically terminate if you violate any of these restrictions and may be terminated by Coding Latte at any time. Upon terminating your viewing of these materials or upon the termination of this license, you must destroy any downloaded materials in your possession whether in electronic or printed format.

Disclaimer

The materials on Coding Latte’s website are provided on an ‘as is’ basis. Coding Latte makes no warranties, expressed or implied, and hereby disclaims and negates all other warranties including, without limitation, implied warranties or conditions of merchantability, fitness for a particular purpose, or non-infringement of intellectual property or other violation of rights.
Further, Coding Latte does not warrant or make any representations concerning the accuracy, likely results, or reliability of the use of the materials on its website or otherwise relating to such materials or on any sites linked to this site.

Limitations

In no event shall Coding Latte or its suppliers be liable for any damages (including, without limitation, damages for loss of data or profit, or due to business interruption) arising out of the use or inability to use the materials on Coding Latte’s website, even if Coding Latte or a Coding Latte authorized representative has been notified orally or in writing of the possibility of such damage. Because some jurisdictions do not allow limitations on implied warranties, or limitations of liability for consequential or incidental damages, these limitations may not apply to you.

Accuracy of materials

The materials appearing on Coding Latte website could include technical, typographical, or photographic errors. Coding Latte does not warrant that any of the materials on its website are accurate, complete or current. Coding Latte may make changes to the materials contained on its website at any time without notice. However Coding Latte does not make any commitment to update the materials.

Links

Coding Latte has not reviewed all of the sites linked to its website and is not responsible for the contents of any such linked site. The inclusion of any link does not imply endorsement by Coding Latte of the site. Use of any such linked website is at the user’s own risk.

Modifications

Coding Latte may revise these terms of service for its website at any time without notice. By using this website you are agreeing to be bound by the then current version of these terms of service.

Governing Law

These terms and conditions are governed by and construed in accordance with the laws of Kenya and you irrevocably submit to the exclusive jurisdiction of the courts in that State or location.

Privacy Policy

Maina Wycliffe — Mon, 30 Oct 2017 10:58:23 +0000

Last Updated on 2017-10-30

This privacy policy has been compiled to better serve those who are concerned with how their ‘Personally Identifiable Information’ (PII) is being used online. PII, as described in US privacy law and information security, is information that can be used on its own or with other information to identify, contact, or locate a single person, or to identify an individual in context. Please read our privacy policy carefully to get a clear understanding of how we collect, use, protect or otherwise handle your Personally Identifiable Information in accordance with our website.

What personal information do we collect from the people that visit our blog, website or app?

When ordering or registering on our site, as appropriate, you may be asked to enter your email address or other details to help you with your experience.

When do we collect information?

We collect information from you when you subscribe to a newsletter or enter information on our site.

How do we use your information?

We may use the information we collect from you when you register, make a purchase, sign up for our newsletter, respond to a survey or marketing communication, surf the website, or use certain other site features in the following ways:

To personalize your experience and to allow us to deliver the type of content and product offerings in which you are most interested.
To administer a contest, promotion, survey or other site feature.
To send periodic emails regarding your order or other products and services.

Do we use ‘cookies’?

Yes. Cookies are small files that a site or its service provider transfers to your computer’s hard drive through your Web browser (if you allow) that enables the site’s or service provider’s systems to recognize your browser and capture and remember certain information. For instance, we use cookies to help us remember and process the items in your shopping cart. They are also used to help us understand your preferences based on previous or current site activity, which enables us to provide you with improved services. We also use cookies to help us compile aggregate data about site traffic and site interaction so that we can offer better site experiences and tools in the future.

We use cookies to:

Keep track of advertisements.
Compile aggregate data about site traffic and site interactions in order to offer better site experiences and tools in the future. We may also use trusted third-party services that track this information on our behalf.

You can choose to have your computer warn you each time a cookie is being sent, or you can choose to turn off all cookies. You do this through your browser settings. Since browser is a little different, look at your browser’s Help Menu to learn the correct way to modify your cookies.

If you turn cookies off, Some of the features that make your site experience more efficient may not function properly.It won’t affect the user’s experience that make your site experience more efficient and may not function properly.

Third-party disclosure

Do we disclose the information we collect to Third-Parties?

We sell,trade, or otherwise transfer to outside parties cookie number, ip address device serial #, unique device identifier, photo, video or audio file of child Personally Identifiable Information.

Third-party links

Occasionally, at our discretion, we may include or offer third-party products or services on our website. These third-party sites have separate and independent privacy policies. We therefore have no responsibility or liability for the content and activities of these linked sites. Nonetheless, we seek to protect the integrity of our site and welcome any feedback about these sites.

Google

Google’s advertising requirements can be summed up by Google’s Advertising Principles. They are put in place to provide a positive experience for users. https://support.google.com/adwordspolicy/answer/1316548?hl=en

Google, as a third-party vendor, uses cookies to serve ads on our site. Google’s use of the DART cookie enables it to serve ads to our users based on previous visits to our site and other sites on the Internet. Users may opt-out of the use of the DART cookie by visiting the Google Ad and Content Network privacy policy.

We have implemented the following:

Remarketing with Google AdSense
Google Display Network Impression Reporting
Demographics and Interests Reporting
DoubleClick Platform Integration

We, along with third-party vendors such as Google use first-party cookies (such as the Google Analytics cookies) and third-party cookies (such as the DoubleClick cookie) or other third-party identifiers together to compile data regarding user interactions with ad impressions and other ad service functions as they relate to our website.

Opting out:

Users can set preferences for how Google advertises to you using the Google Ad Settings page. Alternatively, you can opt out by visiting the Network Advertising Initiative Opt Out page or by using the Google Analytics Opt Out Browser add on.

Contacting Us

If there are any questions regarding this privacy policy, you may contact us using the information below.

info@codinglatte.com

How to use Angular 4 with Bootstrap 4

Maina Wycliffe — Wed, 25 Oct 2017 10:48:37 +0000

Angular and Bootstrap 4 are arguably the best frameworks out there, though will different purposes. Angular was developed by Google as a JavaScript framework while Bootstrap was developed by twitter as a CSS framework. The major huddle to using both is that Bootstrap uses jQuery. While you can use both jQuery and Angular in the same Application, it’s redundant. This is because jQuery has the lots of functionality overlapping with angular and you would end up with a bloated application.

Why use Bootstrap?

Bootstrap 4 is the most complete CSS framework out there. It has 10s of component and utilities for you to use to make your site visually appealing. If you are looking for a great example that relies on Bootstrap, look no further than twitter.

On top of the components and utilities, Bootstrap has also a theming capability. Themes give you the ability to change the look of your site without doing much coding. Bootstrap will save you hours or even days of creating CSS files for your website by giving you 90 - 95% of all the CSS code you need.

Are there alternatives to Bootstrap 4?

Of course, especially when it comes to Angular. One good alternative is Google own Material Design ui-framework. Material Design is a design language developed by Google in 2014. If you are looking for an example of material design in action look at almost all Google website like Google Drive. Its high responsive and looks great on smartphones.

The advantage of this framework is that it easy to integrate with Angular but with a somewhat steep learning curve.

How to use Bootstrap and Angular

First, I am making the assumptions that you know how to use Bootstrap. That said, if you want some nice Bootstrap tutorials check no further than the official Bootstrap documentation.

To use Bootstrap with Angular, we are going to ditch jQuery – it has not place in our application. If you are just interested in using bootstraps classes – buttons, grids, cards – then that’s it for you. You don’t have to add anything on top. But like I said before, Bootstrap is one of the most complete framework and you might want to be able to use everything it has to offer – Modal, Popover, Carrousel etc.

We are going to replace jQuery with an Angular module known as ng-bootstrap. This offers an alternative to all jQuery functionality in bootstrap with Angular directives. The goal of ng-bootstrap is to completely replace JavaScript implementation for components. Nor should you include other dependencies like jQuery or popper.js. It is not necessary and might interfere with ng-bootstrap code.

Installation and First Time Setup

Install ng-bootstrap using npm

npm install --save @ng-bootstrap/ng-bootstrap

or install using yarn

yarn add @ng-bootstrap/ng-bootstrap

Once installed you need to import our main module.

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

The only remaining part is to list the imported module in your root module and any additional application modules that make use of the components in this library. The exact method will be slightly different for the root (top-level) module for which you should end up with the code like (notice NgbModule.forRoot()):

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgbModule.forRoot(), ...],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Final Throughts

Now that you have successfully integrated ng-bootstrap with your application. To learn about how to use all the bootstrap components in Angular, follow the guide here. It has all components with examples on different scenarios and I could not have added it into this post without making it too long or too boring.

5 Must Have Tools for Angular Developers

Maina Wycliffe — Sun, 22 Oct 2017 11:25:27 +0000

Whether you are a new or an experienced Angular developer there are several useful tools to help make your life much easier. Whether you are using versions 2, 4 or 5 (To be released on 23th of this month) it is important to have the necessary tools. Here is a list of tools for angular you might want to consider:

Angular CLI

Setting up a new angular project can be complicated and rather long process. Luckily, Angular Team saw that and decided to create an official tool to help – Angular CLI. Angular CLI helps you create new project, new components, services, directives, guards among others without much work. This is especially useful to newbies trying angular for the first time or still learning their way around. But Angular CLI is more than that. It helps you build your application so that you can run it on a browser or for deployment. During this process, it will remove unnecessary code, remove comments and minify the project to make it lightweight. It will also detect errors on your code and let you correct them. I believe angular cli is a must for any angular developer, whether you are just getting started or experienced. You can learn how to install Angular CLI here.

Yarn Package Manager

Yarn is a package manager developed by Facebook for speed and is supported by Angular CLI. Package managers make it easier to manage project dependencies. Instead of manually downloading JavaScript/CSS file for that great plugin you love, you let a package manager handle that for you. Package managers will handle adding, updating and removing project dependencies.

By default, Angular uses Node Package Manager. And while it’s a capable package manager with countless packages under it, it’s not perfect. Yarn Package manager improves on node package manager by increasing its speed. It is up to 5 times faster than Node package manager. It’s also compatible with all node packages. If you are using NPM (Node Package Manager) to manage your angular packages, switching to yarn is easy. First install Yarn Package Manager into your system by following the instructions found here.

Once you have installed it, open command prompt/PowerShell/terminal and navigate to your project folder (Example: cd path/to/project/folder). Then run the following command:

ng set --global packageManager=yarn

This will set yarn as the global manager for your angular project. Then lastly, initiate yarn on your project by running yarn install command. This will create a yarn.lock file for your project from your package.json. Since yarn uses node module, your already existing dependencies won’t be re-downloaded. To install a new package, run:

yarn add packagename

(Package Name = any node package will do) You can switch back to node package manager by running the following command:

ng set --global packageManager=npm

Augury

I have been using Augury from the beginning to debug angular applications. It is a chrome extension that inspects your application on the web browser. It’s only available for Google chrome and any other browser that accepts chrome extensions (haven’t tried that). In fact, it is the most used Google Chrome Developer Tool extension for debugging and profiling Angular 2+ applications. It’s an opensource effort between Rangle.io and Googles Angular team. Augury helps visualize the application through component trees and visual debugging tools. Developers get immediate insight into their application structure, change detection and performance characteristics. It’s important to note, augury only works on projects in development mode and not in production mode. To learn more about Augury visit their official guide here.

ngRev

I came across this tool a few weeks ago and I have say am impressed. It’s a graphical user interface tool that reverses engineers your existing angular project and helps you view details about the project. It allows you to navigate in the structure of your application and observe the relationship between the different modules, providers and directives. ngRev performs static code analysis which means that you don’t have to run your application to use it. It’s available for all major operating systems: Windows, Linux and Mac, and it’s very easy to learn how to use it. Learn more about ngRev here.

Visual Studio Code

When it comes to rich text editors, everyone has his own preferences, from Sublime, Atom, Bracket, Visual Studio Code among others. What makes Visual Studio Code (VSCode) standout is how it handles typescript out of the box. It provides intellisense, error detection and correction and code formatting straight out of the box, no extensions required. This is because both the language and the text editor are both developed by Microsoft.

Angular 4 primarily uses typescript for development. Typescript is then compiled to JavaScript to run on the web browser. This makes it necessary for one to have a good typescript tool to develop angular apps while eliminating much guess work. Visual Studio code is also completely free. For me, it is one of the best text editors out there, if not the best.

Conclusion

To conclude, these are just some of the tools that can enhance ones’ development experience. If you have an idea of any tool that I left out, please be sure to comment with your suggestion below this article. If you loved this article be sure to share with your friends and if you didn’t, make your feelings known in the comment box below. Thank you and have a lovely day.

What is new in Angular 5

Maina Wycliffe — Thu, 19 Oct 2017 17:10:04 +0000

If you are a fan of Angular, there is some good news, Angular 5.0 will be released on 23th October – that’s next week. If you are wondering whether this is too soon, don’t. Google has committed to releasing a new version of Angular every 6 months. Angular 6.0 will be released next year in March/April followed by Angular 7 in September/October.

What does this mean for Angular 4 Users?

In this front, there is good news for existing users. Angular 5 has been built with backward compatibility with previous versions. You can upgrade as soon as the new version has been released without fear of breaking your existing application. This means you can enjoy the advantages of Angular 5 without spending hours upgrading your existing application.

“The primary goal of the backwards compatibility promise is to ensure that changes in the core framework and tooling don’t break the existing ecosystem of components and applications and don’t put undue upgrade/migration burden on Angular application and component authors.”

If you are moving from AngularJS to Angular4 or any version you can read the following post to learn from my own experience.

What’s new in Angular 5?

First, before we list the features, it’s important to note that the Angular team focusses on gradual improvement on this great framework we all love. That said, this are the most notable features:

Making Progressive Apps Easy to Build

If you are unaware, progressive web apps are web apps build on CSS, JavaScript and CSS that behave in some ways like native applications. The whole app is cached at the browser making it snappy and highly responsive as compared to a tradition web application. Users can add shortcuts to your web app on their application home making it easier to access. In progressive apps, internet is required only during REST API calls because the app is stored on the user browser. Angular 5 wants to make it even easier to build such apps for all devices.

A Build Optimizer to Remove Unnecessary Code

Developers are always concerned about the size of their apps. If it’s too big, it takes longer to load which affects user experience negatively. Since Angular is a large framework, at any time there could be hundreds or thousands of lines of code that your app doesn’t need. Even with the best coding practice, a single mistake can import a large chunk of unnecessary code into your application. Angular 5 is looking to improve that by trying to eliminate any unnecessary code from your application. This results into a more compact application which could improve your app performance drastically.

Making Material Design components compatible with server-side rendering

[caption id="attachment_708” align="aligncenter” width="1369”] Angular Material Design[/caption] For a good number of developers, rendering is done on the browser or the client side. But some devs would like to do the rendering at the backend or server-side. If you have a large application, it would not be prudent to send it to the browser to do the rendering because you don’t know the capabilities of the users’ device. Instead, you could do is render it in bits needed by the users and send them to the user to view. Angular 5 is extending the same to Googles own Material Design.

Performance Improvements and Bug Fixes

To put it simply, expect Angular 5 to perform way better than Angular 4 or any previous versions. Also, the advantages of a new version is lots of bugs will get fixed in the process.

Can I try Angular today?

Yes, you can try Angular 5 right away although it’s still in beta. Also, you can get the documentation of Angular 5 here. I would not advise you to use the beta version on a production app. This is because there could be unforeseen bugs which will be cleaned up before its released. That said, testing prerelease is good as you can help improve the framework before it has been released. Also, if your app is still in development, using Angular 5 can help you build a better app. Rather than waiting for it to be officially released before starting using it. Be sure to submit feedback in case of any bugs or errors.

Switching from AngularJS to Angular 4

Maina Wycliffe — Sat, 23 Sep 2017 14:03:11 +0000

It’s been almost two weeks since I decided to switch to Angular 4 for my incomplete project from AngularJS. If you have seriously considered making the switch, you know it’s a not easy. The two versions are completely different, controllers and scopes are gone, now it revolves around components and directives.

I never got to use components in AngularJS, introduced in version 1.5. The idea of using components scared the hell out of me and that was before I learned that I must use TypeScript instead of JavaScript. That almost turned me away but I made the change anyway.

I have to admit this, TypeScript is a better version of JavaScript. Most importantly, it is not that different from other languages, I like how it tries to instill discipline to JavaScript, but today it not about TypeScript, it’s all about Angular. Here are the things I have learned over the last two weeks.

Getting Started is Complicated

This seems obvious but creating a new project in angular is extremely complicated. But the folks who developed Angular knew this and provided a tool known as Angular CLI. This tool will help you create new projects, generate components, services, guards, directives among others. Unless you want to make your life exceedingly difficult, please make use of this tool.

Components in Angular are Directives in AngularJS

Yes, Angular has Directives and Components but if you are coming from AngularJS, components are more like directives. Everything you used to do in AngularJS with directives, you can do with components and more. I would not call myself an expert or claim to know the full extent of what directives can achieve in AngularJS, but with components, you get a feeling they can do more.

Forget About UI-Router, use the Angular Router

The default Router is amazing to say the least. If you have ever used AngularJS, you know the default router sucks – no offense to the developers. When I made the switch, I spent several hours trying to make UI-Router work unsuccessfully. After that I went through the documentation on angular.io and I was impressed by what the default router can do. It did everything I wanted to do with UI-router and unless you have some specific UI-router feature you want to use, then forget about it.

I still don’t know what Directives Do

It’s been two weeks, while I have read everything I can on angular directives, I still haven’t figured out a use case for my custom directives. If you know a use case, feel free to inform me in the comments section below.

Forget about Controllers and Scope

Both Controllers and Scope were jettisoned as of Angular 2. And for the two weeks I have been using Angular 4, I don’t miss them at all. They made my code messy to say the least. That’s not to say my code won’t be messy with Angular 4 but I like my chances here. Those are few things I learned from my transition since I started two weeks ago. It isn’t much but hopefully it will help someone else decide on whether to make a switch and what to prepare for.

Thank you.

Coding Latte

How to Integrate Smart Tables With Angular

Prerequisites

Smart tables with Angular

Install rxjs- compat

Installing the ng2-smart-table library

Table Creation

Back to the Backend

Instead of creating make the Table Smart

Author Bio

How to build a reusable Modal Overlay/Dialog Using Angular CDK

Demo and Source Code

Prerequisites

The Basics

Using a Template

Using a Component

Closing Modal Overlay on Backdrop Clip

Making a Re-usable Modal Overlay

Objective

Overlay Ref Class

Overlay Component

Component Class

Component Template

The Overlay Service

Usage

String

Template

Component

Additional Resources

Angular Newsletter Issue No #3 7th November 2019

1. Transloco’s New Dev Tools Make i18n in Angular Easy as Pie

2. Use the new Angular Clipboard CDK to interact with the clipboard

3. The new Angular YouTube Player component!

4. Upgrading with Angular Elements: Top Lessons Learned

5. Google Maps is now an Angular component

6. Debugging Memory Leaks in Angular

7. Exciting Times Ahead — Be Ready For Angular 9

8. Why do we have Dependency Injection in web development

9. Announcing TypeScript 3.7

10. 3 easy ways to boost your web application performance

11. Restricting Notification Permission Prompts in Firefox

12. Getting your sites ready for the new Microsoft Edge

Weekly Angular Newsletter 13th 21st October 2019

1. The Angular Team @ AngularConnect 2019 by Stephen Fluin

2. Hack for Good By Sebastian Witalec

3. Testing Asynchronous Code in Angular Using FakeAsync by Netanel Basal

4. Angular & CSS Grid: Dynamic Grid Properties by Erxk Verduin

5. From AngularJS to Angular : a 2.5 years migration journey by Aurélia Rochat

6. Wrapping CommonJS library in Angular 8 directive on the example of mark.js by Alexander Poshtaruk

7. RxJS Subjects in Depth by Giancarlo Buomprisco

8. Multiple HTTP Requests in Angular by Kevin

9. Exploring web APIs Observers — real life examples explained! By Liron Hazan

Angular Weekly Newsletter 1st to 12th October 2019

1. Understanding RxJS Multicast Operators by Netanel Basal

2. 10 Things Every Angular Developer Should Know About Zone.js By Matthias Junker

3. Using Angular CLI Schematics by Chris Engelsma

4. Speed up your App with Web Workers by Kent C. Dodds

5. Angular Cross Component Communication by Mehmet Cüneyt Dalan

6. Angular Forms Several Ways: Reactive, Nested, Across Routes by Jennifer Wadella

7. Focus First Invalid Input with Angular Forms by Cory Rylan

Implement Infinite Scrolling in a ListView - Flutter

Prerequisite

Creating a ListView

Use ScrollController to Detect Scroll Position

Final Thoughts

Additional Resource

Handling Requesting for Permissions Like a Pro in Flutter

Package(s)

Installation

Permissions

iOS permissions

Android permissions

Requesting for Permission

Checking if your App has been Given Permission

Tip

Resources

Lazy Loading Modules & Preloading Strategy in Angular 8

Prerequisite

Lazy Loading Feature Modules

Manual Approach

Import `@angular/fire` Angular Modules

Using the `Mutation` Widget

Caret Syntax (`^version`)