Getting Started Standalone

Setting up a project

Initialize a new project by inputting the following:

ng new project-name

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 FormUtilsModule and setAssetPath into your app's root module to ensure asset paths are set correctly and reactive forms work as intended:

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

setAssetPath(import.meta.url);

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
  imports: [FormUtilsModule]
})

export class AppComponent {}

Usage

Digital Guidelines component modules can then be imported into your standalone component and used within your application:

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { SomHeaderModule, SomListItemModule, SomListModule } from '@migov/digital-guidelines-core-angular/standalone';

@Component({
  selector: 'app-header',
  standalone: true,
  imports: [SomHeaderModule, SomListModule, SomListItemModule, CommonModule],
  templateUrl: './header.component.html',
  styleUrl: './header.component.scss'
})

export class HeaderComponent {}