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

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.

tx, found the workaround I needed:

  constructor(private zone:NgZone) {    // enable to for time travel    this.appStore.subscribe((state) => {        this.zone.run(() => {            console.log('enabled time travel');        });    });

running zone.run will force the component to re-render

ChangeDetectorRef approach

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';export class MyComponent {    constructor(private cdr: ChangeDetectorRef) { }    selected(item: any) {        if (item == 'Department')            this.isDepartment = true;        else            this.isDepartment = false;        this.cdr.detectChanges();    }}