Handling Observable data Loading in Angular can sometimes feel intricate, particularly when you have to juggle multiple loading states and their corresponding UI displays. The Angular ecosystem is full of tools designed to help with this process. With the goal of contributing to these efforts, I developed a library: ngx-load-with, which aims to simplify these tasks with its straightforward approach and efficient usage.

Loading...{{error.message}}Demo on StackBlitz Key FeaturesNgxLoadWithDirective offers an alternative approach to handling Observable data loading. Its design focuses on simplifying RxJS complexities, so you don't need to be an expert in RxJS to effectively work with Observable dataOne key aspect about NgxLoadWithDirective is how it handles Observable (un)subscriptions and loading states. No need for you to worry about memory leaks or manual tracking of loading states - this directive handles that behind the scenes. This feature might prove advantageous when compared to other patterns which could potentially introduce inconsistencies or errors in your applications.NgxLoadWithDirective also promotes better coding practices, such as code reusability and consistency, by taking care of loading state management for you. This reusable, well-tested directive takes the load off developers from having to manually control these aspects, reducing potential errors in your applications. Getting Started InstallationTo install NgxLoadWithDirective, simply run the following command:npm install ngx-load-withNext, import the NgxLoadWithModule module in your Angular module:import { NgxLoadWithModule } from "ngx-load-with";@NgModule({ imports: [NgxLoadWithModule], declarations: [MyComponent],})export class MyModule {} Basic UsageWith NgxLoadWithDirective, you can load data from an Observable and display it in your template with ease:@Component({...})export class MyComponent { getTodos = () => this.http.get('api/todos'); private http = inject(HttpClient);} Working with Loading and Error TemplatesNgxLoadWithDirective allows you to display a loading message while data is being loaded and an error message if an error occurs:

{{todo.title}}

Loading...{{error.message}} Fetching Data Using Route ParametersYou can load data based on a parameter from the route:

{{todo.title}}

@Component({...})export class MyComponent { routeParams$ = inject(ActivatedRoute).params; getTodo = ({id}) => this.http.get('api/todos/' + id); private http = inject(HttpClient);} Searching DataFetch data based on user input:

{{todo.title}}

@Component({...})export class MyComponent { findTodos = (keywords: string) => this.http.get('api/todos', { params: { q: keywords} }); private http = inject(HttpClient);} Reloading DataReload data when a button is clicked:Reload

{{todo.title}}

And More...For more information, check out the documentation. ConclusionNgxLoadWithDirective offers a user-friendly way to handle Observable data loading in Angular applications. It abstracts away much of the complexities of RxJS, handles Observable unsubscriptions, and promotes consistent, reusable code. Whether you're an experienced Angular developer or new to the framework, NgxLoadWithDirective is a tool that can enhance your development process.With less time spent managing Observable data loading, you can focus on creating an exceptional application. Consider trying ngx-load-with in your next Angular project.If you find this project useful, I would appreciate it if you could give it a star on GitHub.Happy coding!P.S. A special shoutout to ngx-observe, which served as a significant source of inspiration in the development of ngx-load-with.