@telperion/ng-pack 1.0.0 → 1.2.1

package/README.md

@@ -74,9 +74,84 @@ Signal-based forms utilities for Angular template-driven forms.
 
 **Import:** `@telperion/ng-pack/utils`
 
-🚧 **Under Construction**
+Angular utility functions and plugins for enhanced development experience.
+
+#### Key Features
+
+- 🎯 Event modifier syntax for templates (`.pd`, `.sp`)
+- 🔗 Directive-as-service provider utility
+- 🌐 Promise-based HTTP client with tuple error handling
+- 📦 Tree-shakeable and type-safe
+- ⚡ Zero dependencies
+
+#### Quick Start
+
+**Event Modifiers Plugin**
+
+```typescript
+import { provideEventModifiersPlugin } from '@telperion/ng-pack/utils';
+
+bootstrapApplication(AppComponent, {
+  providers: [provideEventModifiersPlugin()]
+});
+```
+
+```html
+<!-- Prevent default and stop propagation with modifiers -->
+<form (submit.pd)="onSubmit()">...</form>
+<div (click.sp)="handleClick()">...</div>
+<button (click.pd.sp)="handleButtonClick()">Click me</button>
+```
+
+**Construct Fetcher**
+
+```typescript
+import { Component } from '@angular/core';
+import { constructFetcher } from '@telperion/ng-pack/utils';
+
+@Component({
+  selector: 'app-example',
+  template: `<button (click)="fetchData()">Fetch Data</button>`
+})
+export class ExampleComponent {
+  private fetcher = constructFetcher();
+
+  async fetchData() {
+    const [error, response] = await this.fetcher.get('/api/data');
+    
+    if (error) {
+      console.error('Error:', error);
+      return;
+    }
+    
+    console.log('Data:', response);
+  }
+}
+```
+
+**Provide Service Directive**
+
+```typescript
+import { provideServiceDirective } from '@telperion/ng-pack/utils';
+
+// Create an injection token
+export const ParentService = new InjectionToken<ParentDirective>("ParentService");
+
+// Provide directive as service
+@Directive({
+  selector: '[parent]',
+  providers: [provideServiceDirective(ParentService, ParentDirective)],
+})
+export class ParentDirective { }
+
+// Inject in child
+@Directive({ selector: '[child]' })
+export class ChildDirective {
+  private parent = inject(ParentService);
+}
+```
 
