NetanelBasal / ng-webpack-playground

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

  • Run yarn install both on the root directory and the transloco-keys-manager directory.
  • Run npm start

The project contains two pages. The main page, and a lazy load page which also scoped to todos-page.

You can start adding keys to app.component.html, and todos-page.component.html. Here are a couple of examples:

// app.component.html

<ng-template transloco let-t>
  {{ t.newKey }}
  {{ t.some.nested.key }}
</ng-template>

<p>{{ 'newPipeKey' | transloco }}</p>
// todos-page.component.html

<ng-template transloco let-t>
  {{ t.todosPage.newKey }}
  {{ t.todosPage.should.be.in.scope.file }}
</ng-template>

<ng-container *transloco="let t">
  {{ condition ? t.todosPage.wow : t.global }}
</ng-container>

Or in app.componen.ts:

export class AppComponent {
  constructor(private translocoService: TranslocoService) {
    translocoService.translate('keyFromComponent');
  }
}

When you hit save, you should see the keys in the translation files. (en.json, es.json)

Find Missing Keys

Close the dev-server, and remove some keys from the translation file/s. In the root project run npm run validate-keys. Missing keys should be added, and logged.

About


Languages

Language:TypeScript 71.8%Language:HTML 14.3%Language:JavaScript 13.2%Language:CSS 0.6%