CODEWITHSUNDEEP
angularjsangular
Luxalpa
Luxalpa

Reputation: 430

Manual Change Detection in AngularJS or Angular 2?

I have a fairly big list of data and every element has a filter applied. For performance reasons (I want to add a lot of attributes to each entry) I only want to update the list when data changes (it's fine if updating it is unperformant). Unfortunately, the OnPush ChangeStrategy in Angular 2 still updates whenever I click on something.

Is there a way to ONLY manually trigger updates/checks (using for example changeDetectorRef.markForCheck())and not have it automatic on every click event?

Both AngularJS (1.5) and Angular 2 are fine.

Upvotes: 1

Views: 2467

Answers (1)

Mark Rajcok
Mark Rajcok

Reputation: 364697

This should work (at least it does in this Plunker):

@Component({
  selector: 'manual',
  template: `<br>manual: {{_counter.obj.counter}}
  <br><button (click)="0">click me</button>
    <li *ngFor="#item of items">{{item}}</li>`,
})
export class Manual {
  items = 'one two'.split(' ');
  constructor(private ref: ChangeDetectorRef, private _counter:Counter) {}
  ngOnInit() {
     this.ref.detach();
     setInterval(_ => {
        this.items.push(`CD ran when counter=${this._counter.obj.counter}`);
        this.ref.reattach();
        this.ref.detectChanges();
        this.ref.detach();
     }, 3000);
  }
}

In the plunker I have a Counter service that updates obj.counter every second. In the Manual component, {{_counter.obj.counter}} (hence the view) only updates when detectChanges() is called – every 3 seconds. Clicking the click me button does not cause the view to update, as desired.

I did not specify OnPush. However, if you do, it does not seem to alter the desired operation.

In the plunker I also have an Automatic component, and its {{_counter.obj.counter}} (hence its view) updates every second, as expected.

Upvotes: 1

Related Questions