In this article, I will show you how to create a generic solution to Consume REST API in Angular. I will utilize Typescript Generics in combination with Angular HTTPClient service to eliminate any code redundant, be as DRY as possible, and follow the Open–closed principle.

Communicating with backend services using HTTPClient

Most applications need to communicate with a remote server over the HTTP protocol, in order to perform the basic CRUD operations. With Angular, you can use HTTPClient service to achieve this communication easily. …


In this article, I will use angular animations to give life to the navigation menu. I will use two types of navigation menus, dropdown, and sidebar. For both, I will animate the menu and the menu items.

Dropdown Navigation Menu:

I will start with the simpler example, the dropdown menu. In this animation, I will not use reusable animation, for simplicity reasons. However, I will use reusable animation In the sidebar menu example bellow.

For this example, I will give the menu element an expand/collapse effect, by animating its height from 0px to the full height when opening the menu, and from the…


In this article you can find some selectable tips that help you to optimize your angular application, I hope you benefit from them in your projects. Let's start.

Critical CSS Inlining:

This is a new and cool feature. During the build process, Angular will parse the CSS selectors and try to find a match against the rendered page. Accordingly Angular will decide if that style is part of the Critical Path, and will inline those styles in the HTML. Enabling this feature will improve the First Contentful Paint metric of your page.

You can enable the critical CSS inlining by adjusting the optimization


In this article, I will use Angular Universal to server-side render a sample web application. This would help to improve the user experience and will boost Core Web Vitals scores. At the same time, I will show you that just enabling server-side rendering, without taking any further steps, can negatively impact those Core Web Vitals, and especially CLS.

User Experience and Core Web Vitals Optimization — Angular Universal.
User Experience and Core Web Vitals Optimization — Angular Universal.

Core Web Vitals and CLS To Measure User Experience

Before we start, if you like to know more about Core Web Vitals, you can visit this page https://web.dev/vitals/. Next, I am providing a brief definition as they appeared in that article.

Web Vitals is an initiative by Google to provide unified…


In this article, I will provide a collection of some important statements used to unit test Angular components. You can use any of the following examples directly in your project, or you may prefer to extract some of them into separate helper functions and reuse them all over your project. This article covers testing the following scenarios:

For this purpose, lets assume we have the following simple example component generated using Angular CLI ng g c ExampleComponent:

A…


In this story, I will show you how to create a custom form control that will integrate with Angular forms API and can be used in both template-driven and model-driven form the same way any native form control is used(e.g <input type=”text” ../>).

For this purpose we will create a simple color picker component and turn it into a valid reusable form control, after we complete this implementation, you will be able to use your newly created form control in any template-driven or model-driven forms as the following:

Template Driven Approach:

<color-picker [(ngModel)]=”color”></color-picker>

Model-driven approach (reactive forms):

<color-picker [formControl]=”color”></color-picker>

<color-picker…

Nichola Alkhouri

Senior Front-end Engineer with a passion for Angular

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