Noodles Practicing Medicine

    TypeScript icon, indicating that this package has built-in type declarations

    3.0.1 • Public • Published


    npm version Main CI & CD

    Common Nordic Cool components for Angular.

    Demo & documentation

    Compatibility table

    @vismaux/ngx-nordic-cool @vismaux/nordic-cool @angular/*
    >=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


    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.
      @import '~@vismaux/ngx-nordic-cool/styles/global.scss';
      // 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.


    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
      '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. (or at least not tested)

    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. 🙏


    npm i @vismaux/ngx-nordic-cool

    DownloadsWeekly Downloads





    Visma License

    Unpacked Size

    1.3 MB

    Total Files


    Last publish


    • lars-visma
    • uxvisma
    • cristina.iftode
    • mihai.baciu
    • dzonatan
    • dreiv
    • janispp