One of my biggest frustrations with using Angular in a continuous-integration/continuous-deployment (CI/CD) pipeline is the lack of flexibility when dealing with environments outside of the Angular CLI. Out of the box, the Angular framework does come with environment support. For example, you'll find the environment.ts file useful when working against development and building for production….
A ViewChild is a reference to a component, directive or element within the template of the current component. We can use the @ViewChild() decorator to access the child component from the parent component. When to use the @ViewChild decorator? Often you might see template references being used to access elements directly. For example, the #name…
Chances are that your single-page application built with Angular retrieves data from an API endpoint, and the endpoint is protected. One of the easiest and most simplest forms of protection may be an Api-Key which needs to be added to the header of every request to this endpoint. Without delving deeper in to the pros…
One of the key reasons I like Angular is because it comes with all the bells and whistles (unlike some other SPA JavaScript frameworks). I like rapidly prototyping applications with minimal setup and configurations which I was I massively appreciate being able to run ng new myApp and end up with a zero-configuration-needed Angular application…
The release of Angular 6 brought improved support for TypeScript, and the July release of VS Code brought support for TypeScript v2.9.2 by default. However, since updating, some users developing Angular applications for work have discovered a bug where IntelliSense imports have stopped using path masks. The issue is particularly prevalent when creating a new…
The biggest buzzwords in the Angular scene right now are actually concepts made mainstream by React: Application state or store using a Redux pattern. NgRx is a fantastic library which allows Angular developers to use a Redux store to maintain application state. It’s really powerful, and integrating it with @ngrx/effects or metaReducers as well as…
The biggest buzzwords in the Angular scene right now are actually concepts made mainstream by React: Application state or store using a Redux pattern. NgRx is a fantastic library which allows Angular developers to use a Redux store to maintain application state. It’s really powerful, and integrating it with @ngrx/effects or metaReducers as well as…
Since I couldn’t find any resources on Angular 5 app structure with multiple modules, I decided that whilst rebuilding an AngularJS app, I would implement a multiple-module architecture and document it. Later, I updated the architecture to be compliant with the Angular 6 major release. Below is the approach I took, with some justifications for…
Feature toggles in systems which are heavily user-interface orientated can be a challenge. So far, I haven’t found a way to use them effectively without clogging up my code with if statements. But, if you build an Angular app and follow a router-based architecture, then you can make good use of an unconventional feature bundled…
The environment.ts files provided by the Angular CLI starter are used at compile-time. This post shows how to define custom environment variables when are determined at run-time without having to re-compile your application.
This post will explore how to disable a form <input> based on the input value of another form field in an Angular application. This is particularly useful if you are using Angular’s Reactive Forms to handle user input, validation and model building before submitting to an endpoint. If you have used Reaactive Forms previously, you…