Shared Module Documentation

Overview

The Shared module contains common components, services, and utilities that are used across multiple modules in the admin panel application. It serves as the central repository for reusable functionality.

Path: src/app/shared Module File: shared.module.ts No Routing: This module provides shared components and services

Purpose

Provide reusable UI components
Centralize common services
Share utilities and pipes across modules
Maintain consistent styling and behavior
Reduce code duplication
Provide common navigation and layout components

Components

Navigation Components

1. SidebarComponent (sidebar/sidebar.component.ts)

- Main navigation sidebar

- Menu item management

- Collapsible navigation

- User role-based menu display

- Dynamic menu generation

2. HeaderNavigationComponent (header-navigation/header-navigation.component.ts)

- Top navigation bar

- User profile dropdown

- Notification center

- Search functionality

- Breadcrumb navigation

3. BreadcrumbComponent (breadcrumb/breadcrumb.component.ts)

- Navigation breadcrumbs

- Current page indication

- Hierarchical navigation

- Dynamic breadcrumb generation

Form Components

4. DynamicformComponent (dynamicform/dynamicform.component.ts)

- Dynamic form generation

- Configurable form fields

- Validation support

- Form schema processing

- Custom form controls

5. UploadviewComponent (uploadview/uploadview.component.ts)

- File upload interface

- Drag and drop support

- File preview functionality

- Upload progress tracking

- Multiple file handling

Data Components

6. DynamictableComponent (dynamictable/dynamictable.component.ts)

- Dynamic data table

- Configurable columns

- Sorting and filtering

- Pagination support

- Export functionality

7. ReportComponent (report/report.component.ts)

- Report generation interface

- Chart and graph display

- Data visualization

- Export options

- Interactive reporting

UI Components

8. AlertComponent (alert/alert.component.ts)

- Alert message display

- Different alert types (success, error, warning, info)

- Auto-dismiss functionality

- Custom styling support

9. LoaderComponent (loader/loader.component.ts)

- Loading spinner/indicator

- Progress bar display

- Loading state management

- Custom loading animations

10. DialogComponent (dialog/dialog.component.ts)

- Modal dialog interface

- Configurable dialog content

- Confirmation dialogs

- Custom dialog actions

11. CenterAlertComponent (center-alert/center-alert.component.ts)

- Centered alert messages

- Modal-style alerts

- Important notifications

- Action button support

12. ImportantNoticeComponent (important-notice/important-notice.component.ts)

- Important system notices

- Announcement display

- Dismissible notices

- Priority messaging

Services

Core Services

1. MenuService (sidebar/menu.service.ts)

- Menu configuration management

- Dynamic menu generation

- User permission-based menus

- Menu state management

- Navigation helper methods

2. Theme (service/AutoTheme.ts)

- Theme management

- Dark/light mode switching

- Color scheme management

- Theme persistence

- Custom theme support

3. LoaderService (loader/loader.service.ts)

- Global loading state management

- Loading indicator control

- HTTP request loading

- Component-level loading

- Loading overlay management

4. DialogService (dialog/dialog.service.ts)

- Dialog management service

- Programmatic dialog creation

- Dialog state management

- Confirmation dialog helpers

- Custom dialog content

Base Classes

5. AppService (service/AppService.class.ts)

- Base service class

- Common HTTP operations

- API endpoint management

- Error handling

- Response processing

6. AppComponentClass (service/AppComponent.class.ts)

- Base component class

- Common component functionality

- Utility methods

- Lifecycle management

External Services (Imported)

7. ProfileService (from profile module)

- User profile management

- Profile data handling

8. ReportService (from reports module)

- Report generation

- Data export functionality

Submodules

Notification Submodule

Path: shared/notification/ Module File: notification.module.ts Components:

NotificationComponent (notification/notification.component.ts)
Toast notifications
System notifications
Real-time alerts
Notification history

Services:

NotificationService (notification/notification.service.ts)
Notification management
Message queuing
Notification configuration
Real-time updates

Pipes

Data Formatting Pipes

1. FilterListPipe (filter-pipe.pipe.ts)

- List filtering functionality

- Search-based filtering

- Multiple criteria filtering

- Dynamic filter application

2. FloorDecimal1 (decimal.pipe.ts)

