@xss-shared-library/uicomponent

@xss-shared-library/uicomponent

This library provides reusable UI components for Angular applications. It includes components like toast notifications and loading indicators, designed to enhance user experience and streamline UI development.

Features

• Toast Notifications: Display success, error, warning, and informational messages using a standardized toast component.
• Loading Indicators: Show loading spinners or dialogs to indicate ongoing processes.
• Reusable Components: Modular and customizable components for consistent UI design.
• Integration with PrimeNG: Built on top of the popular PrimeNG library for rich UI features.

Installation

To install the library, run the following command:

npm install @xss-shared-library/uicomponent

Usage

Import the Module

Add the required modules to your Angular application's module:

import { XSSToastModule } from '@xss-shared-library/uicomponent';
import { XSSLoadingModule } from '@xss-shared-library/uicomponent';

@NgModule({
  imports: [
    XSSToastModule,
    XSSLoadingModule
  ]
})
export class AppModule { }

Toast Notifications

Use the ToastService to display toast messages in your components:

import { Component } from '@angular/core';
import { ToastService } from '@xss-shared-library/uicomponent';

@Component({
  selector: 'app-root',
  template: `<app-toast></app-toast>` // Add the toast component to your template
})
export class AppComponent {
  constructor(private toastService: ToastService) {}

  showSuccessMessage() {
    this.toastService.showSuccess('Operation completed successfully!');
  }
}

Loading Indicators

Use the LoadingService to show or dismiss loading dialogs:

import { Component } from '@angular/core';
import { LoadingService } from '@xss-shared-library/uicomponent';

@Component({
  selector: 'app-root',
  template: `<app-loading></app-loading>` // Add the loading component to your template
})
export class AppComponent {
  constructor(private loadingService: LoadingService) {}

  startLoading() {
    this.loadingService.showLoading();
  }

  stopLoading() {
    this.loadingService.dismissLoading();
  }
}

Contributing

Contributions are welcome! If you find a bug or have a feature request, please open an issue or submit a pull request.

License

This library is licensed under the MIT License. See the LICENSE file for more details.

Further Help

For more help with the Angular CLI, use ng help or check out the Angular CLI Overview and Command Reference page.