How to write tests for Angular validators.
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.
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.
Create a new file which will contain your interceptor. I named mine
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..
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
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. …
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
Multiple components make our application more reusable, but how do we communicate between them?
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
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…