@episource/signet-angular/README.md

Develop your Angular application using Signet's Angular component library.

# Signet Angular Library

Signet Angular Components Library is developed with Signet, an all-in-one design system for all front-end JavaScript frameworks.

## How to Install Signet Angular Components Library

Install the main design system.

```ssh
npm install @episource/signet
```

Install the Angular components library

```ssh
npm install @episource/signet-angular
```

## Using the angular components

There are currently two methods to use the components. Choose either of the methods listed below.

### Method 1 - Using app.module.ts File

Navigate to the `app/app.module.ts`, then add `EpiDesignSystemAngularModule` to the imports declarator.

```ssh
import { EpiDesignSystemAngularModule } from '@episource/signet-angular'

imports: [
    BrowserModule, 
    EpiDesignSystemAngularModule
],
```

***ɵcmp Error:** While testing this angular app, if you run into an error such as the one below, then use the alternative method below.*

```ssh
main.js:1 ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'ɵcmp')
TypeError: Cannot read properties of undefined (reading 'ɵcmp')
```

### Method 2 - Using the main.js/ts file

Import the component into the `main.js` file

```ssh
import { applyPolyfills, defineCustomElements as signetComponents } from '@episource/signet/loader';

applyPolyfills().then( () => {
    signetComponents(window);
});
```

## How to use the imported components

1. To view the list of available components, navigate to `@episource/signet-angular/src/generated/directives/index.ts`

2. Then, you can freely add your component to any part of the angular app.

    ```ssh
    <my-component first="Sanmi" middle="Ebenezer" last="Ajanaku"></my-component>
    ```

3. Run your angular app.