Regarding on refresh of page global values get vanished.

Question

Dear All, I have a small doubt regarding in my component of Angular 5 I have created on dynamic dictonary for global use purpose. Its working fine but whenever I refresh the page then all values gets vanished. At that time if I am calling any method then I am getting error. So how can I overcome on above problem. Thanking You in advance.

Abhishek Mishra · Answer

Hello @Mandar , As per my understanding your dynamic dictionary is in .ts file means in angular part. And when you refresh the page the angular app reintializes and data is lost.There is no any direct way to prevent the data after refresh. So work around is you can store the data in local storage or cookie of your browser if data is not sensitive. Or else you can create observer method to get the data from your server or api when your app is loaded.

Mandar Shinde · Answer

Hello Veerendra sir, I know that we can store our data into local storage and even in local session. I don't want to save some important data in those storage that's why I am looking for better solution.

Veerendra Annigere · Answer

Angular 5 have in built local storage. We can use like this var data ={ name: "test" }; localStorage.setItem( "REFRESHDATA" ,JSON.stringify(data)) var _data =JSON.parse(localStorage.getItem( "REFRESHDATA" )) ;

Mandar Shinde · Answer

Hello Abhishek sir , Following is structure of my project :- Global.service.ts @Injectable() export class GlobalService { public StudentID: number; public StudentName = '' ; public StudentVisibleMenu = {}; constructor() { } } GlobalModule.ts export class GlobalModule { static forRoot() { return { ngModule: GlobalModule, providers: [GlobalService] } } } AppModule.ts @NgModule({ imports: [ BrowserAnimationsModule, FormsModule, HttpModule, HttpClientModule, ComponentsModule, RouterModule, CommonModule, AppRoutingModule, BrowserModule, BrowserAnimationsModule, NgbModule.forRoot(), GlobalModule.forRoot() ], declarations: [ AppComponent ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Navbar.ts // For Admin Master this.global. StudentVisibleMenu [ 'library' ] = '1' ; In navbar.ts I am iterating result which is coming from database and assigning values to StudentVisibleMenu dictionary. Before what I was doing that, on every components constructor loaded I was calling one function. So to overcome on this problem I am assigning this data once only as Navbar components constructor get called. Please let me any easy solution if anyone knows. Thanking you in advanced.

Abhishek Mishra · Answer

@Mandar Share your code snippet of ts file , So that I can help you to solve your problem

Mandar Shinde · Answer

Hello Abhishek sir, Yes you are correct. How can I create observer method? Will you suggect me to overcome on above problem. Thanking you in advanced.