@vismaux/ngx-nordic-cool

ngx-nordic-cool

Common Nordic Cool components for Angular.

• 🔥 Follows the official nordic cool design;
• 🔥 Uses storybook;
• 🔥 Dark mode ready;
• 🔥 Follows semantic versioning;
• 🔥 Uses conventional commits together with standard version for a better changelog;

Demo & documentation

https://ngx-nordic-cool.web.app

Compatibility table

@vismaux/ngx-nordic-cool	@vismaux/nordic-cool	@angular/*
>=4.0.0	>=4.10.0	>=13.0.0
>=3.2.0	>=4.10.0	>=12.0.0
>=3.0.0	>=4.8.11	>=12.0.0
>=2.0.0	>=4.8.10	>=11.0.0
>=1.0.0 <2.0.0	>=4.8.0 <4.8.10	>=11.0.0

Installation

ng add @vismaux/ngx-nordic-cool

Manual installation

1. Install this package together with two peer dependencies:
   npm i @vismaux/ngx-nordic-cool @vismaux/nordic-cool @angular/cdk

   If you're using npm@v7 you only have to install @vismaux/ngx-nordic-cool as it will automatically install peer dependencies for you.

2. Import required styles inside your global (e.g. style.scss) file:

   // One import that includes both global `@vismaux/nordic-cool` styles (dark-light) and extensions needed for the library.
   @use '@vismaux/ngx-nordic-cool';
   
   // In case you don't need the dark mode, don't use SCSS, or just want to have a more granual control, import these prebuilt files manully:
   // @import '~@vismaux/nordic-cool/dist/css/nc.light-dark.mode.min.css';
   // @import '~@angular/cdk/overlay-prebuilt.css';

3. Setup animations by importing BrowserAnimationsModule in your app.module.ts.

   Use NoopAnimationsModule in case you don't want animations.

4. This library's i18n is based on @angular/localize, so make sure you've installed that. Otherwise, run ng add @angular/localize. In case you're not familiar with angular's i18n, read the localization section below.

5. Import the global NordicCoolModule module that contains all components,
   or pick specific ones (recommended), e.g. NcDatepickerModule.

Localization

If you're not using the native angular localization process that requires building application for each locale, you can take use of dynamically loading translations which is available from Angular v9.

import { loadTranslations } from '@angular/localize';

// Make sure this is called *before* initialization of components that uses these translations
loadTranslations({
  'nc-alert-close': 'Uždaryti',
});

To get the list of all possible translations you can run ng extract-i18n.

Browser support

Follows PDAB Compatibility Policy:
the latest major stable version of Firefox, Chrome, Safari and Edge are supported. No support for IE.

Contributing to the library

You are more than welcome to open an issue or create a pull-request.
In the latter case, please make sure the changes follows the same coding principles,
is covered with unit tests and meets the official nordic cool design guidelines. 🙏