BeyondIqoaSharedNg

This project regroups a library of shared components that can be used within Angular application/library and a showcase application to see components in action.

Showcase

To see the components in action:

npm i
npm run link
npm run bs

Then go to localhost:4200

UI components

Color picker

To use the color picker in your application/library, import IqoaColorPickerModule from @sixense/beyond-iqoa-shared-ng, then use it in your template like any other FormControl:

<iqoa-color-control [formControl]="colorPickerControl"></iqoa-color-control>
<iqoa-color-control formControlName="color"></iqoa-color-control>

Shared functionnalities

Translations

In order to use the shared translations service, you need to provide the translations or your application, by merging them with the existing translations. You can do so by loading your translations in your main module.

In your app's module or library's main module:

export function appInitLoadTranslations(iqoa: IqoaTranslateService): () => Promise<void> {
    iqoa.setTranslation('fr-fr', frFR);
    iqoa.setTranslation('en-en', enGB);
    return () => Promise.resolve();
}

@NgModule({
    ...
    providers: [
        ...
        {
            provide: APP_INITIALIZER,
            useFactory: appInitLoadTranslations,
            deps: [IqoaTranslateService],
            multi: true,
        },
    ],
})

You can then use the service or the pipe by importing IqoaTranslateModule into your module.

Then, in your .ts:

import { IqoaTranslateService } from '@sixense/beyond-iqoa-shared-ng';
constructor(
    private readonly iqoaTranslateService: IqoaTranslateService,
) {
    const translated = this.iqoaTranslateService.translate('common.my_translation');
}

Or in your .html:

<h3>
    {{ 'common.my_translation' | iqoaTranslate }}
</h3>

Error handling

In order to use the shared error handler service, you need to provide IqoaGlobalErrorHandlerService as an HTTP_INTERCEPTOR and to configure your app this way.

export function globalErrorHandlerConfig(env: EnvironmentService): IqoaErrorHandlerConfig {
    return { apiUrl: env.apiUrl || '', errorCodePrefix: 'YOUR_APP_CODE' };
}

@NgModule({
    ...
    providers: [
        ...
        {
            provide: HTTP_INTERCEPTORS,
            useClass: IqoaGlobalErrorHandlerService,
            multi: true,
        },
        {
            provide: IQOA_ERROR_HANDLER_CONFIG,
            useFactory: globalErrorHandlerConfig,
            deps: [EnvironmentService],
            multi: true,
        },
    ],
})

apiUrl will filter the requests that should be handled for your app. errorCodePrefix will be used to generate an error message telling that your API is unreachable and to filter errors (the errors API is sending should have a property "code" that contains this errorCodePrefix).

If you have added your translations like explained above, IqoaGlobalErrorHandlerService will use your translations to display errors in a comprehensive way. Error messages will be displayed in a coherent way through your app, and all you need to do then is to handle errors where you want, like for example if you want to highlight a field in a form.