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>