To start, the first step is to import ngx-translate in your app.component.ts file:
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
....
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http);
}
...
imports: [
...
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
]
...
Next, you will need two files under assets folder, for example en.json for English and es.json for Spanish. In en.json:
{
"something": "translation of something in English"
}
In es.json:
{
"something": "translation of something in Spanish"
}
After that, in the component where your code is located:
import { TranslateService } from '@ngx-translate/core';
...
constructor(private translate: TranslateService) {
translate.setDefaultLang('en');
}
....
Use the translation in your template like below:
<div *ngFor="let service of services">
<span><img [src]="service.imgPath" alt="{{ service.name }}"/></span>
<h4>{{service.name | translate}}</h4>
<p>{{service.desc}}</p>
</div>
Ensure that the 'services' object contains strings that can be translated.