ngx-ds

Deltastone Custom Component Library

I18n

To use the library in your project, you need to import the module assets in your app.module.ts to load the i18n translations

export function HttpLoaderFactory(http: HttpBackend): MultiTranslateHttpLoader {
  return new MultiTranslateHttpLoader(http, ['./assets/i18n/', './assets/form/common/i18n/']);
}

Alternatively, you can use the SRR Loaders to load the translations with ng universal.

TranslateModule.forRoot({
  loader: {
    provide: TranslateLoader,
    useFactory: (loader: ServerSideTranslateLoader) => loader,
    deps: [ServerSideTranslateLoader],
  },
  defaultLanguage: 'en',
});

Use the server side loader in the ssr module and the browser loader in the browser module. The server side loader needs the path to the translations. Provided with 'clientPath' as extraProvider in the backend ssr module.

Furthermore, you need to import the assets folder in your angular.json file.

{
  "glob": "**/*",
  "input": "node_modules/@deltastone/ngx-ds/assets/form/common",
  "output": "assets/form/common"
}

Available assets are form/common, form/editor

For the navigation, you need to import the module NavigationModule in your app.module.ts and the corresponding backend module for the navigation in your main module.ts.

CSS

For the styles to properly work you have to add the directory to your tailwind config

join(__dirname, '../../node*modules/@deltastone/ngx-ds/**/!(_.stories|*.spec).{js,mjs,html}'),

Input Code

The code input requires some external resources from the monaco editor. To include these add this to the project assets:

{
  "glob": "**/*",
  "input": "node_modules/monaco-editor",
  "output": "/assets/monaco/"
}

It also requires installation of raw-loader