@abgov/angular-components 2.0.1 → 2.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +71 -4
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,7 +1,74 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Angular UI Components
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
This is the web component library and utilizes Angular's web component integration.
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
Add Dependencies
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm i @abgov/web-components
|
|
11
|
+
npm i @abgov/angular-components
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
Link ionicons in app/index.html
|
|
15
|
+
Add the following in the head element
|
|
16
|
+
|
|
17
|
+
```html
|
|
18
|
+
<script
|
|
19
|
+
type="module"
|
|
20
|
+
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
|
|
21
|
+
></script>
|
|
22
|
+
<script
|
|
23
|
+
nomodule
|
|
24
|
+
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
|
|
25
|
+
></script>
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
Update `src/app/app.module.ts` as per the four steps below
|
|
29
|
+
|
|
30
|
+
```typescript
|
|
31
|
+
// 1. Import the CUSTOM_ELEMENTS_SCHEMA
|
|
32
|
+
import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
|
|
33
|
+
|
|
34
|
+
// 2. Import the libs
|
|
35
|
+
import "@abgov/web-components";
|
|
36
|
+
import { AngularComponentsModule } from "@abgov/angular-components";
|
|
37
|
+
|
|
38
|
+
@NgModule({
|
|
39
|
+
declarations: [AppComponent],
|
|
40
|
+
imports: [
|
|
41
|
+
// 3. Add the needed imports
|
|
42
|
+
BrowserModule,
|
|
43
|
+
AngularComponentsModule,
|
|
44
|
+
],
|
|
45
|
+
providers: [],
|
|
46
|
+
bootstrap: [AppComponent],
|
|
47
|
+
// 4. Add the CUSTOM_ELEMENTS_SCHEMA to the NgModule
|
|
48
|
+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
|
49
|
+
})
|
|
50
|
+
export class AppModule {}
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
Add the styles link in the `src/styles.css` file
|
|
54
|
+
|
|
55
|
+
```css
|
|
56
|
+
@import "@abgov/web-components/index.css";
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
### VS Code Support
|
|
60
|
+
|
|
61
|
+
In order to use VS Code's [HTML/CSS Custom Data](https://github.com/microsoft/vscode-custom-data)
|
|
62
|
+
support to enhance GoA Web Components HTML editing experience, include our html custom data setting found in `.vscode/settings.json`:
|
|
63
|
+
|
|
64
|
+
```json
|
|
65
|
+
{
|
|
66
|
+
"html.customData": [
|
|
67
|
+
"./node_modules/@abgov/web-components/html.html-data.json"
|
|
68
|
+
]
|
|
69
|
+
}
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
---
|
|
73
|
+
|
|
74
|
+
[Visit Design System](https://ui-components.alberta.ca)
|