Revert "feat(second): remove unusage"

This reverts commit 8f61eab

change-detection-strategy-default/app/app.component.css

@@ -0,0 +1,10 @@
+.tick {
+  text-align: center;
+}
+
+.tick:after {
+  content: "Application.tick() count: " attr(data-tick-count);
+  display: block;
+  font-size: 14px;
+  text-align: center;
+}

change-detection-strategy-default/app/app.component.html

@@ -0,0 +1,65 @@
+<div #tick class="tick">
+  NgZone + ChangeDetection.Default (static tree + projection) <br>
+  Open the console, if you want to see the lifecycle
+</div>
+
+<tree>
+
+  <div>
+    <div class="center">count = {{ countTree|json }}</div>
+  </div>
+
+  <child>
+    <div>Timers</div>
+    <child>
+      <div>
+        <interval runOutside="runOutside"></interval>
+      </div>
+      <child></child>
+    </child>
+    <child>
+      <div>
+        <interval setInterval="setInterval"></interval>
+      </div>
+      <child></child>
+    </child>
+    <child>
+      <div>
+        <interval asyncPipe="asyncPipe"></interval>
+      </div>
+      <child></child>
+    </child>
+  </child>
+
+  <child>
+    <child>
+      <child>
+        <div>
+          <button-click
+            [count]="countTree">
+          </button-click>
+        </div>
+        <child>
+          <div>Factorial</div>
+          <child>
+            <div>
+              <factorial></factorial>
+              <factorial></factorial>
+              <factorial></factorial>
+            </div>
+            <child>
+              <div>
+                <input-change
+                  [count]="countTree">
+                </input-change>
+              </div>
+            </child>
+          </child>
+        </child>
+      </child>
+    </child>
+  </child>
+
+
+
+</tree>

change-detection-strategy-default/app/app.component.ts

@@ -0,0 +1,29 @@
+import {Component, ElementRef, Injector, ViewChild} from '@angular/core';
+import {Lifecycle} from '../common/utils/Lifecycle';
+import {TreeNode} from '../common/tree-node.class';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+@Lifecycle({defaultName: true})
+export class AppComponent extends TreeNode {
+
+  @ViewChild('tick', {read: ElementRef}) private tick: ElementRef;
+  public countTree = {value: 0};
+  private countTick: number = 0;
+
+  constructor(context: Injector) {
+    super(context);
+  }
+
+  public ngAfterViewChecked() {
+    this.countTick++;
+    super.ngAfterViewChecked();
+    if (this.tick) {
+      this.tick.nativeElement.setAttribute('data-tick-count', this.countTick);
+    }
+  }
+
+}

change-detection-strategy-default/app/app.module.ts

@@ -0,0 +1,34 @@
+import {BrowserModule} from '@angular/platform-browser';
+import {NgModule, NO_ERRORS_SCHEMA} from '@angular/core';
+
+import {AppComponent} from './app.component';
+import {TreeComponent} from './tree/tree/tree.component';
+import {ChildComponent} from './tree/child/child.component';
+import {ButtonClickComponent} from './component/button-click/button-click.component';
+import {FormsModule} from '@angular/forms';
+import {InputChangeComponent} from './component/input-change/input-change.component';
+import { ShowInputsComponent } from './component/show-inputs/show-inputs.component';
+import { IntervalComponent } from './component/interval/interval.component';
+import { FactorialComponent } from './component/factorial/factorial.component';
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    TreeComponent,
+    ChildComponent,
+    ButtonClickComponent,
+    InputChangeComponent,
+    ShowInputsComponent,
+    IntervalComponent,
+    FactorialComponent,
+  ],
+  imports: [
+    BrowserModule,
+    FormsModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent],
+  schemas: [NO_ERRORS_SCHEMA]
+})
+export class AppModule {
+}

change-detection-strategy-default/app/component/button-click/button-click.component.html

@@ -0,0 +1,2 @@
+<show-inputs [changes]="changes"></show-inputs>
+<button (click)="addCount()">click!</button>

change-detection-strategy-default/app/component/button-click/button-click.component.ts

