Package Exports
- @abgov/angular-components
- @abgov/angular-components/bundles/abgov-angular-components.umd.js
- @abgov/angular-components/fesm2015/abgov-angular-components.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@abgov/angular-components) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Angular UI Components
This is the web component library and utilizes Angular's web component integration.
Add Dependencies
npm i @abgov/web-components
npm i @abgov/angular-componentsLink ionicons in app/index.html Add the following in the head element
<script
type="module"
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
></script>
<script
nomodule
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
></script>Update src/app/app.module.ts as per the four steps below
// 1. Import the CUSTOM_ELEMENTS_SCHEMA
import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
// 2. Import the libs
import "@abgov/web-components";
import { AngularComponentsModule } from "@abgov/angular-components";
@NgModule({
declarations: [AppComponent],
imports: [
// 3. Add the needed imports
BrowserModule,
AngularComponentsModule,
],
providers: [],
bootstrap: [AppComponent],
// 4. Add the CUSTOM_ELEMENTS_SCHEMA to the NgModule
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}Add the styles link in the src/styles.css file
@import "@abgov/web-components/index.css";VS Code Support
In order to use VS Code's HTML/CSS Custom Data
support to enhance GoA Web Components HTML editing experience, include our html custom data setting found in .vscode/settings.json:
{
"html.customData": [
"./node_modules/@abgov/web-components/html.html-data.json"
]
}