Getting Started Module

Setting up a project

Initialize a new project by inputting the following:

ng new project-name --no-standalone

ng new prompts you for information about features to include in the initial project. Accept the defaults by pressing the Enter or Return key. The Digital Guidelines team recommends SCSS when selecting the type of stylesheet format to use in your project. This will give your application access to additional styling helpers/mixins provided by the Digital Guidelines project.

Install Angular package

Run the following code to install Digital Guideline dependencies:

npm install @migov/digital-guidelines-core-angular

Import CSS

Open your editor and navigate to angular.json, and import the Digital Guidelines CSS:

"build": {
  "options": {
    "styles": [
      "node_modules/@migov/digital-guidelines-core/dist/digital-guidelines-core/digital-guidelines-core.css",
      "src/style.scss"
    ]
  }
}

Copy assets

The assets folder from Digital Guidelines containing icons will also need to be added to your angular.json file. In order to do so, copy and paste the following code into your editor:

"build": {
  "options": {
    "assets": [
      ...,
      {
        "glob": "**/*",
        "input": "node_modules/@migov/digital-guidelines-core/dist/digital-guidelines-core/assets",
        "output": "/assets/"
      }
    ]
  }
}

Import DigitalGuidelinesCoreAngularModule, FormUtilsModule and setAssetPath into your app's root module. Importing these modules will ensure all Digital Guidelines components are added to your application, reactive forms work as intended and asset paths are set correctly:

import { DigitalGuidelinesCoreAngularModule, FormUtilsModule } from '@migov/digital-guidelines-core-angular';
import { setAssetPath } from '@migov/digital-guidelines-core/components'

setAssetPath(import.meta.url);

@NgModule({
	imports: [DigitalGuidelinesCoreAngularModule, FormUtilsModule],
})

export class AppModule {}

Usage

Components can then be used within your application:

<som-button size="block" color="primary">call to action</som-button>