Add a Page
Last updated
Was this helpful?
Last updated
Was this helpful?
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.
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.
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 can be used for the icon property.
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) }}).
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.
Step 6: Import TranslocoModule and sort the keys alphabetically in the @Component decorator in account-page.component.ts.
Step 7: Add Page Component to the template.
Step 8: Update the spec file (account-page.component.spec.ts).
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.
Done!