@@ -0,0 +1,23 @@
+import {Component, Injector, Input} from '@angular/core';
+import {Lifecycle} from "../../../common/utils/Lifecycle";
+import {TreeNode} from "../../../common/tree-node.class";
+
+@Component({
+  selector: 'button-click',
+  templateUrl: './button-click.component.html',
+  styleUrls: ['./button-click.component.css'],
+})
+@Lifecycle({defaultName: true})
+export class ButtonClickComponent extends TreeNode {
+
+  @Input() count: { value: number };
+
+  constructor(context: Injector) {
+    super(context);
+  }
+
+  public addCount() {
+    this.count.value++;
+  }
+
+}

change-detection-strategy-default/app/component/factorial/factorial.component.css

@@ -0,0 +1,20 @@
+.factorial {
+  max-width: 190px;
+  padding: 5px;
+  overflow: auto;
+  white-space: nowrap;
+}
+
+.computed:after {
+  content: "Computed in template: " attr(data-total) "ms";
+  display: block;
+  font-size: 10px;
+  text-align: center;
+}
+
+.execute:after {
+  content: "Execute count in template: " attr(data-execute);
+  display: block;
+  font-size: 10px;
+  text-align: center;
+}

change-detection-strategy-default/app/component/factorial/factorial.component.html

@@ -0,0 +1,14 @@
+<div class="factorial">
+  <label>
+    Usage factorial (execute):
+    <input type="checkbox" [(ngModel)]="enabled">
+  </label>
+
+  <div *ngIf="enabled">
+    <input type="number" [(ngModel)]="factorialValue" min="0"><br>
+    {{factorialValue}}! = {{factorial(factorialValue)}} <br><br>
+    <div #total class="computed"></div>
+    <div #execute class="execute"></div>
+  </div>
+
+</div>

change-detection-strategy-default/app/component/factorial/factorial.component.ts

@@ -0,0 +1,32 @@
+import {Component, ElementRef, ViewChild} from '@angular/core';
+import * as math from 'mathjs';
+
+math.config({number: 'BigNumber', precision: 100});
+
+@Component({
+  selector: 'factorial',
+  templateUrl: './factorial.component.html',
+  styleUrls: ['./factorial.component.css']
+})
+export class FactorialComponent {
+  public enabled = true;
+  public factorialValue = 10;
+  private executeCount: number = 0;
+  @ViewChild('total', {read: ElementRef}) private total: ElementRef;
+  @ViewChild('execute', {read: ElementRef}) private execute: ElementRef;
+
+  public factorial(n) {
+    this.executeCount++;
+    const start = performance.now();
+    const result = math.eval(`${n}!`).toString();
+    const total = Math.ceil(performance.now() - start);
+
+    if (this.total) {
+      this.total.nativeElement.setAttribute('data-total', total);
+      this.execute.nativeElement.setAttribute('data-execute', this.executeCount);
+    }
+
+    return result;
+  }
+
+}

change-detection-strategy-default/app/component/input-change/input-change.component.css

@@ -0,0 +1,3 @@
+input {
+  max-width: 130px;
+}

change-detection-strategy-default/app/component/input-change/input-change.component.html

@@ -0,0 +1,2 @@
+<show-inputs [changes]="changes"></show-inputs>
+<input type="number" [(ngModel)]="count.value">

change-detection-strategy-default/app/component/input-change/input-change.component.ts

@@ -0,0 +1,17 @@
+import {Component, Injector, Input} from '@angular/core';
+import {TreeNode} from '../../../common/tree-node.class';
+
+@Component({
+  selector: 'input-change',
+  templateUrl: './input-change.component.html',
+  styleUrls: ['./input-change.component.css']
+})
+export class InputChangeComponent extends TreeNode {
+
+  @Input() count: { value: number };
+
+  constructor(context: Injector) {
+    super(context);
+  }
+
+}

change-detection-strategy-default/app/component/interval/interval.component.css

@@ -0,0 +1 @@
+

change-detection-strategy-default/app/component/interval/interval.component.html

@@ -0,0 +1,7 @@
+<label>
+  {{ runOutside || setInterval || asyncPipe }} interval
+  <input type="checkbox" [ngModel]="enabled" (ngModelChange)="updateInterval($event)">
+</label>
+
+<div *ngIf="asyncPipe">{{ (timerObservable | async) || formatDate }}</div>
+<div *ngIf="!asyncPipe">{{ formatDate }}</div>

