DEV Community: Nichola Alkhouri

Generic Approach to Consume REST API in Angular

Nichola Alkhouri — Tue, 16 Mar 2021 18:51:32 +0000

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. As an example, if you need to manage the Posts of your blog, you may have the following service to handle all the operations on the Post resource:

This solution is simple and clean, and it even follows the best practices according to the official Angular Documentation. However, applications usually have many resources to manage, for our example, we may have users, comments, reviews, etc. Ideally, each of these resources should have a separate service to handle CRUD operations and communicate with the server, at the end we will have UserService, CommentService, ReviewService. Let's take a look at how the CommentService would look like:

The Problem

Although the above implementation is very common and widely acceptable, it suffers from two cons:

Code redundant (breaking of the DRY principle): If you compare the PostService and the CommentService you will notice how redundant the code is.
Changes in the server-side, or changes in the way to communicate to the server, require changes in many files (in our case we need to change both PostService and CommentService files)

Typescript Generics To The Rescue

To solve the above issues let's go ahead and build the following abstract class which will be the base of all the other services:

The new service class is abstract, which means it can't be instantiated and used directly, but it needs to be extended by other classes.
We provide one abstract method getResourceUrl, The class which extends this abstract class must implement this method, and return the URL of the resource as we will see in the following section.
This is a Generic Class, it is not tied to a specific type, rather the class which extends this abstract class will define the exact type used.
It has all the needed CRUD operations which we need and used before in the previous service.

Now after we have our abstract generic class, whenever we need a new service we can simply extend this class and implement the only one abstract method getResourceUrl. so the PostService and CommentService will be as the following:

Server vs Front-end Model

In most applications, the front-end model doesn't match %100 the server-side model. In other words, the REST API will respond with json object that doesn't match exactly the interface or the class defined in the front-end application. In this case, you need a mapping function to convert between server and front-side mode. This sometimes referred to as serializing/deserializing.

So, let us extend our base class to provide this mapping functionality. To do so I updated the ResourceService to look as the following:

I added two new methods:
- toServerModel: to convert from the Front-end model to the Server Model, It accepts the resource generic type T and return any (json)
- fromServerModel: to convert from the Server model to the Front-end Model, it accepts a parameter of the type any which represent the server response, and return the generic type T
I provided a default implementation for both of the two methods toServerModel, fromServerModel, so in case no mapping needed, the same object returned by the server will be used as a front-end model. Also since I added a default implementation, the consumer of this service doesn't have to override or even implement these two methods at all.
In both getList and get methods, I am using the new method fromServerModel, to map the server response to the front-end Model.
In both add and update methods, I am using toServerModel to map the front-model to the server model before posting the data to the server.

Now to consume the new changes we have two cases:

There is no mapping needed between the server and the front-end model, in this case, we don't have to change anything in the class that extends the resourceService.
There is some kind of mapping needed between the server and the front-end model, all we need to do is to override toServerModel and fromServerModel models in the derived class to address our requirement mappings. For example let's assume, that the PostsService implemented previously needs to map from timestamp to a js Date object, the PostsService implementation would look like the following:

Conclusion:

To communicate with a server using the HTTP protocol, you need to use the Angular HTTPClient service. In this article, we implemented a generic extendable solution to allow us to achieve this communication. Our solution is clean, DRY, and follows the Open–closed principle. We utilized Typescrip Generics, Generic Classes, and we even took into consideration a required mapping between server and front-end model.

Easy Menu Animation Effects with Angular Animations

Nichola Alkhouri — Mon, 01 Mar 2021 21:07:22 +0000

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.

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 full height to 0px when closing. I will also animate each element with a fading effect and a slight transform on the Y-axis. Additionally, I will add a small delay for each menu item animation.

You can find the final code of this animation in this blitz:
https://stackblitz.com/edit/drop-down-menu-animation

Here you can see the code for this animation:

