Angular

Instructions for how to incorporate the UKHO Design System into an Angular project.

Contents

Installation

For projects using Angular the first step is to install the package using a package manager so that it can be used in your project:

NPM

npm install @ukho/admiralty-angular

or

Yarn

yarn add @ukho/admiralty-angular

Using the components

Once you've installed the package, you can start using the components in your project.

Import the components into your AppModule or specific Angular module.

// app.module.ts
import { NgModule } from "@angular/angular";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
import { DesignSystemModule } from "@ukho/admiralty-angular";

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

And then import the admiralty styling and theme into the main CSS file for your project

/* styles.css */
@import "@ukho/admiralty-core/styles/admiralty.bundle.css";
@import "@ukho/admiralty-core/themes/default.css";

In an Angular component template, simply use the components as you would with any other HTML elements:

<admiralty-input label="What is your name?" type="text"></admiralty-input>
Privacy PolicyAccessibility