Add a Page

Let's say you want to add a new page called Account.

Step 1: Generate a new component in the components folder with the page suffix to maintain consistency.

Terminal

ng g c components/account-page

Step 2: Enable routing to this component by adding it to app.routes.ts. Ensure that you import from @jet/components for easy refactoring in the future.

app.routes.ts

export const routes: Routes = [
  { component: HomePageComponent, path: '' },
  { component: SettingsPageComponent, path: 'settings' },
  { component: AccountPageComponent, path: 'account' },
  { path: '**', redirectTo: '/' },
];

Step 3: Show a link to this page in the side navigation and bottom navigation by adding it to this.pages in app.component.ts. The order here will determine the order in which pages appear in both the navigations. Any Material Icon can be used for the icon property.

app.component.ts

this.pages = [
  {
    icon: 'home',
    nameKey: 'home',
    url: '/',
  },
  { icon: 'account_circle', nameKey: 'account', url: '/account' },
  {
    icon: 'settings',
    nameKey: 'settings',
    url: '/settings',
  },
];

Step 4: On top of this.pages, you'll notice a special comment. It helps notify Transloco Keys Manager of dynamic translation keys. Add the nameKey value to that list, since nameKey is used in the template to dynamically refer to a translation key ({{ t(page.nameKey) }}).

app.component.ts

/**
 * Dynamic keys to include in translations (https://github.com/jsverse/transloco-keys-manager?tab=readme-ov-file#dynamic-keys):
 *
 * t(jet-app.home)
 * t(jet-app.settings)
 * t(jet-app.account)
 */

Step 5: In the template of the new component (account-page.component.html), enclose the generated content in an ng-container element for Transloco to work. We use the value of selector in the @Component decorator for prefix for consistency. This will scope all translation keys detected in this template under jet-account-page.

account-page.component.html

<ng-container *transloco="let t; prefix: 'jet-account-page'">
  <p>account-page works!</p>
</ng-container>

Step 6: Import TranslocoModule and sort the keys alphabetically in the @Component decorator in account-page.component.ts.

account-page.component.ts

@Component({
  imports: [
    TranslocoModule,
  ],
  selector: 'jet-account-page',
  standalone: true,
  styleUrl: './account-page.component.scss',
  templateUrl: './account-page.component.html',
})

Step 7: Add Page Component to the template.

account-page.component.ts

export class AccountPageComponent {
  public constructor(
    private readonly _loggerService: LoggerService,
  ) {
    this._loggerService.logComponentInitialization('AccountPageComponent');
  }
}

Step 8: Update the spec file (account-page.component.spec.ts).

account-page.component.spec.ts

await TestBed.configureTestingModule({
  imports: [TranslocoTestingModule.forRoot({}), AccountPageComponent],
  providers: [
    { provide: LoggerService, useClass: LoggerServiceMock },
    { provide: TitleService, useClass: TitleServiceMock },
  ],
}).compileComponents();

Step 9: Run i18n:extract script in package.json. This will add the missing keys with sample values to your translation files. Update the values in all translation files.

Terminal

npm run i18n:extract

ar.json

"jet-account-page": {
  "title": "Missing value for 'jet-account-page.title'"
},
"jet-app": {
  "account": "Missing value for 'jet-app.account'"
},

en.json

"jet-account-page": {
  "title": "Missing value for 'jet-account-page.title'"
},
"jet-app": {
  "account": "Missing value for 'jet-app.account'"
},

Done!

An Account Page Component in LTR language and font, dark theme and mobile layout

An Account Page Component in LTR language and font, light theme and desktop layout