How to Refresh a Component in Angular

Question

I am working on an Angular project  I m struggling with refresh action in a component   I would like to refresh the router s components on button click  I have refresh button when I click on it the component router need to be refresh  I tried window location reload   and location reload   these two are not suitable for my need  Please help if anyone aware of it

User · Answer

This can be achieved via a hack  Navigate to some sample component and then navigate to the component that you want to reload     this router navigateByUrl   SampleComponent     skipLocationChange  true     this router navigate   yourLandingComponent

User · Answer

After some research and modifying my code as below  the script worked for me  I just added the condition   this router navigateByUrl   RefreshComponent     skipLocationChange  true    then      gt        this router navigate   Your actualComponent

User · Answer

router navigate   path   will only takes you to the specified path use router navigateByUrl   path   it reloads the whole page

User · Answer

Fortunately  if you are using Angular 5 1   you do not need to implement a hack anymore as native support has been added  You just need to set onSameUrlNavigation to  reload  in the RouterModule options     ngModule    imports   RouterModule forRoot routes   onSameUrlNavigation     reload         exports   RouterModule         More information can be found here  https   medium com engineering-on-the-incline reloading-current-route-on-click-angular-5-1a1bfc740ab2

User · Answer

In my application i have component and all data is coming from API which i am calling in Component s constructor  There is button by which i am updating my page data  on button click i have save data in back end and refresh data  So to reload refresh the component - as per my requirement - is only to refresh the data  if this is also your requirement then use the same code written in  constructor of component

User · Answer

kdo      reload page hack methode  push uri  string        this location replaceState uri     force replace and no show change     await this router navigate  uri     refresh    new Date  getTime            this location replaceState uri     replace

User · Answer

One more way without explicit route    async reload url  string   Promise lt boolean gt      await this router navigateByUrl        skipLocationChange  true       return this router navigateByUrl url

User · Answer

html file  lt a  click    quot getcoursedetails obj Id  quot  routerLinkActive  quot active quot  class  quot btn btn-danger quot  gt Read more    lt  a gt   ts file   getcoursedetails id         this  route navigateByUrl   RefreshComponent     skipLocationChange  true    then      gt        this  route navigate   quot course quot  id

User · Answer

Other way to refresh  hard way  a page in angular 2 like this  it s look like f5     import   Location   from   angular common    constructor private location  Location      pageRefresh        location reload

User · Answer

Use the this ngOnInit    to reload the same component instead reloading the entire page    DeleteEmployee id number          this employeeService deleteEmployee id       subscribe          data    gt           console log data            this ngOnInit                     err   gt            console log  Error

User · Answer

this is little bit out of box and I dont know whether this helps you or not but have yo tried this ngOnInit    its a function so whatever code you have in it will be recalled just like a refresh

User · Answer

constructor private router Router  private route ActivatedRoute         onReload     this router navigate    servers    relativeTo this route

User · Answer

just do this    for angular 9   import   Inject   from   angular core       import   DOCUMENT   from   angular common    constructor  Inject DOCUMENT  private document  Document      someMethode    this document location reload

User · Answer

Adding this to code to the required component s constructor worked for me    this router routeReuseStrategy shouldReuseRoute   function        return false      this mySubscription   this router events subscribe  event    gt      if  event instanceof NavigationEnd           Trick the Router into believing it s last link wasn t previously loaded     this router navigated   false            Make sure to unsubscribe from this mySubscription in ngOnDestroy     ngOnDestroy       if  this mySubscription        this mySubscription unsubscribe            Refer to this thread for more details -  https   github com angular angular issues 13831

User · Answer

Just change the routeReuseStrategy from the angular Router  this  router routeReuseStrategy shouldReuseRoute   function            return false          Set the routerproperty  quot navigated quot  to false  this  router navigated   false   Then navigate to your component  this  router navigate   routeToYourComponent     After that reinstate the old default routeReuseStrategy  this  router routeReuseStrategy shouldReuseRoute   function  future  ActivatedRouteSnapshot  curr  ActivatedRouteSnapshot   boolean             return future routeConfig     curr routeConfig   You can also make a service out of this   Injectable     providedIn   root     export class RouterService      constructor      private  activatedRoute  ActivatedRoute      private  router  Router            reuseRoutes reuse  boolean        if   reuse          this  router routeReuseStrategy shouldReuseRoute   function              return false                     if  reuse          this  router routeReuseStrategy shouldReuseRoute   function  future  ActivatedRouteSnapshot  curr  ActivatedRouteSnapshot   boolean           return future routeConfig     curr routeConfig                        async refreshPage url   string        this  router routeReuseStrategy shouldReuseRoute   function            return false              this  router navigated   false       url   await this  router navigate  url     await this  router navigate       relativeTo  this  activatedRoute          this  router routeReuseStrategy shouldReuseRoute   function  future  ActivatedRouteSnapshot  curr  ActivatedRouteSnapshot   boolean         return future routeConfig     curr routeConfig

[angular] How to Refresh a Component in Angular

Examples related to angular

Examples related to routes

Examples related to components

Examples related to refresh