The animation consist of two transitions :enter and :leave, these two aliases are used to target the menu element when it enters and leaves the view, you can find more about these two aliases in the official documentation.
For :enter trigger, I first define the initial style of the menu { height: 0, overflow: "hidden" }. Then query each menu item and give it an initial style as well { opacity: 0, transform: "translateY(-50px)" }.
Then I am using the sequence function to run two animations one after another, you can find more about the sequence function in the angular animations official documentation.
The first animation in the sequence function is the expanding effect of the menu animate("200ms", style({ height: "*" })).
The second animation in the sequence function is the effect of each menu item, for this animation first I am querying each menu item query(".menu-item", [. then I am using the stagger function to create a timing gap between each queried item, and animate each menu item by fading it in, with fixing its position on the Y-axis animate("400ms ease", style({ opacity: 1, transform: "none" })).
For the :leave trigger, I am doing the exact same thing as the :enter trigger, but with a reversed order.

Sidebar Navigation Menu:

For this example, I will make things a little bit more complex but more flexible. I will make the animation reusable. In other words, I will provide some inputs that the consumer of the animation can pass to configure the animation.

You can find the final result of this animation in this blitz:
https://stackblitz.com/edit/side-menu-animation

And the code bellow:

Very similar to the previous example, I use both :enter and :leave triggers, set the initial style of both the menu and the menu items, animate the menu then query and animate each menu item with a timing gap.
One difference is the animation itself, in this example, I slide the menu container from the left side of the view, and then we do the same for each menu item with a slight delay.
Also in this example, I used the function animation which allowed me to create a reusable animation (more about reusable animations here), and define some inputs which can be replaced during the runtime of the animation. When using the function animation to create reusable animation you have to use the function useAnimation to import the animation into your component.

Resources

Angular Animations Official Documentation: https://angular.io/guide/animations
Reusable Animations:https://angular.io/guide/reusable-animations
In-Depth guide into animations in Angular by William Tjondrosuharto: https://indepth.dev/posts/1285/in-depth-guide-into-animations-in-angular

Angular Custom Form Control — Simple Color Picker

Nichola Alkhouri — Tue, 23 Feb 2021 09:14:11 +0000

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 formControlName="color"></color-picker>

You can find the full source code in this Blitz, or embedded at the end of the Article

https://stackblitz.com/edit/custom-form-field-color-picker?embed=1&file=src/app/app.component.html

Creating a new component

Let's start by creating a new simple component as the following:

A very basic component:

We have a list of predefined colors named colors, we iterate over each one of these colors in the view and render a div with a background of that specific color.
We also define a variable selectedColor which holds the value of the selected color.
The user can select a color by clicking on it, this will trigger the method colorClicked which in turn will assign this color the variable selectedColor
On the template, we add the CSS class selected to the div of the selected color.

Simple but yet not useful in the contexts of a form, there is no way this component can communicate with the surrounding form to inform it of any change in the selected color, and vice-versa there is no way for the form to pass the component a specific color to be selected.

To fix the above communication problems, let's turn this component into a valid angular form control. To do so we have to do two things:

We need our component to Act as angular forms API expect it to. To do so we need to implement the ControlValueAccessor interface in the new component.
We need to make our component Visible to angular forms API, and we do so by providing our component using the NG_VALUE_ACCESSOR injection token.

Turning our component into valid Angular custom form control

1- Implementing ControlValueAccessor Interface

To enable angular forms API to interact with our custom form control, we need to implement the ControlValueAccessor interface, If you take a look at Angular source code on github here you can find this description of the ControlValueAccessor interface:

Defines an interface that acts as a bridge between the Angular forms API and a * native element in the DOM.
* Implement this interface to create a custom form control directive * that integrates with Angular forms.

This interface consists of the following methods which will implement each of them in our component:

WriteValue: the forms API calls this method whenever the value of the model linked to this control is changed programmatically. In other words this is how Angular telling our component that somehow the value of the form has been changed and we need to react to this change in our component. The method provides us with the new value in its only parameter obj, and we need to update the UI accordingly, here we only need to assign the new value to the selectedColor property of the color picker component.

writeValue(obj: any): void {
  this.selectedColor = obj;
}

registerOnChange: this method provides us with a way to communicate in the opposite direction, as we saw WriteValue will notify our component of the changes from the outer form, now we need a way to notify the outer form of the changes from inside our component UI (in our case user clicking on a new color). This method provides us in its parameter with a callback function fn that we should call whenever the value is changed in the UI, to do so we need to save the callback function in a variable, and we use it whenever the user clicks on a new color.

private _onChange: any;
registerOnChange(fn: any): void {
    this._onChange = fn; // Save the callback function
}
colorClicked(color: string) {
    this.selectedColor = color;
    this._onChange(this.selectedColor); // Call the saved callback
}

registerOnTouched: this method is similar to registerOnChange, it provides us with a callback function to notify the form when the current form controlled is touched, usually, when using an input field, we call the callback on blur, in our example, we consider that the control has been touched once we select any new color.

private _onTouch: any;
registerOnTouched(fn: any): void {
    this._onTouch = fn;   // Save the callback function
}
colorClicked(color: string) {
    this.selectedColor = color;
    this._onTouch(true); // Call the saved callback
}

setDisabledState: the last method to implement, the forms API will call this method whenever the status of the control changes from or to disabled, we are expected to interact on this change and to disable the selection of colors in our component, so we will always save the value returned from this method.

private _isDisabled: boolean;
setDisabledState?(isDisabled: boolean): void {
    this._isDisabled = isDisabled;
}

2- Providing our component using the `NG_VALUE_ACCESSOR` injection token

So far our new component is ready to integrate with Angular forms API, however, one more step is still necessary to allow forms API to recognize our component as a valid form control and interact with it (this interaction is possible because we implemented ControlValueAccessor interface in the previous step).

Before we start let’s take a look at the source code of Angular official FormControlDirective which is responsible for linking our component with the form, and try to understand how this directive builds this link, by looking at the constructor of that directive we find the following:

constructor( ...
    @Optional() @Self() @Inject(NG_VALUE_ACCESSOR) valueAccessors: ControlValueAccessor[],
...) {...
    selectValueAccessor(this, valueAccessors);  
}

Notice the directive is injecting a token NG_VALUE_ACCESSOR and expect it to provide a list of ControlValueAccessor (the interface we have just implemented). then this value is being saved and used internally.

What does this mean to us? this means that if we wanted FormControlDirective to recognise our component and interact with it, we need to provide our component using the injection token NG_VALUE_ACCESSOR and to do so we just need to update the options of the Component decorator to be as the following:

We configure the component injector using the injection token NG_VALUE_ACCESSOR.
Then we provide our newly created component ColorPickerComponent.
After that we use forwardRef (more about forwardRef), we do so here because at this point our class is not defined, this function allows us to refer to our component even before we define it.
Then we use multi:true to specify that this is one of many other configurations of the same token that could exist on the same element, also this is necessary since it makes the injector returns an array of instances, which is the exact type FormControlDirective expects in its constructor.

Now our custom form control is ready to be used in any template or model-driven form, we can use it for an example in our AppComponent as the following:

We define a formGroup with two controls title and color, and we add an HTML form element with the directive formGroup.
The title is just a simple native input, and the color is our newly created color picker component.
We use formControlName to link the controls to our form.
In the end, we are printing the value of the form to confirm that everything is working correctly when we change the form input values.

The final result will be as the following after adding some styling:

Thank you for reading! and remember, never stop learning :)

References

forwardRef function, Angular official documentation https://angular.io/api/core/forwardRef.
ClassProvider, Angular official documentation https://angular.io/api/core/ClassProvider.
Basics of reactive forms, Angular official documentation https://angular.io/guide/reactive-forms

Angular Components Unit Test – Common Use Cases

Nichola Alkhouri — Thu, 18 Feb 2021 22:16:41 +0000

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 very basic component consists of one input header and one property name displayed in the template using a direct interpolation, a form with one input field and a submit button and one output nameChange which will emit an event when the user submits the form.

When you create the above component using Angular CLI you will get automatically a unit test file in the same directory as your component. All the next sections in this article are based on this file, especially the fixture object let fixture: ComponentFixture;. If you don't use Angular CLI to generate your component file, you may copy the above file in your project, and replace ExampleComponent with your component class name.

Text interpolation:

Here we make sure that our component will bind the correct values in the template. Don't forget to call fixture.detectChanges() which forces the TestBed to perform data binding and update the view.

User Input Value Change:

Here we test that the user interaction with the text input is reflected correctly into our component class. Notice here the use of fakeAsync and tick, because the forms binding involves some asynchronous execution.

Clicking HTML Element:

Access Child (nested) Component:

Lets assume that our component contains a nested child component:

<app-nested-component></app-nested-component>

You can access the child component and interact it as the following:

Content projection:

Testing content projection is not straightforward, to do so we need to add a wrapper component around the component being tested and use this wrapper component to pass content through projection. Let's add the following projected content to the view of our component

<div class="projected-content> 
    <ng-content select="[description]"></ng-content>
</div>

And we can test is by adding a wrapper ExampleWrapperComponent as the following:

Component inputs and outputs:

You can test component input similar to any normal component property. on the other hand the outputs can be spied on and check if it emits the correct value.

Component Dependencies:

Components usually have dependencies (services) that help the component to function correctly, and the component needs to interact with these dependencies. When testing a component we need to provide our tests with those dependencies in order to run correctly. Here we need to distinguish between two way of providing a dependency:

Dependencies provided in the root injector:

When the component has a dependency on a service that is provided in the root injector, you need to provide this service to the TestBed configuration to be available to the component while running the tests:

Notice that we are using a mock service here since it is easier and safer to interact with. After that, you will be able to access that service in your tests by calling the inject method of the TestBed.

Dependencies provided in the component injector:

When you have a dependency provided in your component, you can not access it using the TestBed, since it will be available only on the component level of the injection tree. In this case, we need to override the component providers to provide this dependency, and then you can use the component injector to access it.

Do you have or need a specific testing scenario that is not covered by this article? Feel free add it in the comments sections and we will add a use case for you :)

