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
-
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. -
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';
-
Setup animations by importing
BrowserAnimationsModule
in yourapp.module.ts
.Use
NoopAnimationsModule
in case you don't want animations. -
This library's i18n is based on
@angular/localize
, so make sure you've installed that. Otherwise, runng add @angular/localize
. In case you're not familiar with angular's i18n, read the localization section below. -
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.