- Decimal number formatting

- Currency formatting

- Number precision control

- Localization support

File Structure


src/app/shared/
├── alert/
│   ├── alert.component.css
│   ├── alert.component.html
│   └── alert.component.ts
├── breadcrumb/
│   ├── breadcrumb.component.css
│   ├── breadcrumb.component.html
│   └── breadcrumb.component.ts
├── center-alert/
│   ├── center-alert.component.css
│   ├── center-alert.component.html
│   └── center-alert.component.ts
├── dialog/
│   ├── dialog.component.css
│   ├── dialog.component.html
│   ├── dialog.component.ts
│   └── dialog.service.ts
├── dynamicform/
│   ├── dynamicform.component.css
│   ├── dynamicform.component.html
│   └── dynamicform.component.ts
├── dynamictable/
│   ├── dynamictable.component.css
│   ├── dynamictable.component.html
│   └── dynamictable.component.ts
├── header-navigation/
│   ├── header-navigation.component.css
│   ├── header-navigation.component.html
│   └── header-navigation.component.ts
├── important-notice/
│   ├── important-notice.component.css
│   ├── important-notice.component.html
│   └── important-notice.component.ts
├── loader/
│   ├── loader.component.css
│   ├── loader.component.html
│   ├── loader.component.ts
│   └── loader.service.ts
├── notification/
│   ├── notification.component.css
│   ├── notification.component.html
│   ├── notification.component.ts
│   ├── notification.module.ts
│   └── notification.service.ts
├── report/
│   ├── report.component.css
│   ├── report.component.html
│   └── report.component.ts
├── service/
│   ├── AppComponent.class.ts
│   ├── AppService.class.ts
│   └── AutoTheme.ts
├── sidebar/
│   ├── menu.service.ts
│   ├── sidebar.component.css
│   ├── sidebar.component.html
│   └── sidebar.component.ts
├── uploadview/
│   ├── uploadview.component.css
│   ├── uploadview.component.html
│   └── uploadview.component.ts
├── decimal.pipe.ts
├── filter-pipe.pipe.ts
└── shared.module.ts



Key Dependencies

@angular/common - Common Angular directives and pipes

@angular/forms - Form handling and validation

@angular/router - Navigation and routing

@ng-bootstrap/ng-bootstrap - Bootstrap components

@angular/material - Material design components

ng-apexcharts - Chart components

ngx-pagination - Pagination functionality

ngx-editor - Rich text editor



Exported Components
The following components are exported and available to other modules:

BreadcrumbComponent
SidebarComponent
HeaderNavigationComponent
UploadviewComponent
DynamicformComponent
DynamictableComponent
AlertComponent
LoaderComponent
FilterListPipe
ReportComponent
CenterAlertComponent
NgxEditorModule


Usage Guidelines

Importing Shared Module

typescript
import { SharedModule } from '../shared/shared.module';

@NgModule({
  imports: [
    SharedModule,
    // other imports
  ],
  // module configuration
})
export class FeatureModule { }



Using Shared Components

html



Using Shared Services

typescript
constructor(
  private loaderService: LoaderService,
  private dialogService: DialogService,
  private menuService: MenuService
) {}

// Show loading
this.loaderService.show();

// Show confirmation dialog
this.dialogService.confirm('Are you sure?').subscribe(result => {
  // handle result
});

Styling and Theming

Consistent CSS variables and classes
Theme-aware components
Responsive design support
Material design integration
Bootstrap compatibility

Best Practices

1. Component Reusability - Create generic, configurable components

2. Service Injection - Use dependency injection for shared services

3. Event Communication - Use observables for component communication

4. State Management - Centralize common state in services

5. Error Handling - Implement consistent error handling patterns

6. Performance - Optimize for lazy loading and tree shaking

Integration Points

All feature modules import and use shared components
Authentication module uses shared UI components
Billing module uses shared table and form components
Dashboard module uses shared chart and report components
Navigation is handled entirely by shared components

Extension Guidelines

When adding new shared functionality:

1. Ensure it's truly reusable across multiple modules

2. Make components configurable through inputs

3. Use consistent naming conventions

4. Add proper documentation and examples

5. Test with multiple consuming modules

6. Consider backward compatibility