Optimizing Angular Applications

Nichola Alkhouri — Fri, 12 Feb 2021 20:35:03 +0000

In this article you can find some selectable tips that help you optimize you angular application, I hope you benefit from it in your projects. Lets 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 improving the First Contentful Paint metric of your page.

You can enable the critical css inlining by adjusting the optimization browser builder option in angular.json file:

"optimization": { 
  "styles": {
    "minify": true,
    "inlineCritical": true // enable critical css inlining
  }
}

If you are using Angular Universal to SSR your application, and want to enable Critical CSS Inlining, you need to enable it in server.ts file

  server.engine('html', ngExpressEngine({
    bootstrap: AppServerModule,
    inlineCriticalCss: true
  }));

Font Inlining

This is another way to improve the First Contentful Paint. You can enable this optimization option If you are using a google font, angular will then inline the google font in the index.html file. This will save you one extra request that the browser needs to do in order to get and render the font.

You can enable the font inlining also from the optimization browser builder option in angular.json file:

"optimization": { 
  "fonts": {
    "inline": true,// enable font inlining
  }
}

You can learn more about the Critical Css Inlining and Font Inlining here https://angular.io/guide/workspace-config#styles-optimization-options.

Use OnPush Change Detection Strategy

This strategy prevents angular from running change detection on the entire component subtree, which leads to faster execution. You can enable OnPush change detection in the Component configuration metadata by changing the changeDetection property as the following:

