Skip to content

Commit 99d148f

Browse files
author
mivanov
committed
Revert "feat(second): remove unusage"
This reverts commit 8f61eab
1 parent 8f61eab commit 99d148f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+944
-0
lines changed

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

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.tick {
2+
text-align: center;
3+
}
4+
5+
.tick:after {
6+
content: "Application.tick() count: " attr(data-tick-count);
7+
display: block;
8+
font-size: 14px;
9+
text-align: center;
10+
}

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

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<div #tick class="tick">
2+
NgZone + ChangeDetection.Default (static tree + projection) <br>
3+
Open the console, if you want to see the lifecycle
4+
</div>
5+
6+
<tree>
7+
8+
<div>
9+
<div class="center">count = {{ countTree|json }}</div>
10+
</div>
11+
12+
<child>
13+
<div>Timers</div>
14+
<child>
15+
<div>
16+
<interval runOutside="runOutside"></interval>
17+
</div>
18+
<child></child>
19+
</child>
20+
<child>
21+
<div>
22+
<interval setInterval="setInterval"></interval>
23+
</div>
24+
<child></child>
25+
</child>
26+
<child>
27+
<div>
28+
<interval asyncPipe="asyncPipe"></interval>
29+
</div>
30+
<child></child>
31+
</child>
32+
</child>
33+
34+
<child>
35+
<child>
36+
<child>
37+
<div>
38+
<button-click
39+
[count]="countTree">
40+
</button-click>
41+
</div>
42+
<child>
43+
<div>Factorial</div>
44+
<child>
45+
<div>
46+
<factorial></factorial>
47+
<factorial></factorial>
48+
<factorial></factorial>
49+
</div>
50+
<child>
51+
<div>
52+
<input-change
53+
[count]="countTree">
54+
</input-change>
55+
</div>
56+
</child>
57+
</child>
58+
</child>
59+
</child>
60+
</child>
61+
</child>
62+
63+
64+
65+
</tree>

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

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import {Component, ElementRef, Injector, ViewChild} from '@angular/core';
2+
import {Lifecycle} from '../common/utils/Lifecycle';
3+
import {TreeNode} from '../common/tree-node.class';
4+
5+
@Component({
6+
selector: 'app-root',
7+
templateUrl: './app.component.html',
8+
styleUrls: ['./app.component.css']
9+
})
10+
@Lifecycle({defaultName: true})
11+
export class AppComponent extends TreeNode {
12+
13+
@ViewChild('tick', {read: ElementRef}) private tick: ElementRef;
14+
public countTree = {value: 0};
15+
private countTick: number = 0;
16+
17+
constructor(context: Injector) {
18+
super(context);
19+
}
20+
21+
public ngAfterViewChecked() {
22+
this.countTick++;
23+
super.ngAfterViewChecked();
24+
if (this.tick) {
25+
this.tick.nativeElement.setAttribute('data-tick-count', this.countTick);
26+
}
27+
}
28+
29+
}

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

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import {BrowserModule} from '@angular/platform-browser';
2+
import {NgModule, NO_ERRORS_SCHEMA} from '@angular/core';
3+
4+
import {AppComponent} from './app.component';
5+
import {TreeComponent} from './tree/tree/tree.component';
6+
import {ChildComponent} from './tree/child/child.component';
7+
import {ButtonClickComponent} from './component/button-click/button-click.component';
8+
import {FormsModule} from '@angular/forms';
9+
import {InputChangeComponent} from './component/input-change/input-change.component';
10+
import { ShowInputsComponent } from './component/show-inputs/show-inputs.component';
11+
import { IntervalComponent } from './component/interval/interval.component';
12+
import { FactorialComponent } from './component/factorial/factorial.component';
13+
14+
@NgModule({
15+
declarations: [
16+
AppComponent,
17+
TreeComponent,
18+
ChildComponent,
19+
ButtonClickComponent,
20+
InputChangeComponent,
21+
ShowInputsComponent,
22+
IntervalComponent,
23+
FactorialComponent,
24+
],
25+
imports: [
26+
BrowserModule,
27+
FormsModule
28+
],
29+
providers: [],
30+
bootstrap: [AppComponent],
31+
schemas: [NO_ERRORS_SCHEMA]
32+
})
33+
export class AppModule {
34+
}

