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.
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
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.
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:
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:
Model-driven approach (reactive forms):
Senior Front-end Engineer with a passion for Angular