How to force a component’s re-rendering in Angular 2?

by

Rendering happens after change detection. To force change detection, so that component property values that have changed get propagated to the DOM (and then the browser will render those changes in the view), here are some options:

  • ApplicationRef.tick() – similar to Angular 1’s $rootScope.$digest() — i.e., check the full component tree
  • NgZone.run(callback) – similar to $rootScope.$apply(callback) — i.e., evaluate the callback function inside the Angular 2 zone. I think, but I’m not sure, that this ends up checking the full component tree after executing the callback function.
  • ChangeDetectorRef.detectChanges() – similar to $scope.$digest() — i.e., check only this component and its children

You will need to import and then inject ApplicationRef, NgZone, or ChangeDetectorRef into your component.

For your particular scenario, I would recommend the last option if only a single component has changed.

More Related Contents:

  1. Triggering change detection manually in Angular
  2. ExpressionChangedAfterItHasBeenCheckedError Explained
  3. @ViewChild in *ngIf
  4. What’s the difference between markForCheck() and detectChanges()
  5. How to detect when an @Input() value changes in Angular?
  6. Trigger update of component view from service – No Provider for ChangeDetectorRef
  7. Angular2 ngFor OnPush Change Detection with Array Mutations
  8. Angular2: *ngFor does not update when array is updated
  9. Angular 2 – how round calculated number?
  10. Angular/RxJS When should I unsubscribe from `Subscription`
  11. Dynamically add event listener
  12. What is the equivalent of ngShow and ngHide in Angular 2+?
  13. I get “Http failure response for (unknown url): 0 Unknown Error” instead of actual error message in Angular
  14. How to use `trackBy` with `ngFor`
  15. Angular 4 validator to check 2 controls at the same time
  16. How to cancel/unsubscribe all pending HTTP requests in Angular 4+
  17. Multiple conditions in ngClass – Angular 4
  18. angular4 httpclient csrf does not send x-xsrf-token
  19. How do I get the absolute path of the current page in Angular 2?
  20. How to use variable to define templateUrl in Angular2
  21. Behaviour subject initial value null?
  22. How to reset form validation on submission of the form in ANGULAR 2
  23. Angular 4 Lazy loading with named router-outlet not working
  24. What is the difference between declarations, providers, and import in NgModule?
  25. TypeScript-‘s Angular Framework Error – “There is no directive with exportAs set to ngForm”
  26. How to return observable from subscribe
  27. Limit input field to two decimal places – Angular 5
  28. How to create and download text/Json File with dynamic content using angular 2+
  29. FormControl.detectchanges – why use distinctUntilChanged?
  30. How to use angular2 built-in date pipe in services and directives script files [duplicate]

Leave a Comment