Angular assets for Norwegian

Component library to facilitate setup of new Norwegian projects. The library contains common UI building blocks for Norwegian sites. Like buttons, accordions, grid system, filter and search boxes, and so on.

Installation

In order to use components in your project, you have to install @norwegian/core-components as a dependency of you project.

npm i @norwegian/core-components

When it's in there, you can start importing the stuff you need. Like this:

In app.module.ts:

import { ButtonModule } from '@norwegian/core-components';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ButtonModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

In app.component.html:

<nas-button primary>Click me!</nas-button>

What about the SCSS?

The SCSS files for each component is compiled and injected into the component styles. In addition to this, the variables, mixins and such is included in the distributed package and is available for your project.

If you just want the styles:

@import '~@norwegian/core-components/styles/index';

Exposing the assets

The styles refer til asset files like fonts and icons. These files are part of the distributed package and you need to expose them through the angular compiler in order for everything to come together. You do this through defining app assets in your .angular-cli.json file. Note that you need a license to use these assets in your site. These can be provided through NAB.

Add the following line to the apps.assets array:

{
  "glob": "**/*",
  "input": "./node_modules/@norwegian/core-components/assets",
  "output": "./assets/"
}

Tech details

• Angular 16
• AOT/JIT compatible component library
• Styles and templates are inlined at build-time, no transpiling
• Cherry-pick the modules you need. No need to include everything
• Both components and modules are exposed, making it possible to compose new modules from the components

Adding your own component

Project is currenty not open source, and only developers which is a part of the Norwegian team can contribute with new components, features, bugfixes and patches. For the Norwegian team, please check out the internal documentation site for step-by-step introduction to the library.

Version History

See CHANGELOG for history