The project follows a modular structure for better organization and maintainability. Key modules include:
AppModule
: The root module of the application.SharedModule
: Contains shared components, directives, and pipes used across the application.JosModule
: Contains necessary components for this featyre.
Lazy loading is implemented to improve application performance by loading modules asynchronously when needed. Key lazy-loaded modules include:
Reactive forms are used for form handling, providing a more robust and scalable approach compared to template-driven forms. Features include:
- Form creation using
FormBuilder
. - Validation using built-in validators and custom validators.
- Form submission and data manipulation using observables.
An HTTP interceptor is implemented to handle errors globally across the application. Features include:
- Intercepting HTTP requests and responses.
- Handling HTTP errors such as 401 and 500.
- Displaying error messages to the user using notification components.
Filtering functionality is implemented using reactive programming with subjects. Features include:
- Communication between components using input and output properties.
- Data filtering based on user input using reactive forms.
- Dynamic updating of the UI based on filtered data.
Bootstrap is used for styling to ensure a responsive and visually appealing user interface. Features include:
- Utilizing Bootstrap classes for layout, typography, and components.
- Responsive design for optimal viewing across different devices.
To run the project locally, follow these steps:
- Clone the repository:
git clone [repository-url]
. - Navigate to the project directory:
cd [project-directory]
. - Install dependencies:
npm install
. - Start the development server:
ng serve
.