-Common Angular utilities and helpers.
+[Full documentation →](https://github.com/telperiontech/telperion/tree/main/libs/ng-pack/utils)
 
 ---
 

package/fesm2022/telperion-ng-pack-utils.mjs

@@ -1,17 +1,10 @@
 import * as i0 from '@angular/core';
-import { NgModule, forwardRef } from '@angular/core';
-
-class UtilsModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UtilsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.5", ngImport: i0, type: UtilsModule });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UtilsModule });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UtilsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [],
-                }]
-        }] });
+import { forwardRef, Inject, Injectable, inject } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { EventManagerPlugin, EVENT_MANAGER_PLUGINS } from '@angular/platform-browser';
+import { HttpClient } from '@angular/common/http';
+import { tryCatch } from '@thalesrc/js-utils/promise/try-catch';
+import { firstValueFrom } from 'rxjs';
 
 /**
  * Utility function to create a provider for a directive/component that can be injected as a service.
@@ -61,9 +54,116 @@ function provideServiceDirective(token, directive) {
     };
 }
 
+/**
+ * Angular Event Manager Plugin that enables event modifier syntax in templates.
+ *
+ * @example
+ * ```html
+ * <form (submit.pd)="onSubmit()">...</form>
+ * <div (click.sp)="handleClick()">...</div>
+ * <button (click.pd.sp)="handleButtonClick()">Click me</button>
+ * ```
+ */
+/**
+ * Event Manager Plugin that adds support for event modifiers.
+ * @internal
+ */
+class EventModifiersPlugin extends EventManagerPlugin {
+    /**
+     * Supported modifiers: `pd` (preventDefault), `sp` (stopPropagation)
+     */
+    static modifierMap = {
+        'pd': (e) => e.preventDefault(),
+        'sp': (e) => e.stopPropagation(),
+    };
+    constructor(doc) {
+        super(doc);
+    }
+    supports(eventName) {
+        return eventName.includes('.') &&
+            eventName.split('.').some(part => part in EventModifiersPlugin.modifierMap);
+    }
+    addEventListener(element, eventName, handler) {
+        const parts = eventName.split('.');
+        const domEventName = parts[0];
+        const modifiers = parts.slice(1).filter(m => m in EventModifiersPlugin.modifierMap);
+        const wrappedHandler = (event) => {
+            modifiers.forEach(mod => EventModifiersPlugin.modifierMap[mod](event));
+            return handler(event);
+        };
+        element.addEventListener(domEventName, wrappedHandler);
+        return () => element.removeEventListener(domEventName, wrappedHandler);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: EventModifiersPlugin, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: EventModifiersPlugin });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: EventModifiersPlugin, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }] });
+/**
+ * Provides the Event Modifiers Plugin.
+ *
+ * @example
+ * ```typescript
+ * bootstrapApplication(AppComponent, {
+ *   providers: [provideEventModifiersPlugin()]
+ * });
+ * ```
+ */
+function provideEventModifiersPlugin() {
+    return {
+        provide: EVENT_MANAGER_PLUGINS,
+        useClass: EventModifiersPlugin,
+        multi: true
+    };
+}
+
+/**
+ * Constructs a Fetcher that proxies HttpClient methods and returns a tuple of [error, response].
+ * If the HttpClient method throws an error, it will be caught and returned as the first element of the tuple.
+ * If the HttpClient method succeeds, the response will be returned as the second element of the tuple.
+ * Example usage:
+ * ```
+ * @Component({
+ *   selector: 'app-example',
+ *   template: `<button (click)="fetchData()">Fetch Data</button>`,
+ * })
+ * export class ExampleComponent {
+ *   private fetcher = constructFetcher();
+ *
+ *   async fetchData() {
+ *    const [error, response] = await this.fetcher.get('/api/data');
+ *
+*     if (error) {
+*       console.error('Error fetching data:', error);
+*     } else {
+*       console.log('Fetched data:', response);
+*     }
+ *   }
+ * }
+ * ```
+ */
+function constructFetcher() {
+    const client = inject(HttpClient);
+    return new Proxy({}, {
+        get(target, prop) {
+            if (prop in client) {
+                return (...args) => {
+                    const method = client[prop];
+                    return tryCatch(firstValueFrom(method.apply(client, args)));
+                };
+            }
+            throw new Error(`HttpClient does not have method ${String(prop)}`);
+        }
+    });
+}
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { UtilsModule, provideServiceDirective };
+export { constructFetcher, provideEventModifiersPlugin, provideServiceDirective };
 //# sourceMappingURL=telperion-ng-pack-utils.mjs.map

