@tilde-nlp/ngx-common

NgxCommon

Functions/components that might be usefull to share.

Images

This library contains images folder which contains at least tildes logo and favicon. To add them to your project append angular.json file - projects.{appName}.architect.build.options.assets with this object:

  {
     "glob": "**/*",
     "input":"./node_modules/@tilde-nlp/ngx-common/images",
     "output":"images"
  }

After this, your images will be under: http://localhost:4200/images/.

Styling

This library contains also scss files so some kind of common styling can happen between different projects. Idea is to provide scheme for common color usage and easy configuration of them.

Also fonts and material icons are stored in this library for offline use and direct import.

Implementation in other projects

The goal of these scss files is to create default color pallete, and some common styles for components, and make it easier to change layout colors.

Colors

Note, this is not recommended way, since you miss out other defined styles To be able to use default tilde colors, you need to import sass-variables-to-css mixin and include it in your stylesheet as follows:

/* Your stylesheet, eg. styles.scss*/
@import "ROUTE_TO_STYLES_FOLDER/sass-variables-to-css.mixin.scss";
...

@include sass-variables-to-css();

After that you can start using pre defined tilde colors as follows:

.my-class {
  color: var(--TILDE_COLOR_NAME);
}

Check the list with available colors. It is also easy to append or override default colors:

/* Define your own custom color map*/
$my-pallete: (
  my-color-1: red,
  my-color-2: green,
);
/*Pass it to sass-variables-to-css mixin
Note that you need to include this mixin only once.*/
@include sass-variables-to-css($my-pallete);

Recommended way _this way includes additional mixins for easier component sytyling. For more accurate, check source code. Instead of sass-variables-to-css import tld-all-mixins';. Example:

/*Import mixin*/
@import "ROUTE_TO_STYLES_FOLDER/mixins/tld-all-mixins.mixin.scss";
/*Include mixin*/
@include tld-all-mixins();

Note that you can use same approach to override or append default tilde color pallete.

Styles

Import tilde-style.scss to acces pre defined styles for easier component styling.

Services

icon service

Service created to register custom icons and use them with angular svgIcon.

missing translation handler

This library offers custom missing translation handler that is based on ngx/translate. This handler allows to pass default value to translate pipe. This is useful when there is some localization key, that is dynamic and there can be situations that it is not translated in any of languages - in this case by default localization key gets show, but you may want to handle this by showing some basic value from object.

Usage:

Configure custom missing translation handler as provider:

// in module where you import TranslateModule
import { MissingTranslationHelper } from '@tilde-nlp/ngx-common';
....
 TranslateModule.forRoot({
      missingTranslationHandler: {
        provide: MissingTranslationHandler,
        useClass: MissingTranslationHelper
      }
    })

Pass default value to translate pipe in component:

    {{'KEY_THAT_DOES_NOT_EXIST' | translate: {default: 'My default value'} }}