How to write tests for Angular validators.

Photo by Arian Darvishi on Unsplash

Example

While creating application I often create my FormGroups inside dedicated services then they are easier for unit testing. In this example it will be FormService. It is simple service with injected FormBuilder and one method called createForm which builds form.

If you use ng g service form you should receive second file with .spec.ts extension. Otherwise create one by yourself.

In this example I injected FormBuilder to my service so I need to add this service as provider to my testing module. Now basic test should be created should pass.


How to show loading status by intercepting HTTP requests

Photo by Keith Johnston on Unsplash

When building an application, one key feature is to show the loading status for HTTP requests.

In this piece, I’ll walk you through how to use an interceptor to intercept all HTTP requests.

There are several approaches to showing the loader, such as doing it dynamically or using structural directives. I will show you both using NGXS store to retrieve the loading status.

Store & Interceptor method

Create a new file which will contain your interceptor. I named mine loader.interceptor.ts.

As you can see, we are dispatching two actions in the interceptor. Before our request, we are dispatching ShowLoaderAction, and when it is…


Source https://unsplash.com/photos/fSWOVc3e06w

How to avoid circular dependency.

Angular provides us an easy way to dynamically create components but sometimes there’s..

Let’s assume we have two components and service to dynamically render components. Render service have method called render. Which accept component type as argument for example OneComponent.

Component one is using our service to render component two and component two is using our service to render component one.

It’s happening because component one is importing component two while component two is importing component one. Mess, right?

Recently I discovered a pretty funky way to solve this problem. …


Source https://unsplash.com/photos/Koxa-GX_5zs

What’s forRoot method?

Using many libraries we often see something like LibraryModule.forRoot() when we importing library module inside main module (mostly AppModule). Why and how we can implement this inside our projects?

Inside module there’s only one instance of service. Thanks to that in all components which use given service we have the same data. Yes! But only when we don’t use our service inside several feature modules.

If we start using service inside multiple feature modules it seems that service is created many times. That’s something we do not want (sometimes).

For example let’s take ngrx/store. We use forRoot


Multiple components make our application more reusable, but how do we communicate between them?

Source https://unsplash.com/photos/6bKpHAun4d8

Passing Data to a Component

We want to use the @Input() decorator from @angular/core to pass data to a component from the parent. Let’s review a simple example to see how this can be accomplished.

To begin, we need to create a new component ng g c name_of_your_component, I named my component first, then import the @Input() decorator and create a name variable:

Our first.component.html should look like this:

We can use our component in app.component.html, but what about the name variable? We can pass data to the component…

Angular developer currently working for the second biggest Bank in Poland.

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