Image for post
Image for post

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 Next, I am providing a brief definition as they appeared in that article.

Web Vitals is an initiative by Google to provide unified…

Image for post
Image for post

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:


Image for post
Image for post

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>


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