angular 11 i18n translate service code example

Example 1: multilanguage site angular

//Install ngx-translate
$ npm install @ngx-translate/core @ngx-translate/http-loader rxjs --save

//In your app.module.ts:
// import ngx-translate and the http loader
import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import {HttpClient, HttpClientModule} from '@angular/common/http';

@NgModule({
  ...
  imports: [
        ...
        // ngx-translate and the loader module
        HttpClientModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [HttpClient]
            }
        })
    ],
  ...
})
export class AppModule { }
// required for AOT compilation
export function HttpLoaderFactory(http: HttpClient) {
    return new TranslateHttpLoader(http);
}

//In the app.component.ts
import {Component} from '@angular/core';
import {TranslateService} from '@ngx-translate/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent {
    constructor(private translate: TranslateService) {
        translate.setDefaultLang('en');
    }
  useLanguage(language: string) {
    this.translate.use(language);
	}
}

//create the JSON file for the English translation: assets/i18n/en.json.
{
    "demo": {
        "title": "Translation demo",
        "text": "This is a simple demonstration app for ngx-translate"
    }
}
//do the same with another language (for example german)

//In the app.component.html
<p [translate]="'demo.text'"></p>

<button (click)="useLanguage('en')">en</button>
<button (click)="useLanguage('de')">de</button>

Example 2: i18n angular

content_copy
      
      <span i18n>Updated: {minutes, plural,
  =0 {just now}
  =1 {one minute ago}
  other {{{minutes}} minutes ago by {gender, select, male {male} female {female} other {other}}}}
</span>