Latest Posts

Building a Simple Responsive App with Angular Flex Layout

Building a Simple Responsive App with Angular Flex Layout

December 5, 2018
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 …

Angular Flex Layout – Introduction & Getting Started

Angular Flex Layout – Introduction & Getting Started

November 19, 2018
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 …

Building a Wrapper for Responsive Design for Angular Flex Layout

Building a Wrapper for Responsive Design for Angular Flex Layout

November 11, 2018
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 …

How to Build Custom Pipes in Angular

How to Build Custom Pipes in Angular

November 6, 2018
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 …

Angular Reactive Forms - Dynamic Form Fields using FormArray

Angular Reactive Forms - Dynamic Form Fields using FormArray

October 27, 2018
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 …

How to Modify the UI Based on User Role in Angular

How to Modify the UI Based on User Role in Angular

October 24, 2018
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 …

Deploying Angular 6 and Above Apps to GitHub Pages

Deploying Angular 6 and Above Apps to GitHub Pages

October 21, 2018
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 …

Angular CLI v7 – CLI Prompts and Generating Barebone Angular Project

Angular CLI v7 – CLI Prompts and Generating Barebone Angular Project

October 19, 2018
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 …

Progressive Web Apps (PWAs) in Angular – Part 2

Progressive Web Apps (PWAs) in Angular – Part 2

October 18, 2018
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 …

APP_INITIALIZER – Tapping into Initialization Process in Angular

APP_INITIALIZER – Tapping into Initialization Process in Angular

October 14, 2018
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, …

A Better Approach to Environment Variables in Angular

A Better Approach to Environment Variables in Angular

October 12, 2018
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 …

Creating Reusable Components in Angular

Creating Reusable Components in Angular

October 9, 2018
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 …