Change Detection Strategy - Angular

 Each of the angular component uses Default change detection policy by default. UI keep checking for the change continuously. Which many times affect the performance of the component and overall product. 

There is a way you can control this by setting the Change Detection for your component. 

How to find out the effect Change detection is putting on your control.

Override ngAfterViewChanged event on your component and use code similar to below. 

  ngAfterViewChecked(){

    this._ngZone.runOutsideAngular(() => {

      if(this.divElement.nativeElement)

      {

      this.divElement.nativeElement.classList.add('highlight')

      setTimeout(() => {

        this.divElement.nativeElement.classList.remove('highlight')

      }, 1500)

    }

    })

  }

Inject "private _ngZone : NgZone" to your constructor. 

divElement is the Element in your html. 

and highlight-css , change the background color of the div with css. 

You will see how many times the event fires. 

Changing the Default Change Detection:

- You can change the default change detection by setting the changeDetection to OnPush in your Component declaration. 

Ref:

https://medium.com/ngconf/simplified-angular-change-detection-e74809ff804d

https://pankajparkar.github.io/demystifying-change-detection/#/default-strategy

Increase the number of files visible in Azure KUDU

 Problem: Kudu console doesnt show more than 400 files. 

Open kudu ,

go to console and run following command

window.localStorage['maxViewItems'] = 1000

refresh the page.