I have successfully implemented ngx-translate for multi-language support in my application. However, I am now looking to extend this functionality to my menu items. How can I achieve this for my 3 menu items with different titles?
ts file
appPages: PageObj[] = [
{ title: 'Profile', component: ProfilePage, icon: 'person' },
{ title: 'My Account', component: MyaccountPage, index: 1, icon: 'cash' },
{ title: 'FAQ', component: FaqPage, index: 3, icon: 'chatbubbles' }
];
HTML
<button ion-item menuClose *ngFor="let p of appPages" (click)="openPage(p)">
<ion-icon item-left [name]="p.icon"></ion-icon>
{{p.title}}
</button>
And my module.ts
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {HttpClientModule, HttpClient} from '@angular/common/http';
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import {AppComponent} from './app';
// AoT requires an exported function for factories
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http);
}
@NgModule({
imports: [
BrowserModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
],
bootstrap: [AppComponent]
})
export class AppModule { }