A complete guide to the strategy of detecting changes Angular onPush

A complete guide to the strategy of detecting changes Angular onPush
 
Default strategy for detecting changes
 
By default, Angular uses
ChangeDetectionStrategy.Default
change detection strategy.
 
ChangeDetectionStrategy.Default
works in such a way that every time something changes in our application, as a result of various user events, timers, XHR, promises, etc., detection of changes will be launched across all components.
source code :
 
private _updateLatestValue (async: any, value: Object): void {
if (async === this._obj) {
this._latestValue = value;
this._ref.markForCheck ();
}
}

 

Angular calls markForCheck () ...

+ 0 -

Angular: ngx-translate lifhaki

Good day.
 
In the near future I plan to publish a little ngx-translate lifhak.
 
 
In the first part zaoverradim TranslateCompiler to teach him how to compile pipes inside our json files. By the way, here is the link for an excellent pluralgender etc. compiler which works with ngx-translate.
 

Our task is to write our TranslateCompiler, which will be able to execute pipes inside ngx-translate localizations.
 
Let's start with the preparation of DI (because we will take the pipes from Injector), and initialize ngx-translate.


 

Add the right pipe in the providers of the ...

+ 0 -

Update Angular to the 6th version in the project without using CLI

In this article I will talk about the thorny way of updating Angular with the custom Webpack config, which our team had to go through a week ago. Perhaps our experience will be useful to those who use Angular with their Webpack config, and the rest is interesting as an illustration of where a modern frontend can go and how to live with it.
 
 
Update Angular to the 6th version in the project without using CLI  
 
Our team is working on the interface BILLmanager 6 . So that you had a general idea of ​​the project before the update, I will report that the number of files in it has already exceeded 67 thousand. Architecturally, there are two subprojects: the registration ...
+ 0 -

Authentication on Angular and Spring without Spring Security (client on Angular)

Part 1. Customer on Angular
 
What is this article
 
In this article, I'll discuss how to write simple authentication without the help of ready-made solutions for this task. It can be useful for beginners who want to write their AAA (Authentication, Authorization, and Accounting). Client repository on Angular and Server repository on Spring .
 
In this article, I'll do the excerpt of the client part code on Angular.
Part 2. Server on the Spring
 
Angular
 
ngrx
 
...
+ 0 -

What we read in April: useful articles for Angular developers and a selection of the best with ng-conf

What we read in April: useful articles for Angular developers and a selection of the best with ng-conf
 
This April was, of course, not the most successful month for reading about the good and eternal; all in the soap rushed for the raging RKN and glued battered saucers. However, life outside the zone of its responsibility did not stop. Our frontend developer Maxim Popov, even in the midst of the fighting, was tracking interesting news on Angular and sharing them with colleagues. In addition, he reviewed the reports of past ng-conf and prepared a selection of the most valuable. With his kind permission I share this information with Khabra - will have something to read and, most importantly, to look at the ...
+ 0 -

Angular. The recursive component is

Angular. The recursive component is

 
There are situations when you want to display a tree with an unspecified number of nested single-type data and it is desirable not to duplicate the code at each level.
 
 
In this short article, we will create a component that will use as an input parameter an array of comments with several levels of nesting and display them recursively .
 
component. recursively . In the case where there are no nested comments, the directive is used to not display the ...
+ 0 -

Announcement of RamblerFront & # 4

Announcement of RamblerFront & # 4  
 
March 29 at the Mansard Rambler & Co will be the fourth external RamblerFront & meetup, at which our employees will share application knowledge in the field of frontend development.
 
registration is required .
 
We have pizza and tea!
 
 
The beginning at ???r3r372.  
Location: Warsaw highway, ? building ? entrance number 5. Mansard Rambler & Co
 
 

 
 
Be sure to register and take your passport with you so that the security of the business center is missed!
 
 
Come, it will be intere...
+ 0 -

Architecture of the Angular application. We use NgModules

Note. For understanding this article, you need to have an initial knowledge of Angular: what are components, how to create the simplest SPA application, and so on. If you are not familiar with this topic, then I recommend that you first become acquainted with an example of creating a SPA application from the office. documentation.
 
You can read about NgModules here .
 
Architecture of the Angular application. We use NgModules
 
One year ago I already published article about NgModules where technical subtleties are considered when ...
+ 0 -

Unit testing. Chip-tuning

Unit testing. Chip-tuning
 
It does not matter which approach is used when writing tests: TDD, BDD, or some other. Unit tests are the primary protective barrier that helps to avoid bugs. Well-described cases will help colleagues understand what is happening in the project and not break the firewood in the code.
karma-sharding , which allows you to run several browsers in parallel, the distribution of test cases in them will fall on the shoulders of the developer.
 
The usual configuration for unit tests in an angular starter with webpack and karma is as follows:
 
Configurations of karma ...
+ 0 -