@abgov/angular-components NPM | npm.io

3.0.2 • Published 2 months ago

Install

Weekly downloads

589

License

Apache-2.0

Repository

Last release

2 months ago

Angular UI Components

npm (scoped)

This is the web component library and utilizes Angular's web component integration.

Add Dependencies

Angular >=16 dependencies

npm i @abgov/web-components
npm i @abgov/angular-components

Angular <16 dependencies

npm i @abgov/web-components
npm i @abgov/angular-components@2.5.0

Icons

Link 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>

Components

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 {}

Styles

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"
  ]
}

Visit Design System

GoA ui-components Angular

@everything-registry/sub-chunk-22

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

9 months ago

10 months ago

10 months ago

10 months ago

9 months ago

9 months ago

9 months ago

11 months ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago