angular-patterns

Structure Angular BIM frontends by organizing the src/app directory into dedicated folders for components, interceptors, layouts, mocks, models, pages, pipes, and services. This separation ensures consistent architecture, scalable state management, and faster feature delivery across the application.

Manage state and HTTP requests in Angular by separating concerns into distinct classes: use an HttpService for API calls and a separate AuthService for state management. Apply the inject() pattern for dependency injection and use Signals to handle reactive state, ensuring a clean, modern service architecture.

Implement routing and auth guards in Angular standalone components by using lazy loading routes with inline guards. This pattern handles authentication and guest checks directly within the route configuration, securing pages without requiring separate guard files or complex nested modules.

Handle HTTP errors and i18n in an Angular app by using an interceptor architecture for global error management and integrating a translation loader. This setup centralizes error handling and language translations, ensuring consistent user feedback and multi-language support across the frontend.

Add a new page or component following standard Angular conventions by using provided checklists that outline steps for directory placement, naming conventions, file names, and selectors. This ensures every new feature aligns with the established standalone component, service, and routing patterns.

Yes, you can use a mock backend for testing during Angular frontend development by creating a mock interceptor structure. This approach intercepts HTTP requests during development, returning mock data to allow frontend testing and iteration independently of the actual backend API.