Re-render Angular2 component when property is not changed

Question

I have case with Angular2+ when I need to re-render component without model change.

I try

ApplicationRef.tick() ,NgZone.run(callback),ChangeDetectorRef.detectChanges()--

not success

Is there a way to re-render the markup of the component if the model has not changed?

Answer 1

DISCLAIMER : This is just a suggestion of a workaround/hack, as your use case is one that is difficult to match in the world of Angular (where state defines everything and change in state triggers events).

Why not have a model that reflects the number of times the window was resized? There is no need to have it visible on the website, as having it even in a hidden element will also cause the component to repaint.

@Component({
   selector: 'zomg',
   template: `<span style="display:none;">{{resized}}</span>`
})
class Clss {
    resized: number = 0;

    constructor() {
      const _self = this;
      window.onresize = () => {
        _self.resized++;
      };
    }
}

or alternatively by using a HostListener :

@Component({
   selector: 'zomg',
   template: `<span style="display:none;">{{resized}}</span>`
})
class Clss {
    resized: number = 0;

    @HostListener('window:resize')
    onWindowResize() {
        this.resized++;
    }
}