I am using HostListener 'window:scroll' event in my component as shown in this demo. While I scroll the components re render itself. In console I am printing sample text which is inside component that should run only one time.
Need help what I am doing wrong here.
The rendering is triggered by the default change detection strategy.
Basically the HeaderComponent is triggered by HostListener to check the state of the component, which then propagates to the child components.
The FirstComponent's change detector is by default ChangeDetectionStrategy.Default, because of which it re-checks the state each time change detection is triggered. The other option would be to set ChangeDetectionStrategy to OnPush.
This would make the component to check for changes only whenever the actual state is changed. For example when Input() or Output() is changed or when the template event is raised ((click)="onClick()" in HTML for example).
I would highly recommend to read more about the change detection mechanism in Angular in more details.
Here's the working solution:
import { Component, ChangeDetectionStrategy } from '@angular/core';
@Component({
selector: 'app-first',
template: `{{abc()}}`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class FirstComponent {
constructor() {}
abc(){
console.log('first component')
}
}
