NgDga

A lightweight Angular component library built for DGA (Digital Government Authority - Saudi Arabia) design system standards.

Installation

npm install ng-dga

Full Documentation

• Documentation

Offcial Website

• Digital Government Design System

Example Components

dga-button

A versatile button component that supports multiple variants, sizes, icons, loading states, and can render as either a <button> or a router <a> link.

Import

import { DgaButton } from 'ng-dga';

@Component({
  imports: [DgaButton],
  // ...
})

Basic Usage

Add styles path to angular.json file

"styles": [ "src/styles.css","./node_modules/ng-dga/styles/styles.css" ]

<dga-button title="Submit" (clicked)="onSubmit($event)" />

Properties

| Property | Type | Default | Description | | --------------------- | ------------------------------------------------------------------------------------------------- | ----------- | ----------------------------------------------------------------------------- | | type | 'submit' \| 'button' \| 'reset' \| 'link' | 'button' | Sets the button type. Use 'link' to render an <a> via routerLink. | | title | string | '' | The visible button label text. | | variant | 'primary' \| 'neutral' \| 'secondary-outline' \| 'secondary-solid' \| 'subtle' \| 'transparent' | 'primary' | Controls the visual style of the button. | | size | 'sm' \| 'md' \| 'lg' | 'lg' | Controls the button size. | | disabled | boolean | false | Disables the button and prevents interaction. | | loading | boolean | false | Shows a loading spinner and disables the button. | | icon | any | — | A Hugeicons icon to display alongside the label. | | iconPosition | 'start' \| 'end' | 'start' | Positions the icon before or after the label. | | iconOnly | boolean | false | Renders an icon-only square button (hides the label). | | href | string | '' | The router path used when type is 'link'. | | target | '_self' \| '_blank' \| '_parent' \| '_top' | '_self' | The link target. Automatically adds rel="noopener noreferrer" for _blank. | | customClasses | string | — | Additional CSS classes to apply to the button element. | | destructive | boolean | false | Applies danger/error styling for destructive actions. | | onColoredBackground | boolean | false | Adapts button styling for use on colored/dark backgrounds. |

Events

| Event | Type | Description | | --------- | -------------------------- | ----------------------------------- | | clicked | EventEmitter<MouseEvent> | Emitted when the button is clicked. |

Examples

Variants

<dga-button title="Primary" variant="primary" />
<dga-button title="Secondary Solid" variant="secondary-solid" />
<dga-button title="Secondary Outline" variant="secondary-outline" />
<dga-button title="Neutral" variant="neutral" />
<dga-button title="Subtle" variant="subtle" />
<dga-button title="Transparent" variant="transparent" />

Sizes

<dga-button title="Small" size="sm" />
<dga-button title="Medium" size="md" />
<dga-button title="Large" size="lg" />

With Icon

<dga-button title="Add Item" [icon]="AddIcon" iconPosition="start" />
<dga-button title="Next" [icon]="ArrowIcon" iconPosition="end" />

Icon Only

<dga-button [icon]="SearchIcon" [iconOnly]="true" />

Loading State

<dga-button title="Saving..." [loading]="isSaving" />

As Router Link

<dga-button type="link" title="Go to Dashboard" href="/dashboard" />

Submit Button

<dga-button type="submit" title="Submit Form" variant="primary" />

Disabled

<dga-button title="Unavailable" [disabled]="true" />

Destructive Actions

<dga-button title="Delete" variant="primary" [destructive]="true" />
<dga-button title="Remove" variant="secondary-outline" [destructive]="true" />

On Colored Background

<dga-button title="Submit" variant="primary" [onColoredBackground]="true" />
<dga-button title="Cancel" variant="secondary-outline" [onColoredBackground]="true" />

dga-accordion

A collapsible accordion component built with native <details> elements. Consists of a container (DgaAccordion) and individual items (DgaAccordionItem) with animated expand/collapse transitions.

Import

import { DgaAccordion, DgaAccordionItem } from 'ng-dga';

@Component({
  imports: [DgaAccordion, DgaAccordionItem],
  // ...
})

Basic Usage