package/fesm2022/telperion-ng-pack-utils.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"telperion-ng-pack-utils.mjs","sources":["../../utils/src/lib/utils-module.ts","../../utils/src/lib/provide-service-directive.ts","../../utils/src/telperion-ng-pack-utils.ts"],"sourcesContent":["import { NgModule } from '@angular/core';\n\n@NgModule({\n  imports: [],\n})\nexport class UtilsModule {}\n","import { forwardRef, InjectionToken, Provider, Type } from \"@angular/core\";\r\n\r\n/**\r\n * Utility function to create a provider for a directive/component that can be injected as a service.\r\n * This is useful for cases where you want to inject a directive/component instance into another directive/component.\r\n *\r\n * Example usage:\r\n *\r\n * files:\r\n * - parent.directive.ts\r\n * - child.directive.ts\r\n * - parent.service.ts\r\n *\r\n * parent.service.ts:\r\n * ```\r\n * import { InjectionToken } from \"@angular/core\";\r\n * import type { ParentDirective } from \"./parent.directive\";\r\n *\r\n * export const ParentService = new InjectionToken<ParentDirective>(\"ParentService\");\r\n * ```\r\n *\r\n * parent.directive.ts:\r\n * ```\r\n * @Directive({\r\n *   selector: 'parent',\r\n *   providers: [provideServiceDirective(ParentService, ParentDirective)],\r\n * })\r\n * export class ParentDirective {...}\r\n * ```\r\n * child.directive.ts:\r\n * ```\r\n * @Directive({\r\n *   selector: 'child',\r\n * })\r\n * export class ChildDirective {\r\n *   #parent = inject(ParentService);\r\n * }\r\n * ```\r\n *\r\n * @param token - The injection token to provide.\r\n * @param directive - The directive/component class that will be provided.\r\n * @returns A provider object that can be used in the providers array of an Angular module or component.\r\n */\r\nexport function provideServiceDirective<T extends Type<unknown>>(\r\n  token: InjectionToken<T>,\r\n  directive: T\r\n): Provider {\r\n  return {\r\n    provide: token,\r\n    useExisting: forwardRef(() => directive)\r\n  }\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAKa,WAAW,CAAA;uGAAX,WAAW,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA;wGAAX,WAAW,EAAA,CAAA;wGAAX,WAAW,EAAA,CAAA;;2FAAX,WAAW,EAAA,UAAA,EAAA,CAAA;kBAHvB,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE,EAAE;AACZ,iBAAA;;;ACFD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCG;AACG,SAAU,uBAAuB,CACrC,KAAwB,EACxB,SAAY,EAAA;IAEZ,OAAO;AACL,QAAA,OAAO,EAAE,KAAK;AACd,QAAA,WAAW,EAAE,UAAU,CAAC,MAAM,SAAS;KACxC;AACH;;ACnDA;;AAEG;;;;"}
+{"version":3,"file":"telperion-ng-pack-utils.mjs","sources":["../../utils/src/provide-service-directive.ts","../../utils/src/event-modifiers.plugin.ts","../../utils/src/construct-fetcher.ts","../../utils/src/telperion-ng-pack-utils.ts"],"sourcesContent":["import { forwardRef, InjectionToken, Provider, Type } from \"@angular/core\";\r\n\r\n/**\r\n * Utility function to create a provider for a directive/component that can be injected as a service.\r\n * This is useful for cases where you want to inject a directive/component instance into another directive/component.\r\n *\r\n * Example usage:\r\n *\r\n * files:\r\n * - parent.directive.ts\r\n * - child.directive.ts\r\n * - parent.service.ts\r\n *\r\n * parent.service.ts:\r\n * ```\r\n * import { InjectionToken } from \"@angular/core\";\r\n * import type { ParentDirective } from \"./parent.directive\";\r\n *\r\n * export const ParentService = new InjectionToken<ParentDirective>(\"ParentService\");\r\n * ```\r\n *\r\n * parent.directive.ts:\r\n * ```\r\n * @Directive({\r\n *   selector: 'parent',\r\n *   providers: [provideServiceDirective(ParentService, ParentDirective)],\r\n * })\r\n * export class ParentDirective {...}\r\n * ```\r\n * child.directive.ts:\r\n * ```\r\n * @Directive({\r\n *   selector: 'child',\r\n * })\r\n * export class ChildDirective {\r\n *   #parent = inject(ParentService);\r\n * }\r\n * ```\r\n *\r\n * @param token - The injection token to provide.\r\n * @param directive - The directive/component class that will be provided.\r\n * @returns A provider object that can be used in the providers array of an Angular module or component.\r\n */\r\nexport function provideServiceDirective<T extends Type<unknown>>(\r\n  token: InjectionToken<T>,\r\n  directive: T\r\n): Provider {\r\n  return {\r\n    provide: token,\r\n    useExisting: forwardRef(() => directive)\r\n  }\r\n}\r\n","/**\r\n * Angular Event Manager Plugin that enables event modifier syntax in templates.\r\n *\r\n * @example\r\n * ```html\r\n * <form (submit.pd)=\"onSubmit()\">...</form>\r\n * <div (click.sp)=\"handleClick()\">...</div>\r\n * <button (click.pd.sp)=\"handleButtonClick()\">Click me</button>\r\n * ```\r\n */\r\n\r\nimport { DOCUMENT } from '@angular/common';\r\nimport { Inject, Injectable, Provider } from '@angular/core';\r\nimport { EVENT_MANAGER_PLUGINS, EventManagerPlugin } from '@angular/platform-browser';\r\n\r\n/**\r\n * Event Manager Plugin that adds support for event modifiers.\r\n * @internal\r\n */\r\n@Injectable()\r\nexport class EventModifiersPlugin extends EventManagerPlugin {\r\n  /**\r\n   * Supported modifiers: `pd` (preventDefault), `sp` (stopPropagation)\r\n   */\r\n  private static modifierMap: { [key: string]: (e: Event) => void } = {\r\n    'pd': (e: Event) => e.preventDefault(),\r\n    'sp': (e: Event) => e.stopPropagation(),\r\n  };\r\n\r\n  constructor(@Inject(DOCUMENT) doc: Document) {\r\n    super(doc);\r\n  }\r\n\r\n  supports(eventName: string): boolean {\r\n    return eventName.includes('.') &&\r\n      eventName.split('.').some(part => part in EventModifiersPlugin.modifierMap);\r\n  }\r\n\r\n  addEventListener(element: HTMLElement, eventName: string, handler: (event: Event) => void): () => void {\r\n    const parts = eventName.split('.');\r\n    const domEventName = parts[0];\r\n    const modifiers = parts.slice(1).filter(m => m in EventModifiersPlugin.modifierMap);\r\n\r\n    const wrappedHandler = (event: Event) => {\r\n      modifiers.forEach(mod => EventModifiersPlugin.modifierMap[mod](event));\r\n\r\n      return handler(event);\r\n    };\r\n\r\n    element.addEventListener(domEventName, wrappedHandler);\r\n\r\n    return () => element.removeEventListener(domEventName, wrappedHandler);\r\n  }\r\n}\r\n\r\n/**\r\n * Provides the Event Modifiers Plugin.\r\n *\r\n * @example\r\n * ```typescript\r\n * bootstrapApplication(AppComponent, {\r\n *   providers: [provideEventModifiersPlugin()]\r\n * });\r\n * ```\r\n */\r\nexport function provideEventModifiersPlugin(): Provider {\r\n  return {\r\n    provide: EVENT_MANAGER_PLUGINS,\r\n    useClass: EventModifiersPlugin,\r\n    multi: true\r\n  };\r\n}\r\n","import { HttpClient } from \"@angular/common/http\";\nimport { inject } from \"@angular/core\";\nimport { AnyFunction } from '@thalesrc/extra-ts-types';\nimport { tryCatch } from \"@thalesrc/js-utils/promise/try-catch\";\nimport { firstValueFrom, Observable } from 'rxjs';\n\nexport type Fetcher = {\n  [P in keyof HttpClient]: HttpClient[P] extends (...args: infer A) => Observable<unknown> ? <T>(...args: A) => Promise<[unknown, T]> : never;\n}\n\n/**\n * Constructs a Fetcher that proxies HttpClient methods and returns a tuple of [error, response].\n * If the HttpClient method throws an error, it will be caught and returned as the first element of the tuple.\n * If the HttpClient method succeeds, the response will be returned as the second element of the tuple.\n * Example usage:\n * ```\n * @Component({\n *   selector: 'app-example',\n *   template: `<button (click)=\"fetchData()\">Fetch Data</button>`,\n * })\n * export class ExampleComponent {\n *   private fetcher = constructFetcher();\n *\n *   async fetchData() {\n *    const [error, response] = await this.fetcher.get('/api/data');\n *\n*     if (error) {\n*       console.error('Error fetching data:', error);\n*     } else {\n*       console.log('Fetched data:', response);\n*     }\n *   }\n * }\n * ```\n */\nexport function constructFetcher() {\n  const client = inject(HttpClient);\n\n  return new Proxy({} as Fetcher, {\n    get(target, prop) {\n      if (prop in client) {\n        return (...args: any[]) => {\n          const method = (client as any)[prop] as AnyFunction;\n\n          return tryCatch(firstValueFrom(method.apply(client, args)));\n        }\n      }\n\n      throw new Error(`HttpClient does not have method ${String(prop)}`);\n    }\n  });\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telperion/ng-pack",
-  "version": "1.0.0",
+  "version": "1.2.1",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0",
@@ -8,6 +8,8 @@
     "rxjs": "^7.8.1"
   },
   "dependencies": {
+    "@thalesrc/extra-ts-types": "^1.4.0",
+    "@thalesrc/js-utils": "^3.4.0",
     "@thalesrc/reactive-storage": "^1.0.5",
     "tslib": "^2.3.0"
   },

package/types/telperion-ng-pack-utils.d.ts

@@ -1,11 +1,6 @@
-import * as i0 from '@angular/core';
 import { Type, InjectionToken, Provider } from '@angular/core';
-
-declare class UtilsModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<UtilsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<UtilsModule, never, never, never>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<UtilsModule>;
-}
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
 
 /**
  * Utility function to create a provider for a directive/component that can be injected as a service.
@@ -50,4 +45,46 @@ declare class UtilsModule {
  */
 declare function provideServiceDirective<T extends Type<unknown>>(token: InjectionToken<T>, directive: T): Provider;
 
