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.

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:

• Text interpolation
• User Input Value Change
• Clicking HTML Element
• Access Child (nested) Component
• Content projection
• Component inputs and outputs
• Component Dependencies

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…