קורס אנגולר 5 נפתח בינואר

בעקבות הביקוש הרב, החלטתי לפתוח מחזור נוסף בינואר בתאריכים: 15,18,22,25.


קורס זה מבוסס על הנסיון העשיר שלי בעשרות פרוייקטים ב- Angular שהיתי מעורב בהם. בקורס אני מלמד איך משתמשים באנגולר וגם איך הוא עובד מ"תחת למנוע". ידע זה יאפשר לכם להבין איך אפשר לשפר ולהרחיב את אנגולר לצרכים שלכם.
הקורס הבא נפתח ב-15 לינואר,
לחץ כאן לפרטים.

מודעות פרסומת
השארת תגובה

פורסם ע"י ב- דצמבר 3, 2017 ב- Uncategorized


Config file for Angular CLI with AOT

Angular CLI supports const environment but you need to
compile the project for each environment.  But the IT guys dont want to run again and again the CLI for each environment.

The recipe:


const config = {
    url :


2.  Add the file to index.html, like this.

<!doctype html>
<html lang="en">
    <meta charset="utf-8">
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <script src="assets/config.js"></script>
3.  Now you can use the config variable everywhere. 

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
declare let config:{url:string};
if (environment.production) {
console.log(`config url : ${config.url}`);
    .catch(err => console.log(err));

Impotent: Don’t import the config.js like this: import {config} from './assets/config.js'; Because it will insert the file to the bundles files that CLI creates.
What you think?
2 תגובות

פורסם ע"י ב- אוקטובר 22, 2017 ב- Angular 2.0, angulr/cli


ERROR in Error encountered resolving symbol values statically

הצוות של אנגולר החליט שכדי לשפר את מהירות הקימפול של אנגולר בתהליך ה-AOT, הם לא יכולים להריץ קוד דינאמי בתוך ה-Decorators כמו למשל NgModule.

כלומר אם אתם רוצים לטעון לתוך ה-  RouterModule.forRoot רשמיה דינאמית של Routes אתם לא יכולים.

מעכשיו שרוצים לטעון Routes בצורה דינאמית צריך להשתמש בשרות Router במתודה config.

ראו התכתבות ב-GitHub:


השארת תגובה

פורסם ע"י ב- ספטמבר 11, 2017 ב- Angular 2.0


קורס אנגולר בספטמבר

ב- 17 לספטמבר אני פותח קורס אנגולר למפתחי JavaScript בהרצליה, רחוב הנדיב 71. לפרטים לחצו כאן.


השארת תגובה

פורסם ע"י ב- ספטמבר 4, 2017 ב- Uncategorized


Meetup on Angular 2.0 Architecture


This Thursday (2/3/2017) I will lecture on Angular 2.0 Architecture.
Location: שמעון פרס 12 רחובות, 7670308 Rehovot, Israel
Time:  6PM-8:30PM.

The session will focus on the main parts of Angular 2.0:
 Angular Modules
 Angular Compiler
 Hierarchical Injector
 Component Lifecycle Hooks
 Change Detector
 Renderer
 Angular 2.0 & jQuery
 Dynamic component creation
 Tips & Tricks

Each part will be explained and analyzed. In some cases we will dive into Angular 2.0 source code. Our purpose is to list the Do's & Don’ts of Angular. The session is mostly targeted for developers which already have some experience with Angular 2.0.

3 תגובות

פורסם ע"י ב- פברואר 27, 2017 ב- Uncategorized


Angular 2 Course by Eyal Vardi

ב-26 למרץ נפתח מחזור נוסף של קורס אנגולר 2 בהרצליה. הקורס יהיה 4 ימים בתאריכים: 26,29, למרץ ו-2,5 לאפריל.
ראו סיליבוס. לפרטים נוספים מלאו את הטופס.

מספר המקומות מוגבל.

השארת תגובה

פורסם ע"י ב- ינואר 7, 2017 ב- Uncategorized


Performance Optimization in Angular 2.0


Angular 2 is very fast J. Its mechanisms: change detection, renderer, compiler and more have been redesigned and buildt from scratch. This brings the question why do we need performance optimization? Because we are addicted to speed! Over the years our applications have become larger and the UI has become more and more complex. In this post I will explain how change detection works (In Angular 1 it is called the digest loop) and how we can optimize it to improve performance.


How Angular 2 knows when to update the UI?

Angular 2 works with zone.js library. This library overrides all the functions that we register to async events (i.e setTimeout, setInterval, addEventListener and XMlHttpRequet).

The reason that Angular 2 uses the zone.js is to know when our handler finishes and then the NgZone service (NgZone is a class that wrap the zone service) calls to ApplicationRef.tick() method. The tick() method scans the tree components from top to bottom and calculates in each component the expressions that exist in the template. If the result of the expression is not equal to the previous result, (from the previous tick) Angular will update the DOM property that connects to this expression.


 What are the parameters that influence my performance?

Now that we know how Angular 2 works we can build the performance formula.


Frequency    – The number of times a tick method is call per second.

Quantity       – The number of expressions that exist in the tree components.


What are High Frequency Problems?

Usually the UI changes because we react with the UI events and these events don’t happen in high frequency (All the round brackets in the templates).

High frequency performance problems can often occur when the data needs to be updated in high frequency using timers or communication for example components like monitors, graphs, clocks. When these components cause a tick, the entire tree is recalculated regardless of whether or not the components in the tree need to be updated at such a high frequency.

Below is an example of high frequency performance problem.


In the dashboard we have one component that cause a tick every 50ms. This means if we working without any optimizations, all of the components in the tree are calculated every 50ms and this is bad for performance.

To improve the performance we need to reduce the number of ticks per second but still update the specific graph component at 50ms. We need to work with NgZone service and cancel the default behavior of executing the tick function after async events. See code:


I use the runOutsideAngular method to execute the run method so any async events that happen inside this method will not cause any tick. The value property will update every 50ms but we will not see the screen updates. We need to call explicitly to detectChanges() method. See code:



Summary of the High Frequency Problem:

When a component causes too many ticks and the other components don’t need this kind of high frequency refresh rate, we will use the NgZone service to eliminate the tick and the ChangeDetectorRef service to update only the component area in the screen.


What is the High Expressions Problem?

In every tick, Angular 2 calculates all the expressions that exist in the components tree. Less expressions means less calculations so the tick method will take less time and this means more time for the UI thread to do other tasks. The question is do we need to calculate each expression in every tick? Answer: of course not.


Detach & Reattach Strategy:
A component can detach form the tree components, meaning Angular will not calculate the component expressions on a tick and will not update the component area on the screen. Only when the component reattaches back to the components tree, Angular will calculate it expressions. A detach and reattach methods exist in the ChangeDetectorRef class. Each component can choose when to call this methods.


1)    In detach mode the component can still cause a tick.


2)    When executing the reattach method, we see the first update only when a tick happens. We can call explicitly to detectChanges method to update the screen.


