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.

npm install @episource/signet

Install the Angular components library

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.

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.

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

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.

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

3. Run your angular app.