Read System Environment Variables in Angular

A few weeks back I was working on a project where I needed to read system environment in Angular 7 from a Docker container before it builds. After days of searching, I came across a solution from multiple sources on the internet. Keep one thing in mind, you will only be able to inject environment variables before your Angular app builds. Unlike Nodejs, you will not get real time access because you are running in an browser environment.

Angular 4 input only numbers Directive

I was working on a project in Angular 4 and needed to implement input fields that only accept numerical values. My first thought was to simply add the HTML5 type=”number” to the input. Unfortunately, this isn’t supported in Internet Explorer 10 and some of the clients would most likely be using Internet Explorer 10. My only other option was to implement a directive. Thanks to this StackOverflow answer, I was able to modify it to my needs.

Implementing Token Interceptor and Retry in Angular 4

If you are building a web application using Angular 4 or Angular 5 there’s a good chance that you might be working with JWT tokens. Luckily, implementing token interceptor and retry in Angular 4 and beyond is very easy thanks to the new HTTP Interceptors. Using this, we can add an authorization header to every outbound request while also implementing a retry mechanism for requests that fail due to an expired token.

Implementing Token Interceptor and Retry in Angular 4

If you are building a web application using Angular 4 or Angular 5 there’s a good chance that you might be working with JWT tokens. Luckily, implementing token interceptor and retry in Angular 4 and beyond is very easy thanks to the new HTTP Interceptors. Using this, we can add an authorization header to every outbound request while also implementing a retry mechanism for requests that fail due to an expired token.

Subscribe to variable change in Angular 4 Service

If you want to subscribe to variable change in Angular 4 service or Angular 5 service, you can use something called the BehaviorSubject from the rxjs library. A behavior subject is like an observable, except that it must be created with an initial value as it is must always return a value even if the subject hasn’t been updated. A behavior subject will always emit it’s first value as soon as it’s described.