How to Update a Component without refreshing full page - Angular

Question

My Page structure is    lt app-header gt  lt  app-header gt   lt router-outlet gt  lt  router-outlet gt   lt app-footer gt  lt  app-footer gt    How can I update refresh the app-header component  without refreshing the whole page   I want to hide a  Sign-In  link in the header  once the user had successfully logged in  The header is common in all the components routes

User · Answer

To update component     Injectable       export class LoginService      private isUserLoggedIn  boolean   false       public setLoggedInUser flag       you need set header flag true false from other components on basis of your requirements  header component will be visible as per this flag then     this isUserLoggedIn  flag          public getUserLoggedIn    boolean   return this isUserLoggedIn     Login Component ts             Login Component               constructor public service  LoginService     public login    service setLoggedInUser true                   Inside Header component   Header Component ts         HeaderComponent            constructor public service  LoginService              public getUserLoggedIn    boolean   return this service getUserLoggedIn               template of header component  Check for user sign in here   lt button  ngIf  getUserLoggedIn    gt Sign Out lt  button gt   lt button  ngIf   getUserLoggedIn    gt Sign In lt  button gt    You can use many approach like show hide using ngIf  App Component ts AppComponent    public showHeader  boolean   true    App Component html  lt div  ngIf  showHeader  gt     you show hide on basis of this ngIf and header component always get visible with it s lifecycle hook ngOnInit   called all the time when it get visible  lt app-header gt  lt  app-header gt   lt  div gt   lt router-outlet gt  lt  router-outlet gt   lt app-footer gt  lt  app-footer gt    You can also use service   Injectable   export class AppService   private showHeader  boolean   false   public setHeader flag       you need set header flag true false from other components on basis of your requirements  header component will be visible as per this flag then this showHeader   flag     public getHeader    boolean   return this showHeader       App Component ts     AppComponent        constructor public service  AppService           App Component html      lt div  ngIf  service showHeader  gt     you show hide on basis of this ngIf and header component always get visible with it s lifecycle hook ngOnInit   called all the time when it get visible      lt app-header gt  lt  app-header gt       lt  div gt       lt router-outlet gt  lt  router-outlet gt       lt app-footer gt  lt  app-footer gt

User · Answer

Angular will automatically update a component when it detects a variable change     So all you have to do for it to  refresh  is ensure that the header has a reference to the new data  This could be via a subscription within header component ts or via an  Input variable       an example     main html   lt app-header  header-data   headerData  gt  lt  app-header gt    main component ts  public headerData int   0   ngOnInit        setInterval     gt  this headerData      250       header html   lt p gt   data   lt  p gt    header ts   Input  header-data   data    In the above example  the header will recieve the new data every 250ms and thus update the component     For more information about Angular s lifecycle hooks  see  https   angular io guide lifecycle-hooks

User · Answer

You can use a BehaviorSubject for communicating between different components throughout the app  You can define a data sharing service containing the BehaviorSubject to which you can subscribe and emit changes   Define a data sharing service   import   Injectable   from   angular core   import   BehaviorSubject   from  rxjs     Injectable   export class DataSharingService       public isUserLoggedIn  BehaviorSubject lt boolean gt    new BehaviorSubject lt boolean gt  false       Add the DataSharingService in your AppModule providers entry    Next  import the DataSharingService in your  lt app-header gt  and in the component where you perform the sign-in operation  In  lt app-header gt  subscribe to the changes to isUserLoggedIn subject    import   DataSharingService   from    data-sharing service    export class AppHeaderComponent           Define a variable to use for showing hiding the Login button     isUserLoggedIn  boolean       constructor private dataSharingService  DataSharingService                Subscribe here  this will automatically update              isUserLoggedIn  whenever a change to the subject is made          this dataSharingService isUserLoggedIn subscribe  value   gt                this isUserLoggedIn   value                        In your  lt app-header gt  html template  you need to add the  ngIf condition e g      lt button  ngIf   isUserLoggedIn  gt Login lt  button gt    lt button  ngIf  isUserLoggedIn  gt Sign Out lt  button gt    Finally  you just need to emit the event once the user has logged in e g    someMethodThatPerformsUserLogin            Some code                      After the user has logged in  emit the behavior subject changes      this dataSharingService isUserLoggedIn next true

User · Answer

To refresh the component at regular intervals I found this the best method  In the ngOnInit method setTimeOut function ngOnInit    void     setTimeout      gt    this ngOnInit      1000   10      10 is the number of seconds

User · Answer

One of many solutions is to create an  Injectable   class which holds data that you want to show in the header  Other components can also access this class and alter this data  effectively changing the header   Another option is to set up  Input   variables and  Output   EventEmitters which you can use to alter the header data   Edit Examples as you requested    Injectable   export class HeaderService       private  data      set data value            this  data   value            get data             return this  data            in other component   constructor private headerService  HeaderService         Somewhere this headerService data    abc     in header component   let headerData   constructor private headerService  HeaderService        this headerData   this headerService data      I haven t actually tried this  If the get set doesn t work you can change it to use a Subject        Simple Subject   example  let subject   new Subject    this subject subscribe response   gt      console log response      Logs  hello      this subject next  hello

[javascript] How to Update a Component without refreshing full page - Angular

Examples related to javascript

Examples related to angular

Examples related to refresh

Examples related to angular-components