View app-comp.component.ts
@Component({ | |
selector: 'app-comp', | |
templateUrl: './app-comp.component.html', | |
providers: [ | |
{ | |
provide: TRANSLOCO_LOADING_TEMPLATE, | |
useValue: '<p>Translation is loading...</p>' | |
} | |
] | |
}) |
View app.component.spec.ts
import { TestBed, async } from '@angular/core/testing'; | |
import { RouterTestingModule } from '@angular/router/testing'; | |
import { AppComponent } from './app.component'; | |
import { getTranslocoModule } from './transloco-testing.module'; | |
describe('AppComponent', () => { | |
beforeEach(async(() => { | |
TestBed.configureTestingModule({ | |
imports: [ | |
getTranslocoModule(), |
View app.module.ts
import { TranslocoMessageFormatModule } from '@ngneat/transloco-messageformat'; | |
@NgModule({ | |
imports: [ | |
TranslocoMessageFormatModule.init() | |
] | |
}) |
View app.module.ts
import { BrowserModule } from '@angular/platform-browser'; | |
import { NgModule } from '@angular/core'; | |
import { AppRoutingModule } from './app-routing.module'; | |
import { AppComponent } from './app.component'; | |
import { HttpClientModule } from '@angular/common/http'; | |
import { TranslocoRootModule } from './transloco-root.module'; | |
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; | |
import { TranslocoLocaleModule } from '@ngneat/transloco-locale'; |
View home.component.ts
onChange(target) { | |
this.translocoService.setActiveLang(target); | |
} |
View home.component.html
<h5>{{ componentVariable }}</h5> | |
<h5>{{ componentVariableSecond }}</h5> | |
<label for="lang">Choose a language:</label> | |
<select (change)="onChange($event.target.value)" id="lang"> | |
<option *ngFor='let l of languages' [value]="l.code">{{l.label | transloco }}</option> | |
</select> |
View en.json
{ | |
"title": "English title", | |
"hello": "Welcome", | |
"containers": "ng-containers are useful when you don't want to have too many html layers", | |
"dashboard": { | |
"description": "You may use scopes for structuring translations" | |
} | |
} |
View home.module.ts
import { NgModule } from '@angular/core'; | |
import { CommonModule } from '@angular/common'; | |
import { HomeComponent } from './home.component'; | |
import { RouterModule } from '@angular/router'; | |
import { TranslocoRootModule } from '../transloco-root.module'; | |
import { TranslocoLocaleModule } from '@ngneat/transloco-locale'; | |
@NgModule({ | |
declarations: [ |
View home.module.ts
import { NgModule } from '@angular/core'; | |
import { CommonModule } from '@angular/common'; | |
import { HomeComponent } from './home.component'; | |
import { RouterModule } from '@angular/router'; | |
import { TranslocoRootModule } from '../transloco-root.module'; | |
import { TranslocoLocaleModule } from '@ngneat/transloco-locale'; | |
@NgModule({ | |
declarations: [ |
View transloco-root.module.ts
import { HttpClient } from '@angular/common/http'; | |
import { | |
TRANSLOCO_LOADER, | |
Translation, | |
TranslocoLoader, | |
TRANSLOCO_CONFIG, | |
translocoConfig, | |
TranslocoModule | |
} from '@ngneat/transloco'; | |
import { Injectable, NgModule } from '@angular/core'; |
NewerOlder