从本地存储中获取数据并使用 ngx-translate 将其显示在视图中 | Angular

Question

I have a task have to display data from localstorage in html using ngx-translate. I have an backend spring-boot application with a controller that sends data downloaded from the database to the frontend. This data is stored in localstorage. They are literals. I have little in common with Angular.. I work in Java, but I need to do it:/ I am asking for your understanding.

localstorage:

          key            |          value
--------------------------------------------------
Platform.Title           |         "Title"
Platform.Home            |         "Home"
Platform.Dashboard       |         "Dashboard"
Library.Title            |         "Library"
Library.Home             |         "Home"
Library.Dashboard        |         "Dashboard"

This what i need to do is: make service to get data from localstorage, i know i have to do it with

localstorage.get(key);

What I need to achieve is eq

<mat-card-title>{{'Platform.Title' | translate }}</mat-card-title>

and this should show value of "Platform.Title" - here "Title"

I have keys which starts with different values Platform or Library. In platform.component.html i need to display all starts with "Platform" and in library.component.html all with "Library"

My ideas so far have not worked, it does not even show because it is a shame. I have no idea how should servis in Angular looks like or some ngx-translate loader to achieve the planned effect. Could someone please help me? Show the way to a solution or maybe a sample solution.

Answer 1

you can get your data from local storage in this way

in your component.ts

public title;

ngOnInit(){
  this.title = localStorage.getItem('KEY');
}

in your HTML

<mat-card-title>{{title | translate }}</mat-card-title>

Answer 2

in your app module add

export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http);}

in your app component add

 constructor(private translate: TranslateService) {
    translate.setDefaultLang('en');
}