arturovt

import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
 
import { finalize } from 'rxjs/operators';
 
@Component({
  selector: 'app-todos',
  template: `
    <button (click)="loadTodos()">Load todos</button>
    <app-todo *ngFor="let todo of todos" [todo]="todo"></app-todo>
  `,

arturovt

import { Component, ChangeDetectionStrategy } from '@angular/core';
 
@Component({
  selector: 'app-todos',
  template: `
    <button (click)="loadTodos()">Load todos</button>
    <app-todo *ngFor="let todo of todos" [todo]="todo"></app-todo>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})

arturovt

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-todos',
  template: `
    <app-todo *ngFor="let todo of todos" [todo]="todo"></app-todo>
  `
})
export class TodosComponent {
  public todos: Todo[] = [];

arturovt

// Save the original reference to setTimeout
const originalSetTimeout = window.setTimeout;
// Overwrite the API with a function which wraps callback in zone
window.setTimeout = function(callback, delay) {
  // Invoke the original API but wrap the callback in zone
  return originalSetTimeout(
    // Wrap the callback method
    Zone.current.wrap(callback),
    delay
  );

arturovt

import 'zone.js';
import * as library from 'external-library';
 
const zone = Zone.current.fork({
  name: 'myAwesomeZone',
  onInvokeTask: (delegate, current, target, task, applyThis, applyArgs) => {
    console.log('Preparing to run some "then" callback...');
    return delegate.invokeTask(target, task, applyThis, applyArgs);
  },
  onInvoke: (delegate, current, target, callback, applyThis, applyArgs, source) => {

arturovt

const t0 = performance.now();
for (let i = 0; i < 1e9; i++) {}
const t1 = performance.now();
console.log(`"for" loop took ${t1 - t0}ms`);
 
setTimeout(() => {
  const t0setTimeout = performance.now();
  for (let i = 0; i < 1e9; i++) {}
  const t1setTimeout = performance.now();
  console.log(`"for" loop inside "setTimeout" took ${t1setTimeout - t0setTimeout}ms`);

arturovt

setTimeout(() => {
  console.log('setTimeout.callback is invoked');
}, 100);

arturovt

import { ApplicationRef } from '@angular/core';
 
const tick = ApplicationRef.prototype.tick;
ApplicationRef.prototype.tick = function() {
  console.log(`I'm re-rendering the whole app...`);
  return tick.call(this);
};

arturovt

import { NgModule } from '@angular/core';
import { NgxsModule } from '@ngxs/store';
import { NgxsSelectSnapshotModule } from '@ngxs-labs/select-snapshot';

@NgModule({
  imports: [
    NgxsModule.forRoot(states),
    NgxsSelectSnapshotModule.forRoot()
  ]
})

arturovt

import { SelectSnapshot } from '@ngxs-labs/select-snapshot';

@Injectable({ providedIn: 'root' })
export class UserService {
  @SelectSnapshot(UserState.getUserId)
  public id: number;

  constructor(private http: HttpClient) {}

  public getUser() {