<dga-accordion>
  <dga-accordion-item accordionItems title="Section 1">
    <div bodyTemplate>Content for section 1</div>
  </dga-accordion-item>
  <dga-accordion-item accordionItems title="Section 2">
    <div bodyTemplate>Content for section 2</div>
  </dga-accordion-item>
</dga-accordion>

DgaAccordion Properties

No properties — serves as a container that projects DgaAccordionItem elements via accordionItems attribute.

DgaAccordionItem Properties

| Property | Type | Default | Description | | -------- | -------- | -------- | -------------------------------------------------- | | title | string | required | The visible heading text for the accordion header. |

Examples

Multiple Items

<dga-accordion>
  <dga-accordion-item accordionItems title="What is DGA?">
    <div bodyTemplate>DGA stands for Digital Government Authority.</div>
  </dga-accordion-item>
  <dga-accordion-item accordionItems title="How to install?">
    <div bodyTemplate>Run npm install ng-dga.</div>
  </dga-accordion-item>
</dga-accordion>

dga-loading

A lightweight spinner component for displaying loading states. Supports multiple sizes and variants with optional styling for use on colored backgrounds.

Import

import { DgaLoading } from 'ng-dga';

@Component({
  imports: [DgaLoading],
  // ...
})

Basic Usage

<dga-loading />

Properties

| Property | Type | Default | Description | | --------------------- | -------------------------------------------------------- | ----------- | ----------------------------------------------------------- | | size | 'xxs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl' | 'md' | Controls the spinner size. | | variant | 'primary' \| 'neutral' | 'primary' | Controls the spinner color theme. | | onColoredBackground | boolean | false | Adapts spinner styling for use on colored/dark backgrounds. |

Examples

Sizes

<dga-loading size="xxs" />
<dga-loading size="xs" />
<dga-loading size="sm" />
<dga-loading size="md" />
<dga-loading size="lg" />
<dga-loading size="xl" />
<dga-loading size="xxl" />

Variants

<dga-loading variant="primary" /> <dga-loading variant="neutral" />

On Colored Background

<dga-loading variant="primary" [onColoredBackground]="true" />

In a Button

<dga-button title="Loading..." [loading]="isLoading" variant="primary" />

dga-link

A navigation link component that supports internal router links and external URLs. Offers variants, sizes, optional icon, underline, and disabled state.

Import

import { DgaLink } from 'ng-dga';

@Component({
  imports: [DgaLink],
  // ...
})

Basic Usage

<dga-link label="Home" href="/home" />

Properties

| Property | Type | Default | Description | | --------------------- | ------------------------------------------ | ----------- | -------------------------------------------------------------------- | | label | string | required | The visible link text. | | href | string \| string[] | required | The route path or URL. Uses routerLink for internal links. | | variant | 'primary' \| 'neutral' | 'primary' | Controls the link color theme. | | size | 'sm' \| 'md' | 'md' | Controls the link font size. | | disabled | boolean | false | Disables the link and prevents interaction. | | externalLink | boolean | false | Renders a native <a> with href instead of routerLink. | | target | '_blank' \| '_self' \| '_parent' \| '_top' | '_self' | The link target. Automatically adds rel="noopener noreferrer" for _blank. | | underline | boolean | false | Always shows the underline (hover underline is always applied). | | showIcon | boolean | false | Displays a link icon (or external link icon when externalLink is true). | | onColoredBackground | boolean | false | Adapts link styling for use on colored/dark backgrounds. |

Events

| Event | Type | Description | | --------- | -------------------------- | ---------------------------------- | | clicked | OutputRef<MouseEvent> | Emitted when the link is clicked. |

Examples

Variants

<dga-link label="Primary Link" href="/about" variant="primary" />
<dga-link label="Neutral Link" href="/about" variant="neutral" />

Sizes

<dga-link label="Small" href="/page" size="sm" />
<dga-link label="Medium" href="/page" size="md" />

With Icon

<dga-link label="Documentation" href="/docs" [showIcon]="true" />

External Link

<dga-link label="GitHub" href="https://github.com" [externalLink]="true" target="_blank" />

Always Underlined

<dga-link label="Underlined" href="/terms" [underline]="true" />

Disabled

<dga-link label="Unavailable" href="/restricted" [disabled]="true" />

On Colored Background

<dga-link label="Learn More" href="/info" variant="primary" [onColoredBackground]="true" />