EIAM User-preference

A Web Component built with StencilJS, used for managing user preferences in an Angular project.

✨ Features

Change user settings related to the portal:

• Date Format

• Time Format

• Font Size

• User Display Format

• Default Landing Page

• Reset preferences

• Emits changes back to the host Angular app

🚀 Getting Started

Install the component:

First, install the component in your Angular project:

1. npm i eiam-user-preference


2. Import and define custom elements in your application:
In your main.ts, import and define custom elements:

 import { defineCustomElements } from 'eiam-user-preference/loader'; 

  defineCustomElements(window);

3. import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

  @NgModule({
  declarations: [...],
  imports: [...],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
  })
  export class AppModule {}


4. Now you can use the custom elements in your HTML BUT you need to pass the dynamic properties:apiUrl, pageId, cultureCode and applicationId to the component:

In your HTML:

 <eiam-user-preference
[cultureCode]="cultureCode"
[applicationId]="applicationId"
[pageId]="pageId"
[apiUrl]="apiURL"
(preferencesChanged)="onPreferencesChanged($event)"
></eiam-user-preference>


In your Angular component, make sure to dynamically provide all required input values. If any value is missing, an error message will be displayed. 

export class YourComponent implements OnInit {
  cultureCode: string;
  applicationId: string;   
  apiUrl :string
  pageId :number
  ngOnInit() {
    // You can update these values.

     onPreferencesChanged(event: any) {
    // Handle the emitted preferences update
  }
  }
}

🔁 Listening to Changes

The (preferencesChanged) event emits an object containing the updated preferences.
You can use this data to update features/settings in your application dynamically.