Regarding on refresh of page global values get vanished.

Mandar Shinde

7y3.4kAngular

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.

6 Replies

Know the answer? Post it — somebody with the same question will find it here.

Abhishek Mishra7y ago
Accepted 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.
+2
Mandar Shinde7y ago
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.
0
Veerendra Annigere7y ago
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")) ;
0
Mandar Shinde7y ago
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.
0
Abhishek Mishra7y ago
@Mandar Share your code snippet of ts file , So that I can help you to solve your problem
0
Mandar Shinde7y ago
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.
0