How to write tests for Angular validators.
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.
Spec file
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
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
Interceptor
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…
How to avoid circular dependency.
Angular provides us an easy way to dynamically create components but sometimes there’s..
Problem
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.
Circular dependency warning
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. …
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?
Services are singletons
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?
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…
