- Type-ahead support for Angular components: Get coding faster with smart suggestions directly in your IDE.
- New features and properties added across existing components: More flexibility, and improved accessibility.
- New components available: Build more complex interfaces with less custom code.
- Improved error checking during builds: Catch issues earlier for a smoother development experience.
GoA
to Goab
, while in Angular, it changes from goa-
to goab-
. See the following examples:React
GoAButton
will beGoabButton
GoAContainer
will beGoabContainer
Angular
goa-button
will begoab-button
goa-container
will begoab-container
- Updating versions – two ways to install the latest packages
- Renaming components – update old names to new names
- Updating component props – adjust component properties and clean up warnings
Migrating a React app
@abgov/react-components
package.
GoAName
to GoabName
GoA--
with Goab--
for all component names. For example:
Component | v5(LTS) | v6(latest) |
---|---|---|
Block |
|
|
Checkbox |
|
|
Date picker |
|
|
Dropdown |
|
|
File uploader |
|
|
File uploader input |
|
|
Form stepper |
|
|
Input |
|
|
Modal |
|
|
Pagination |
|
|
Popover |
|
|
Radio group |
|
|
Spacer |
|
|
Table |
|
|
Tabs |
|
|
Text area |
|
|
Calendar |
|
|
Spinner |
|
|
Migrating an Angular app
@abgov/angular-components
supports only Angular v16 and above.
goa-name
to goab-name
in HTML templatesgoa-
to goab-
, with the following exceptions:- TwoColumnLayout: remains
goa-two-column-layout
- ThreeColumnLayout: remains
goa-three-column-layout
goa-one-column-layout
component has been renamed to goab-column-layout
goa-
to goab-
for all component names. For example:
string
. Now, these margin properties are categorized under Spacing
, ensuring consistency:Property Name | v3 | v4 |
---|---|---|
mt | string | Spacing |
mb | string | Spacing |
ml | string | Spacing |
mr | string | Spacing |
headingsize
is now headingSize
.string
or boolean
. In version 4, we introduced custom types for these properties and function arguments to ensure that the type checker validates the data structure specific to our components. You can find these changes detailed in the tables below:Component | v3 | v4 |
---|---|---|
Accordion |
|
|
Badge |
|
|
Block |
|
|
Button |
|
|
Button group |
|
|
Callout |
|
|
Checkbox |
|
|
Chip |
|
|
Container |
|
|
Date picker |
|
|
Dropdown |
|
|
File uploader |
|
|
File uploader input |
|
|
App Footer Nav Section |
|
|
App Footer Meta Section |
|
|
Form item |
|
|
Form stepper |
|
|
Form step |
|
|
Grid |
|
|
Hero banner |
|
|
Icons |
|
|
Icon button |
|
|
Input |
|
|
Microsite header |
|
|
Modal |
|
|
Notification banner |
|
|
Pagination |
|
|
Popover |
|
|
Progress indicator |
|
|
Radio item |
|
|
Radio group |
|
|
Side menu heading |
|
|
Skeleton loading |
|
|
Spacer |
|
|
Table |
|
|
Table sort header |
|
|
Tab item |
|
|
Tabs |
|
|
Text area |
|
|
Tooltip |
|
|
AppHeaderMenu |
|
|
Calendar |
|
|
PageBlock |
|
|
Spinner |
|
|
slot="name"
to reference a property. For example,
slot
replaced by Angular ng-template
references:Component | v3 | v4 |
---|---|---|
Accordion |
|
|
Checkbox |
|
|
Container |
|
|
Hero banner |
|
|
Modal |
|
|
Popover |
|
|
Radio item |
|
|
Side menu heading |
|
|
Tab item |
|
|
goaValue
and goaChecked
from the Angular input componentsgoaValue
and goaChecked
directives can be removed from our input components when using Angular Forms. This applies to the following components:- Checkbox
- Date picker
- Dropdown
- Input
- Radio
- Textarea
1. Reactive
2. Template-driven
3. Event handler
Book time in drop in hours