I'm building a mobile app using ionic 4 and it's two languages ar and en, the menu drawer is a pre-built ponent.

So I need to refresh the drawer ponent to get's the right styles based on the dom direction rtl or ltr

What I'm doing now is just location.reload reloading the whole app but I don't think that a good approach for doing that

I'm building a mobile app using ionic 4 and it's two languages ar and en, the menu drawer is a pre-built ponent.

So I need to refresh the drawer ponent to get's the right styles based on the dom direction rtl or ltr

What I'm doing now is just location.reload reloading the whole app but I don't think that a good approach for doing that

• javascript
• angular
• typescript

4 Answers 4

Simplest way to do is to call ngOnInit something like

fn() {
    this.ngOnInit();
}

Or try this

this.router.navigateByUrl('/RefreshComponent', { skipLocationChange: true })
  .then(() => {
      this.router.navigate(['Your actualComponent']);
}); 

For Refreshing or re drawing the ponent use the changeDetectionStratergy

so inject the ChangeDetectionRef Service in the ponent where you using the build-in ponent so on any event call the detectChange method for redrawing the ponent.

One of the best method I found is to use NgZone, like this:

import { NgZone } from "@angular/core";

constructor(private ngZone: NgZone) {}

onMyChanges() {
  this.ngZone.run(() => {
    myChanges...
  });
}

Read more here : https://angular.io/api/core/NgZone

call this method whenever you want to reload your page .
that will reload the page

 window.location.reload();