Skip to content

Instantly share code, notes, and snippets.

View AregSargsyan's full-sized avatar

AregSargsyan

3 followers · 4 following
View GitHub Profile
@AregSargsyan
AregSargsyan / animation.ts
Last active May 27, 2020 19:25
Change Detection
import { Component, OnInit, ViewChild, ElementRef, NgZone, ChangeDetectorRef } from '@angular/core';
@Component({
selector: 'app-animated-div',
template: `<div #div></div>`,
styleUrls: ['./animated-div.component.scss']
})
export class AnimatedDivComponent implements OnInit {
@ViewChild('div', { static: true }) div: ElementRef
@AregSargsyan
AregSargsyan / ngZonerun.ts
Created May 28, 2020 14:40
ngZone.run
export class AppComponent implements OnInit {
constructor(private ngZone: NgZone) {}
ngOnInit() {
// New async API is not handled by Zone, so you need to
// use ngZone.run() to make the asynchronous operation in the angular zone
// and trigger change detection automatically.
this.ngZone.run(() => {
someNewAsyncAPI(() => {
// update the data of the component
});
@AregSargsyan
AregSargsyan / changeDetectionWithPlainJs.html
Last active May 28, 2020 18:59
Change detection with plain JS
<html>
<div id="dataDiv"></div>
<button id="btn" (click)="handler()"> ClickMe </button>
<script>
let count = 0;
// initial rendering
detectChange();
function renderHTML() {
document.getElementById('dataDiv').innerText = count;
@AregSargsyan
AregSargsyan / closure.js
Last active May 29, 2020 11:34
Save Context with closure
let message = "HI";
let sayHi = {
say: function() {
console.log( message);
}
};
setTimeout(sayHi.say);
@AregSargsyan
AregSargsyan / bind.js
Last active May 29, 2020 11:36
Bind context
let sayHi = {
message: 'HI',
say: function() {
console.log(this.message);
}
};
setTimeout(sayHi.say.bind(sayHi));
@AregSargsyan
AregSargsyan / row.js
Created May 29, 2020 11:38
save context wit row function
class SayHi {
message = 'HI!'
say= () => console.log(this.message)
};
var sayHi = new SayHi();
setTimeout(sayHi.say);
@AregSargsyan
AregSargsyan / input.ts
Created May 30, 2020 13:01
OnPush works when input referense changed
@Component({
selector: 'child',
template: `
<h1>{{object.name}}</h1>
{{runChangeDetection}}
`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class TooltipComponent {
@Input() object;
@AregSargsyan
AregSargsyan / inputChanges.ts
Created May 30, 2020 13:11
inputChanges
onClick() {
this.object = {
name: 'React'
}
@AregSargsyan
AregSargsyan / click.ts
Created May 30, 2020 17:21
click event onpush
@Component({
template: `
<button (click)="increase()">Click</button>
{{count}}
`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class CounterComponent {
count = 0;
increase() {
@AregSargsyan
AregSargsyan / atherEvents.ts
Last active June 1, 2020 12:58
these event will not trigger change detection
@Component({
template: `...`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class CounterComponent {
count = 0;
constructor() {
setTimeout(() => this.count ++, 0);