@Component({
    selector: 'my-company',
    templateUrl: './my-company.component.html',
    styleUrls: ['./my-company.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
})

This will deactivate the automatic change detection for this component and its child directives, but keep the possibility to the change detection to be explicitly invoked. The only three cases where angular run change detection on your component in this case are :

One of the component @output references has been changed.
Any Dom event from within the component or one of its child directives.
Explicitly triggering change detection.

Here you find two in detail article about OnPush change detection:

https://netbasal.com/a-comprehensive-guide-to-angular-onpush-change-detection-strategy-5bac493074a4

https://blog.angular-university.io/onpush-change-detection-how-it-works/

Server Side Rendering with Angular Universal

In a previous article I used Angular Universal to server-side render a sample web application in order to improve the user experience and boost Core Web Vitals scores.

By default, Angular applications are rendered client-side. In other words, the browser loads all the application javascript files, bootstrap the application, made the necessary API calls to get the data to be displayed, and then render the final page. While Angular Universal will execute the application on the server-side, generate a static HTML which will be passed to the client to directly render it to the user. After that, the browser will load the javascript files and re-hydrate the application on the client-side. As a result of this, the application will be rendered much faster, and the user will be able to see the rendered page earlier.

You can find a full details on how to enable and use Angular Universal here https://angular.io/guide/universal

Use Lazy Loading

Modules Lazy Loading

By default, all your Angular code is shipped to the client in one bundle. This bundle could grow in size as you keep adding new features to your application. Luckily Angular supports the ability to lazy loading part of your application. This will improve the initial loading of your application, and so the Largest Contentful Paint (LCP). In meanwhile Angular supports lazy loading through routing. Which means you can lazy load parts of your application as long as it has a separate routing.

You can find more in details about how to lazy load your angular modules in the official Angular documentation https://angular.io/guide/lazy-loading-ngmodules

Components Lazy Loading

With the new Ivy renderer, it is now possible to lazy load Angular Components, which is a great feature. However, it requires some exatra manual work to do it, especially when your component contains some child directives or child components.

Here you can find a great article on how Components Lazy Loading works https://johnpapa.net/angular-9-lazy-loading-components/

Use the available tools

Finally, there are a bunch of tools you can use to measure the performance of your application, which is the first step in the optimization process. Many of these tool also provide you with suggestions on how to fix potential issues in your applications. Probably the most important of these tools are:

Lighthouse: an open-source project, shipped with chrome dev tools, with the aim to improve the quality of web pages.
PageSpeed Insights: an online tool to generate a performance report of a page on both Desktop and Mobile devices, and provide you with a wide range of suggestions on how to improve and fix the existing issues.

User Experience and Core Web Vitals Optimization – Angular Universal.

Nichola Alkhouri — Sun, 07 Feb 2021 16:23:44 +0000

This article was originally published here

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 want to know more about Core Web Vitals, you can visit this page https://web.dev/vitals/. I will provide a brief definition as they appeared in that article.

Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web. Philip Walton

Core Web Vitals are the subset of Web Vitals that apply to all web pages, should be measured by all site owners, and will be surfaced across all Google tools. Each of the Core Web Vitals represents a distinct facet of the user experience, is measurable in the field, and reflects the real-world experience of a critical user-centric outcome.
Philip Walton

From above, Core Web Vitals help us to measure and optimize the User Experience of our web application. I will focus in this article on one specific signal of those Vitals, the CLS (Cumulative Layout Shift).

CLS measures the "Visual Stability" of the web application, It reflects how stable your page is, and is affected by the sudden movement or the unexpected changes of the content which happen while the user is reading through. The ideal value of CLS is below "0.1". You can find more about CLS in this article https://web.dev/cls/.

Simple Application Without SSR

Let's first create a simple Angular client-side rendered application, our application will have only one functionality, it will fetch an Article from the server, and then display the articles in the view. We create the application by running:

ng new cls-measuer-app
```


Now lets update the app.component.ts, app.component.html to be as the following:


  


<ul><li>In <code>AppComponent</code> we have an observable <code>article$</code> which will hold the article object to be displayed.</li><li>In <code>ngOnInit</code> we assign to the return value of the <code>getArticle()</code> method to the property <code>article$</code>.</li><li><code>getArticle()</code> simulates an API call to fetch the article data from the server. It returns a mocked <code>IArticle</code> object from a json file with a delay of 500 ms. Notice here that the content of the article should be big enough to fill the entire page. This is essential to simulate a real-life example of an article.</li><li>We define <code>IArticle</code> interface, with the properties title, body, and imageUrl.</li><li>In the template, we subscribe to the <code>article$</code> using the async pipe, once resolved we display the data from the returned article object. It is important to specify the <code>height</code> property of the image. Otherwise, it will have a very big negative impact on the CLS value.</li><li>We display a loading indicator while the article is still loading.</li></ul>

<p>Once we serve and browse the application we will see the header, the footer, and a loading indicator. After half a second the article content would have been loaded and the loading indicator will be replaced with the article content.</p>

  
  
  Measure Core Web Vitals


To measure the CLS, I am using Web Vitals Chrome extension. I will run the application in production mode and trigger the measuring which will give me the following  results:



Notice the value of CLS (0.122) which is higher than the ideal value (0.1). This means that we are not providing a good user experience in our application. The reason behind this is that we are replacing the loading indicator with the article content. This is considered an unexpected change of content and add a negative impact on the CLS signal.

Luckily this problem is fixable in Angular applications. The solution is to avoid this shifting in the content by providing the final state of the page (after the article is loaded) as fast as possible to the user. We can do so by rendering the page on the server-side using Angular Universal.

<hr/>

  
  
  Server-side rendering (SSR) with Angular Universal to Improve User Experience


Now we will start solving the above problem. We start by adding Angular Universal to our application to allow server-side rendering of the initial page load. So let's run the following command:

ng add @nguniversal/express-engine



<p>This will prepare the project, installs universal/express-engine, and creates the server-side app module and many other files, you can find more about this command and the files it generates in the <a href="https://angular.io/guide/universal"&gt;Angular official documentation</a>.</p>

<p>At this point our application supports server-sider rendering, and you can double check this by serving the application using:</p>

npm run dev:ssr



open the browser and navigate to the application url, you will now notice that article content is being displayed immediately.

  
  
  That Is Not Enough


<p>Now our application is server-side rendered and is providing the user with the content of the page in no time. However, we still have a problem here. When you run your application, even though you see the Article content immediately, you will notice after a small period of time that the loading indicator will flicker for a moment, and the article content fills the page again. This is a result of the following sequence of execution:</p>

<ol><li>Angular Universal will render the application on the server-side and send the final HTML to the client.</li><li>The client receives the rendered HTML and displays it immediately to the user.</li><li>The browser loaded all javascript files and re-hydrated our application. After that, the application triggers the article loading process and displays the loading indicator and replaced the indicator with the article content when the loading is finish.</li></ol>

<p>If we tried to measure the CLS at this time, the result will be event worse than before. First we build our application:</p>

npm run build:ssr



Then lets serve it:

npm run serve:ssr



Now we run the application and takes the measurements again, and her is the result:



Notice that CLS is now (0.168) which is higher than the previous value before enabling SSR. In other words, by enabling SSR we made things even worse than before, fortunately, there is a solution for this problem.

  
  
  TransferState to the rescue


<p>The main reason for the problem we are facing is that our application is loading the article twice, once on the server-side, and then again on the client-side after the browser re-hydrated the application. To fix this we can use <code>TransferState</code>, and by definition TransferState is:</p>

<blockquote class="wp-block-quote"><p>A key value store that is transferred from the application on the server side to the application on the client side.</p><cite><a href="https://angular.io/api/platform-browser/TransferState"&gt;Angular Official Documentation</a></cite></blockquote>

server fetched from the API, and pass it to the client-side application, so we don't have to call the server again on the client-side, to do so we implement the following changes:</p>


  


<ol><li>We imported <code>BrowserTransferStateModule</code> in the <code>AppModule</code>, and <code>ServerTransferStateModule</code> in <code>AppServerModule</code> since the TransferState service is provided within these modules.</li><li>We check if the application is running on the server-side <code>if(isPlatformServer(this.platformId))</code>, we load the article from the API, and we store it in the transfer state <code>this.transferState.set(this.stateKey, article)</code>.</li><li>If the application is running on the client-side, we check if the <code>transferState</code> has a value from the server <code>this.transferState.hasKey(this.stateKey)</code>.</li><li>If the <code>transferState</code> has a value, we use it directly, otherwise, we reload the article from the API.</li></ol>

<p>And thats it, lets build and serve our application again, and measure:</p>



And now CLS is down to 0, and that is because the content of the page is never change after the initial rendering. 

Overall, if you want to boost your SEO, don't just enable Angular Universal in your application and assume that server-rendering your pages will solve all your SEO problems. Enabling Angular Universal is only the first step. You need to take further steps to make sure that your application is working as intended. and don't forget to measure first then change and compare.