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.
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.
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.
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