On-push Strategy:

If the state of a component changes because the component inputs are changed, then on-push strategy is recommended. To use the on-push strategy is very easy, see code:

    selector :
    template :

    changeDetection : ChangeDetectionStrategy.OnPush

export class
    @Input() name:
    @Input() email:
    @Input() age:



1)    We will see the component update on the screen only if one of the inputs is changed (name, email or age).


2)    Angular 2 compares expressions that return objects by reference. This means if a property in the object has changed and not the object reference, Angular will not update the component area on the screen. To solve this problem we need to use the ngDoCheck hook and the KeyValueDiffers class (See the NgClass directive code). In case of array we need to use the IterableDiffers class (See the NgFor directive code).


Threshold Strategy:

The goal of the threshold strategy is to update the component only if the state has changed significantly.


This demo shows how we can work with an Observable class and its operators to reduce the amount of updates, meaning less expressions to calculate. The component is detached form the component tree and the update happens only when item comes up from the observable. See code:


let threshold = source



                return {


                    delta: Math.abs(acc.curr – curr)



          .filter(value => > 15)

          .map(acc => acc.curr)

Up & Down triangle



             return {


                        isUp: curr – acc.curr > 0



        .map(val => val.isUp)



Link to live demo.



Angular 2 is Fast, but not enough to overcome huge components tree with high frequency of ticks. In this cases we must optimize and use the NgZone to reduce the number of ticks and the ChangeDetectorRef class to reduce the number of expressions for each tick.


These optimizations reduce the number of calculations the UI Thread does per second, meaning more efficiency.

השארת תגובה

פורסם ע"י ב- דצמבר 20, 2016 ב- Angular 2.0