change-detection-strategy-default/app/component/interval/interval.component.ts

@@ -0,0 +1,70 @@
+import {Component, Injector, Input} from '@angular/core';
+import {interval} from 'rxjs/observable/interval';
+import {map} from 'rxjs/operators';
+import {Subscription} from 'rxjs/Subscription';
+import {Observable} from 'rxjs/Observable';
+import {TreeNode} from '../../../common/tree-node.class';
+import {Lifecycle} from '../../../common/utils/Lifecycle';
+
+@Component({
+  selector: 'interval',
+  templateUrl: './interval.component.html',
+  styleUrls: ['./interval.component.css']
+})
+@Lifecycle({defaultName: true})
+export class IntervalComponent extends TreeNode {
+  @Input() public runOutside: string;
+  @Input() public setInterval: string;
+  @Input() public asyncPipe: string;
+  public enabled: boolean;
+  public formatDate: string;
+  public timerSub: Subscription;
+  public timerObservable: Observable<string>;
+  public timer: number;
+
+  constructor(context: Injector) {
+    super(context);
+    this.formatDate = this.getFormattedDate();
+  }
+
+  public enableInterval() {
+    if (this.setInterval) {
+      this.timerInterval();
+    } else if (this.runOutside) {
+      this.zone.runOutsideAngular(() => {
+        const timer = interval(1000).pipe(map(this.getFormattedDate));
+        this.timerSub = timer.subscribe((time) => {
+          this.formatDate = time;
+          this.cd.detectChanges();
+        });
+      });
+    } else {
+      this.zone.runOutsideAngular(() => { // but async pipe execute main zone
+        this.timerObservable = interval(1000).pipe(map(this.getFormattedDate));
+      });
+    }
+  }
+
+  public updateInterval(enable: boolean) {
+    if (enable) {
+      this.enableInterval();
+    } else {
+      if (this.timerSub) {
+        this.timerSub.unsubscribe();
+      }
+      this.timerObservable = null;
+      clearInterval(this.timer);
+    }
+  }
+
+  private timerInterval() {
+    this.timer = window.setInterval(() => {
+      this.formatDate = this.getFormattedDate();
+    }, 1000);
+  }
+
+  private getFormattedDate() {
+    return new Date().toJSON().substring(10, 19).replace('T', '');
+  }
+
+}

change-detection-strategy-default/app/component/show-inputs/show-inputs.component.css

@@ -0,0 +1,12 @@
+.inputs {
+  background: rgba(256, 256, 256, 0.8);
+  padding: 5px 2px;
+  margin: 5px 2px;
+  border: 1px dotted #000;
+  color: #000;
+  font-weight: normal;
+  text-align: left;
+  font-family: monospace;
+  max-width: 150px;
+  overflow: auto;
+}

change-detection-strategy-default/app/component/show-inputs/show-inputs.component.html

@@ -0,0 +1,7 @@
+<div class="inputs">
+  <b>@Inputs: </b>
+  <div *ngFor="let key of keys(changes)">
+    {{ key }}: {{ changes[key]['currentValue']|json }}
+  </div>
+</div>
+

change-detection-strategy-default/app/component/show-inputs/show-inputs.component.ts

@@ -0,0 +1,14 @@
+import {Component, Input, SimpleChanges} from '@angular/core';
+
+@Component({
+  selector: 'show-inputs',
+  templateUrl: './show-inputs.component.html',
+  styleUrls: ['./show-inputs.component.css']
+})
+export class ShowInputsComponent {
+  @Input() public changes: SimpleChanges;
+
+  public keys(val) {
+    return Object.keys(val);
+  }
+}

change-detection-strategy-default/app/tree/child/child.component.html

@@ -0,0 +1,13 @@
+<li>
+  <div class="content"
+       [ngStyle]="{'background-color':this.color}"
+       [attr.data-id]="componentId"
+       #contentNode>
+    <br>
+    <ng-content select="div"></ng-content>
+  </div>
+  <ul #ref [class.empty]="ref.children.length === 0">
+    <ng-content></ng-content>
+  </ul>
+</li>
+