Photo by Barn Images on Unsplash

Introduction 🤔

Automation is awesome! It allows us to increase our productivity and achieve more in shorter amount of time. Thus, this article will teach you step-by-step how to install and use tools that automate processes which leave our limited attention span to focus on solving real challenges!

More specifically, we are going to learn how to:

Photo by zero take on Unsplash

When we create a new Angular project, by default Angular CLI creates two environment files for development and production.

But in real world software development workflow, we may need more custom environments (e.g. staging, qa). Moreover, there are some environmental variables that are common between these environments. For example, API URL to fetch data from server. Thus, we must find a way to share the base settings across all environments and override them as needed.

In this article, we are going to learn:

Create a custom environment 💎


The Problem

Interactive web designs require elements with dynamic height that depends on their location in the window viewport. More specifically, their height starts at the top offset position of the element inside the window and ends at the end of the window. In this article we will try to implement dynamic height using Angular directives.


Create New Angular Directive

First of all, we create an Angular directive by injecting the the native element from ElementRef.

Calculate Top Offset Of The Element

Nikos Anifantis

Full Stack Engineer. #Development addict. Enthusiast in #WebDev.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store