-export { UtilsModule, provideServiceDirective };
+/**
+ * Provides the Event Modifiers Plugin.
+ *
+ * @example
+ * ```typescript
+ * bootstrapApplication(AppComponent, {
+ *   providers: [provideEventModifiersPlugin()]
+ * });
+ * ```
+ */
+declare function provideEventModifiersPlugin(): Provider;
+
+type Fetcher = {
+    [P in keyof HttpClient]: HttpClient[P] extends (...args: infer A) => Observable<unknown> ? <T>(...args: A) => Promise<[unknown, T]> : never;
+};
+/**
+ * Constructs a Fetcher that proxies HttpClient methods and returns a tuple of [error, response].
+ * If the HttpClient method throws an error, it will be caught and returned as the first element of the tuple.
+ * If the HttpClient method succeeds, the response will be returned as the second element of the tuple.
+ * Example usage:
+ * ```
+ * @Component({
+ *   selector: 'app-example',
+ *   template: `<button (click)="fetchData()">Fetch Data</button>`,
+ * })
+ * export class ExampleComponent {
+ *   private fetcher = constructFetcher();
+ *
+ *   async fetchData() {
+ *    const [error, response] = await this.fetcher.get('/api/data');
+ *
+*     if (error) {
+*       console.error('Error fetching data:', error);
+*     } else {
+*       console.log('Fetched data:', response);
+*     }
+ *   }
+ * }
+ * ```
+ */
+declare function constructFetcher(): Fetcher;
+
+export { constructFetcher, provideEventModifiersPlugin, provideServiceDirective };

