Skip to content

Instantly share code, notes, and snippets.

Avatar

Roman Kutanov kutanov

View GitHub Profile
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';
You can’t perform that action at this time.