Angular: trigger change detection outside of angular dependency injection

Question

Is it possible to trigger angular change detection globally, without injecting something like ApplicationRef? I would want to use the following functionality as a plain js function and not as a service method. Thus avoiding to inject an extra service whereever the function is needed.


export function frequentlyUsedUtilityFunction() {

  // ... do stuff

  // trigger change detection
  // get applicationRef or some similar mechanism
  const applicationRef = ...
  applicationRef.tick();

  // ... do more stuff
}

Oleg Postoev · Accepted Answer · 2021-03-07 14:18:14Z

1

Not shure what I fully understand your question, but maybe this way can help you:

Add code into AppComponent like this:

constructor(private cdr: ChangeDetectorRef) {}

public ngOnInit(): void {
  fromEvent(document, 'myEventToCdrTrigger').subscribe(() => {
    this.cdr.detectChanges();
  });
}

From your custom function:

export function frequentlyUsedUtilityFunction() {
  const event = document.createEvent('Event');
  event.initEvent('myEventToCdrTrigger', true, true);
  document.dispatchEvent(event);
}

answered Mar 7, 2021 at 14:18

Oleg Postoev

3513 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

pesche666 Over a year ago

Your approach is a nice idea. It broght me to another idea. If you run a setTimeout(() => {}, 0) in the utility function it should also trigger change detection (async action). However not tested.

Collectives™ on Stack Overflow

Angular: trigger change detection outside of angular dependency injection

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related