package/utils/README.md

@@ -1,3 +1,247 @@
 # @telperion/ng-pack/utils
 
-Secondary entry point of `@telperion/ng-pack`. It can be used by importing from `@telperion/ng-pack/utils`.
+Angular utility functions and plugins for enhanced development experience
+
+## Motivation
+
+Provide reusable utilities and plugins for Angular applications to reduce boilerplate and enhance developer productivity.
+
+## Goals
+
+* TypeScript support
+* Tree-shaking
+* Minimal dependencies
+* Type-safe
+* Well documented
+* High test coverage
+
+## Installation
+
+```bash
+npm install @telperion/ng-pack
+# or
+yarn add @telperion/ng-pack
+# or
+pnpm add @telperion/ng-pack
+```
+
+## Features
+
+### Event Modifiers Plugin
+
+Angular Event Manager Plugin that enables event modifier syntax in templates, similar to Vue.js.
+
+#### Usage
+
+First, provide the plugin in your application:
+
+```typescript
+import { provideEventModifiersPlugin } from '@telperion/ng-pack/utils';
+
+bootstrapApplication(AppComponent, {
+  providers: [provideEventModifiersPlugin()]
+});
+```
+
+Then use modifiers in your templates:
+
+```html
+<!-- Prevent default form submission -->
+<form (submit.pd)="onSubmit()">...</form>
+
+<!-- Stop event propagation -->
+<div (click.sp)="handleClick()">...</div>
+
+<!-- Chain multiple modifiers -->
+<button (click.pd.sp)="handleButtonClick()">Click me</button>
+```
+
+#### Available Modifiers
+
+- `pd` - Calls `preventDefault()` on the event
+- `sp` - Calls `stopPropagation()` on the event
+
+### Provide Service Directive
+
+Utility function to create a provider for a directive/component that can be injected as a service. Useful for parent-child directive communication.
+
+#### Usage
+
+**1. Create an injection token:**
+
+```typescript
+// parent.service.ts
+import { InjectionToken } from "@angular/core";
+import type { ParentDirective } from "./parent.directive";
+
+export const ParentService = new InjectionToken<ParentDirective>("ParentService");
+```
+
+**2. Provide the directive as a service:**
+
+```typescript
+// parent.directive.ts
+import { Directive } from "@angular/core";
+import { provideServiceDirective } from "@telperion/ng-pack/utils";
+import { ParentService } from "./parent.service";
+
+@Directive({
+  selector: '[parent]',
+  providers: [provideServiceDirective(ParentService, ParentDirective)],
+})
+export class ParentDirective {
+  doSomething() {
+    console.log('Parent action');
+  }
+}
+```
+
+**3. Inject in child directive:**
+
+```typescript
+// child.directive.ts
+import { Directive, inject } from "@angular/core";
+import { ParentService } from "./parent.service";
+
+@Directive({
+  selector: '[child]',
+})
+export class ChildDirective {
+  private parent = inject(ParentService);
+
+  ngOnInit() {
+    this.parent.doSomething();
+  }
+}
+```
+
+**4. Use in template:**
+
+```html
+<div parent>
+  <div child></div>
+</div>
+```
+
+### Construct Fetcher
+
+A utility function that creates a proxy wrapper around Angular's `HttpClient` to convert Observable-based HTTP methods into Promise-based methods with automatic error handling. Returns a tuple of `[error, response]` instead of throwing, following the Go-style error handling pattern.
+
+#### Features
+
+- 🎯 Converts all HttpClient methods to Promise-based API
+- ✅ Returns `[error, response]` tuple for predictable error handling
+- 🔄 Automatically uses `firstValueFrom` to convert Observables
+- 🛡️ No try-catch blocks needed in your code
+- 💉 Uses Angular's dependency injection
+
+#### Usage
+
+**Basic example:**
+
+```typescript
+import { Component } from '@angular/core';
+import { constructFetcher } from '@telperion/ng-pack/utils';
+
+@Component({
+  selector: 'app-example',
+  template: `
+    <button (click)="fetchData()">Fetch Data</button>
+    <div *ngIf="loading">Loading...</div>
+    <div *ngIf="error">Error: {{ error }}</div>
+    <div *ngIf="data">{{ data | json }}</div>
+  `
+})
+export class ExampleComponent {
+  private fetcher = constructFetcher();
+  
+  loading = false;
+  error: any = null;
+  data: any = null;
+
+  async fetchData() {
+    this.loading = true;
+    const [error, response] = await this.fetcher.get<{ items: string[] }>('/api/data');
+    this.loading = false;
+    
+    if (error) {
+      this.error = error;
+      console.error('Error fetching data:', error);
+      return;
+    }
+    
+    this.data = response;
+    console.log('Fetched data:', response);
+  }
+}
+```
+
+**POST request with body:**
+
+```typescript
+async createUser() {
+  const [error, response] = await this.fetcher.post<User>(
+    '/api/users',
+    { name: 'John', email: 'john@example.com' }
+  );
+  
+  if (error) {
+    console.error('Failed to create user:', error);
+    return;
+  }
+  
+  console.log('User created:', response);
+}
+```
+
+**With request options:**
+
+```typescript
+async fetchWithHeaders() {
+  const [error, response] = await this.fetcher.get<Data>(
+    '/api/data',
+    {
+      headers: { 'Authorization': 'Bearer token' },
+      params: { page: '1', limit: '10' }
+    }
+  );
+  
+  if (error) {
+    // Handle error
+    return;
+  }
+  
+  // Use response
+}
+```
+
+#### API
+
+The fetcher provides the same methods as `HttpClient` but with Promise-based signatures:
+
+- `get<T>(url, options?)` → `Promise<[error, T]>`
+- `post<T>(url, body, options?)` → `Promise<[error, T]>`
+- `put<T>(url, body, options?)` → `Promise<[error, T]>`
+- `patch<T>(url, body, options?)` → `Promise<[error, T]>`
+- `delete<T>(url, options?)` → `Promise<[error, T]>`
+- `head<T>(url, options?)` → `Promise<[error, T]>`
+- `options<T>(url, options?)` → `Promise<[error, T]>`
+- `request<T>(method, url, options?)` → `Promise<[error, T]>`
+
+#### Return Value
+
+All methods return a Promise that resolves to a tuple:
+- **Success**: `[null, response]` - Error is null, response contains the data
+- **Failure**: `[error, null]` - Error contains the error object, response is null
+
+#### Benefits
+
+1. **No try-catch needed**: Error handling is explicit and predictable
+2. **Type-safe**: Full TypeScript support with generic types
+3. **Consistent pattern**: Same error handling pattern across all HTTP methods
+4. **DI integration**: Works seamlessly with Angular's dependency injection
+5. **Clean code**: Reduces boilerplate and improves readability
+
+## License
+
+MIT