‎change-detection-strategy-default/app/component/button-click/button-click.component.css

Whitespace-only changes.

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

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

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

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import {Component, Injector, Input} from '@angular/core';
2+
import {Lifecycle} from "../../../common/utils/Lifecycle";
3+
import {TreeNode} from "../../../common/tree-node.class";
4+
5+
@Component({
6+
selector: 'button-click',
7+
templateUrl: './button-click.component.html',
8+
styleUrls: ['./button-click.component.css'],
9+
})
10+
@Lifecycle({defaultName: true})
11+
export class ButtonClickComponent extends TreeNode {
12+
13+
@Input() count: { value: number };
14+
15+
constructor(context: Injector) {
16+
super(context);
17+
}
18+
19+
public addCount() {
20+
this.count.value++;
21+
}
22+
23+
}

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

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
.factorial {
2+
max-width: 190px;
3+
padding: 5px;
4+
overflow: auto;
5+
white-space: nowrap;
6+
}
7+
8+
.computed:after {
9+
content: "Computed in template: " attr(data-total) "ms";
10+
display: block;
11+
font-size: 10px;
12+
text-align: center;
13+
}
14+
15+
.execute:after {
16+
content: "Execute count in template: " attr(data-execute);
17+
display: block;
18+
font-size: 10px;
19+
text-align: center;
20+
}

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

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<div class="factorial">
2+
<label>
3+
Usage factorial (execute):
4+
<input type="checkbox" [(ngModel)]="enabled">
5+
</label>
6+
7+
<div *ngIf="enabled">
8+
<input type="number" [(ngModel)]="factorialValue" min="0"><br>
9+
{{factorialValue}}! = {{factorial(factorialValue)}} <br><br>
10+
<div #total class="computed"></div>
11+
<div #execute class="execute"></div>
12+
</div>
13+
14+
</div>

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

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import {Component, ElementRef, ViewChild} from '@angular/core';
2+
import * as math from 'mathjs';
3+
4+
math.config({number: 'BigNumber', precision: 100});
5+
6+
@Component({
7+
selector: 'factorial',
8+
templateUrl: './factorial.component.html',
9+
styleUrls: ['./factorial.component.css']
10+
})
11+
export class FactorialComponent {
12+
public enabled = true;
13+
public factorialValue = 10;
14+
private executeCount: number = 0;
15+
@ViewChild('total', {read: ElementRef}) private total: ElementRef;
16+
@ViewChild('execute', {read: ElementRef}) private execute: ElementRef;
17+
18+
public factorial(n) {
19+
this.executeCount++;
20+
const start = performance.now();
21+
const result = math.eval(`${n}!`).toString();
22+
const total = Math.ceil(performance.now() - start);
23+
24+
if (this.total) {
25+
this.total.nativeElement.setAttribute('data-total', total);
26+
this.execute.nativeElement.setAttribute('data-execute', this.executeCount);
27+
}
28+
29+
return result;
30+
}
31+
32+
}

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

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
input {
2+
max-width: 130px;
3+
}

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

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

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

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import {Component, Injector, Input} from '@angular/core';
2+
import {TreeNode} from '../../../common/tree-node.class';
3+
4+
@Component({
5+
selector: 'input-change',
6+
templateUrl: './input-change.component.html',
7+
styleUrls: ['./input-change.component.css']
8+
})
9+
export class InputChangeComponent extends TreeNode {
10+
11+
@Input() count: { value: number };
12+
13+
constructor(context: Injector) {
14+
super(context);
15+
}
16+
17+
}

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

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+

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

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

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

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import {Component, Injector, Input} from '@angular/core';
2+
import {interval} from 'rxjs/observable/interval';
3+
import {map} from 'rxjs/operators';
4+
import {Subscription} from 'rxjs/Subscription';
5+
import {Observable} from 'rxjs/Observable';
6+
import {TreeNode} from '../../../common/tree-node.class';
7+
import {Lifecycle} from '../../../common/utils/Lifecycle';
8+
9+
@Component({
10+
selector: 'interval',
11+
templateUrl: './interval.component.html',
12+
styleUrls: ['./interval.component.css']
13+
})
14+
@Lifecycle({defaultName: true})
15+
export class IntervalComponent extends TreeNode {
16+
@Input() public runOutside: string;
17+
@Input() public setInterval: string;
18+
@Input() public asyncPipe: string;
19+
public enabled: boolean;
20+
public formatDate: string;
21+
public timerSub: Subscription;
22+
public timerObservable: Observable<string>;
23+
public timer: number;
24+
25+
constructor(context: Injector) {
26+
super(context);
27+
this.formatDate = this.getFormattedDate();
28+
}
29+
30+
public enableInterval() {
31+
if (this.setInterval) {
32+
this.timerInterval();
33+
} else if (this.runOutside) {
34+
this.zone.runOutsideAngular(() => {
35+
const timer = interval(1000).pipe(map(this.getFormattedDate));
36+
this.timerSub = timer.subscribe((time) => {
37+
this.formatDate = time;
38+
this.cd.detectChanges();
39+
});
40+
});
41+
} else {
42+
this.zone.runOutsideAngular(() => { // but async pipe execute main zone
43+
this.timerObservable = interval(1000).pipe(map(this.getFormattedDate));
44+
});
45+
}
46+
}
47+
48+
public updateInterval(enable: boolean) {
49+
if (enable) {
50+
this.enableInterval();
51+
} else {
52+
if (this.timerSub) {
53+
this.timerSub.unsubscribe();
54+
}
55+
this.timerObservable = null;
56+
clearInterval(this.timer);
57+
}
58+
}
59+
60+
private timerInterval() {
61+
this.timer = window.setInterval(() => {
62+
this.formatDate = this.getFormattedDate();
63+
}, 1000);
64+
}
65+
66+
private getFormattedDate() {
67+
return new Date().toJSON().substring(10, 19).replace('T', '');
68+
}
69+
70+
}

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

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.inputs {
2+
background: rgba(256, 256, 256, 0.8);
3+
padding: 5px 2px;
4+
margin: 5px 2px;
5+
border: 1px dotted #000;
6+
color: #000;
7+
font-weight: normal;
8+
text-align: left;
9+
font-family: monospace;
10+
max-width: 150px;
11+
overflow: auto;
12+
}

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

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<div class="inputs">
2+
<b>@Inputs: </b>
3+
<div *ngFor="let key of keys(changes)">
4+
{{ key }}: {{ changes[key]['currentValue']|json }}
5+
</div>
6+
</div>
7+

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

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import {Component, Input, SimpleChanges} from '@angular/core';
2+
3+
@Component({
4+
selector: 'show-inputs',
5+
templateUrl: './show-inputs.component.html',
6+
styleUrls: ['./show-inputs.component.css']
7+
})
8+
export class ShowInputsComponent {
9+
@Input() public changes: SimpleChanges;
10+
11+
public keys(val) {
12+
return Object.keys(val);
13+
}
14+
}

‎change-detection-strategy-default/app/tree/child/child.component.css

Whitespace-only changes.

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

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<li>
2+
<div class="content"
3+
[ngStyle]="{'background-color':this.color}"
4+
[attr.data-id]="componentId"
5+
#contentNode>
6+
<br>
7+
<ng-content select="div"></ng-content>
8+
</div>
9+
<ul #ref [class.empty]="ref.children.length === 0">
10+
<ng-content></ng-content>
11+
</ul>
12+
</li>
13+

0 commit comments

Comments
 (0)