Eios-library NPM

EIOS Common Library - v.1.2.0

TODO: Update

The component library of EIOS Angular Frontend Applications.

EIOS-Common Library is a component library for EIOS Portal frontend Applications made with the Angular Framework. It allows integrating shared components with native Angular code using HTML/CSS/Typescript for all Angular Frontend Projects, according with EIOS Design Standards. This library was generated with Angular CLI version 15.2.0.

Package code GitHub Repository

https://github.com/WorldHealthOrganization/eios-common-ui-library

The Library Code Project was also used to create a playground application in which you can check the Common-Library components implementation in a real Angular environment. The Library Components implementations is in src -> app folder.

Playground Application Base-Layer

In addition the Angular Playground Application implents also:

DRY Structure: according with Angular development best practices the Angular Playground Application was splitted between Core Module, Shared Module and Features Modules, loaded in lazymode.
NGRX Redux Pattern with DevTools for a "forRoot Store" to store the critical EIOS data in a frontend structure. The "For Root Store" contain: AuthData, CurrentUser ad RouterStore. Each data structure is supplied by the related store components (Actions, Effects, Reducers, Services and Interfaces).
Microsoft Authentication Library for Angular: MSAL for Angular enables Angular web applications to authenticate users using Azure AD work and school accounts (AAD), Microsoft personal accounts (MSA) and social identity providers like Facebook, Google, LinkedIn, Microsoft accounts, etc. through Azure AD B2C service.
Auth Module: in the Features folder is provided the "Auth Module" that deal with the Azure Identity Provider the user authentication using the Angular MSAL library.

Library Peer Dependencies

Ngneat-Transloco

npm install @ngneat/transloco@4.2.2 https://ngneat.github.io/transloco/ https://www.npmjs.com/package/@ngneat/transloco

Further References

MSAL - Microsoft Authentication Library for Angular

https://learn.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-angular-auth-code https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-angular https://www.npmjs.com/package/@azure/msal-angular

Running Application

ng build eios-common --watch npm start