### Integrated Product Store Example

Source: https://github.com/dotted-labs/ngx-signal-utils/blob/main/llms.txt

An example demonstrating the integration of multiple @ngrx/signals utilities, including entities, pagination, query parameters, and status management, to create a comprehensive product store.

```typescript
import { signalStore, patchState } from '@ngrx/signals';
import { withEntities, setAllEntities } from '@ngrx/signals/entities';
import { withPagination, setTotalItems } from '@dotted-labs/ngx-signal-utils/pagination';
import { withQueryParams } from '@dotted-labs/ngx-signal-utils/route';
import { withStatus, setLoading, setLoaded, setError } from '@dotted-labs/ngx-signal-utils/status';

interface Product {
  id: number;
  name: string;
  price: number;
  category: string;
}

export const ProductStore = signalStore(
  { providedIn: 'root' },
  withEntities<Product>(),
  withPagination<Product>({ isLocal: false }),
  withQueryParams({
    search: (param?: string) => param || '',
    category: (param?: string) => param || 'all',
    sortBy: (param?: string) => param as 'name'|'price' || 'name'
  }),
  withStatus(),
  withMethods((store) => ({
    async loadProducts() {
      patchState(store, setLoading());
      
      try {
        const params = {
          page: store.page(),

```

--------------------------------

### Install Dependencies

Source: https://github.com/dotted-labs/ngx-signal-utils/blob/main/CONTRIBUTING.md

Installs the necessary Node.js dependencies to set up the development environment for NGX Bootstrap Components.

```bash
npm install
```

--------------------------------

### Development Commands

Source: https://github.com/dotted-labs/ngx-signal-utils/blob/main/llms.txt

A list of common npm commands for managing the ngx-signal-utils project, including installation, building, testing, linting, and publishing.

```bash
npm install                    # Install dependencies
npm run build                  # Build all libraries
npm run build:ngx-signal-utils # Build specific library
npm test                       # Run tests
npm run lint                   # Lint code
npm run publish                # Publish all libraries
```

--------------------------------

### Development Commands

Source: https://github.com/dotted-labs/ngx-signal-utils/blob/main/CLAUDE.md

Commands for development, including watch mode and starting the development server.

```bash
npm run watch

ng start
```

--------------------------------

### Type Configuration Example

Source: https://github.com/dotted-labs/ngx-signal-utils/blob/main/CLAUDE.md

Demonstrates the use of generic types and configuration objects for creating flexible and type-safe APIs.

```typescript
export function withQueryParams<Config extends ParamsConfig>(config: Config)
```

--------------------------------

### Install ngx-signal-utils

Source: https://github.com/dotted-labs/ngx-signal-utils/blob/main/llms.txt

Install the @dotted-labs/ngx-signal-utils package using npm. This library provides utilities for Angular signals and @ngrx/signals store.

```typescript
npm install @dotted-labs/ngx-signal-utils
```

--------------------------------

### Install ngx-signal-utils

Source: https://github.com/dotted-labs/ngx-signal-utils/blob/main/README.md

Installs the ngx-signal-utils package using npm.

```bash
npm install @dotted-labs/ngx-signal-utils
```

--------------------------------

### Feature Pattern Example

Source: https://github.com/dotted-labs/ngx-signal-utils/blob/main/CLAUDE.md

Illustrates the standard structure for creating new features using @ngrx/signals, including state, computed properties, and methods.

```typescript
export function withFeatureName<T>(config?: Config) {
  return signalStoreFeature(
    withState<StateInterface>(initialState),
    withComputed((store) => ({
      // Computed properties from state
    })),
    withMethods((store) => ({
      // Methods to update state
    }))
  );
}
```

--------------------------------

### Troubleshooting: Importing from Subpaths

Source: https://github.com/dotted-labs/ngx-signal-utils/blob/main/llms.txt

Example of correct import paths for ngx-signal-utils submodules.

```typescript
import { PaginationSignal } from '@dotted-labs/ngx-signal-utils/pagination';
import { RouteSignal } from '@dotted-labs/ngx-signal-utils/route';
import { StatusSignal } from '@dotted-labs/ngx-signal-utils/status';
```

--------------------------------

### Product Store and Component Example

Source: https://github.com/dotted-labs/ngx-signal-utils/blob/main/llms.txt

Demonstrates the usage of a product store with pagination and filtering, and a corresponding Angular component to display products and handle user interactions. It utilizes NgRx Signals for state management and includes logic for loading products, applying filters, and navigating through pages.

```typescript
import { Component, OnInit, inject } from '@angular/core';
import { ProductStore } from './product.store'; // Assuming ProductStore is defined elsewhere

@Component({
  selector: 'app-products',
  templateUrl: './products.component.html', // Assuming template is in a separate file
  standalone: true,
  imports: [ /* relevant Angular modules */ ]
})
export class ProductsComponent implements OnInit {
  productStore = inject(ProductStore);

  ngOnInit() {
    this.productStore.loadProducts();
  }

  updateSearch(event: Event) {
    const search = (event.target as HTMLInputElement).value;
    this.productStore.applyFilters({ search });
  }

  updateCategory(event: Event) {
    const category = (event.target as HTMLSelectElement).value;
    this.productStore.applyFilters({ category });
  }

  changePage(page: number) {
    this.productStore.changePage(page, () => this.productStore.loadProducts());
  }
}

```

```html
<div class="filters">
  <input 
    [value]="productStore.search()" 
    (input)="updateSearch($event)"
    placeholder="Search products...">
  
  <select [value]="productStore.category()" (change)="updateCategory($event)">
    <option value="all">All Categories</option>
    <option value="electronics">Electronics</option>
    <option value="clothing">Clothing</option>
  </select>
</div>

<div *ngIf="productStore.isLoading()" class="loading">
  Loading products...
</div>

<div *ngIf="productStore.error()" class="error">
  Error: {{ productStore.error() }}
  <button (click)="productStore.loadProducts()">Retry</button>
</div>

<div *ngIf="productStore.isLoaded() && !productStore.isEmpty()" class="products">
  <div *ngFor="let product of productStore.currentPage()" class="product-card">
    <h3>{{ product.name }}</h3>
    <p>Price: {{ product.price | currency }}</p>
    <p>Category: {{ product.category }}</p>
  </div>
</div>

<div *ngIf="productStore.isLoaded() && productStore.isEmpty()" class="empty">
  No products found.
</div>

<div *ngIf="productStore.isLoaded() && !productStore.isEmpty()" class="pagination">
  <button 
    [disabled]="!productStore.hasPreviousPage()" 
    (click)="changePage(productStore.page() - 1)">
    Previous
  </button>
  
  <span>Page {{ productStore.page() }} of {{ productStore.totalPages() }}</span>
  
  <button 
    [disabled]="!productStore.hasNextPage()" 
    (click)="changePage(productStore.page() + 1)">
    Next
  </button>
</div>

```

--------------------------------

### State Update Function Example

Source: https://github.com/dotted-labs/ngx-signal-utils/blob/main/CLAUDE.md

Provides an example of a utility function for updating the state within a feature.

```typescript
export function setFeatureState(value: Type): StateInterface {
  return { /* state update */ };
}
```

--------------------------------

### Implement Pagination with signalStore

Source: https://github.com/dotted-labs/ngx-signal-utils/blob/main/llms.txt

Integrate pagination into a signalStore using withEntities and withPagination. This example demonstrates how to manage entities with local pagination and load data from a service.

```typescript
import { signalStore, patchState } from '@ngrx/signals';
import { withEntities, setAllEntities } from '@ngrx/signals/entities';
import { withPagination, setTotalItems } from '@dotted-labs/ngx-signal-utils/pagination';

export const UserStore = signalStore(
  { providedIn: 'root' },
  withEntities<User>(),
  withPagination<User>({ isLocal: false }),
  withMethods((store) => ({
    async loadUsers() {
      const users = await userService.getUsers({
        page: store.page(),
        pageSize: store.pageSize()
      });
      patchState(store,
        setAllEntities(users.data),
        setTotalItems(users.total)
      );
    }
  }))
);

// Usage in component
@Component({
  template: `
    <user-list [users]="userStore.currentPage()" />
    <pagination
      [page]="userStore.page()"
      [totalPages]="userStore.totalPages()"
      [hasNext]="userStore.hasNextPage()"
      [hasPrevious]="userStore.hasPreviousPage()"
      (pageChange)="changePage($event)" />
  `
})
export class UsersComponent {
  userStore = inject(UserStore);

  changePage(page: number) {
    this.userStore.changePage(page, () => this.userStore.loadUsers());
  }
}
```

--------------------------------

### Development Commands

Source: https://github.com/dotted-labs/ngx-signal-utils/blob/main/README.md

Provides essential commands for developing and maintaining the ngx-signal-utils library, including installing dependencies, building the library, running tests, and linting the code.

```bash
# Install dependencies
npm install

# Build the library
npm run build

# Run tests
npm test

# Lint code
npm run lint
```

--------------------------------

### withStatus() Usage Example

Source: https://github.com/dotted-labs/ngx-signal-utils/blob/main/projects/ngx-signal-utils/status/README.md

Demonstrates how to use the withStatus feature in an Angular application with TestStore. It shows setting the store to loading, loaded, and error states using helper functions and manual state patching.

```typescript
import { withStatus } from '@dotted-labs/ngx-signal-utils/status';

export const TestStore = signalStore(
  withStatus(),
  withMethods((store) => ({
    placeHolderMethod: () => {
      // Using the helper functions to set the store to loading state
      patchState(store, setLoading())
      // Without the helper functions, you would need to manually update the store's state using the LoadingState enum
      patchState(store, { status: LoadingState.LOADED });
      //or set the error state returning an { error: string } object.
      patchState(store, { status: { error: 'An error occurred' } });
    },
  })),
);

readonly #testStore = inject(TestStore);

console.log(this.#testStore.isLoading());
console.log(this.#testStore.isLoaded());
console.log(this.#testStore.computed());

```

--------------------------------

### Integrate dl-pagination Component

Source: https://github.com/dotted-labs/ngx-signal-utils/blob/main/llms.txt

Use the dl-pagination component from @dotted-labs/ngx-bootstrap-components to provide pagination controls. This example shows how to bind properties and handle page change events.

```html
<dl-pagination
  [page]="entityStore.page()"
  [pageSize]="entityStore.pageSize()"
  [total]="entityStore.total()"
  [totalPages]="entityStore.totalPages()"
  [hasPreviousPage]="entityStore.hasPreviousPage()"
  [hasNextPage]="entityStore.hasNextPage()"
  (pageChange)="changePage($event)"
  (pageSizeChange)="changePageSize($event)">
</dl-pagination>
```

--------------------------------

### Implement Route Parameters with signalStore

Source: https://github.com/dotted-labs/ngx-signal-utils/blob/main/llms.txt

Retrieve route parameters within a signalStore using withRouteParams. This example demonstrates how to transform a route parameter to a number and use it within a method.

```typescript
// For route: /users/:userId
export const UserDetailStore = signalStore(
  withRouteParams({
    userId: (param: string) => Number(param) // Transform to number
  }),
  withMethods((store) => ({
    loadUser() {
      const userId = store.userId(); // number - reactive to route changes
      // Load user logic
    }
  }))
);
```

--------------------------------

### Publishing Commands

Source: https://github.com/dotted-labs/ngx-signal-utils/blob/main/CLAUDE.md

Commands to publish all libraries or individual libraries, including a build step.

```bash
npm run publish

npm run publish:ngx-signal-utils
npm run publish:ngx-utils
npm run publish:ngx-bootstrap-components
```

--------------------------------

### Build Commands

Source: https://github.com/dotted-labs/ngx-signal-utils/blob/main/CLAUDE.md

Commands to build all libraries or individual libraries within the monorepo.

```bash
npm run build

npm run build:ngx-signal-utils
npm run build:ngx-utils
npm run build:ngx-bootstrap-components
```

--------------------------------

### Clone Repository

Source: https://github.com/dotted-labs/ngx-signal-utils/blob/main/CONTRIBUTING.md

Clones the NGX Bootstrap Components repository from GitHub to your local machine.

```bash
git clone https://github.com/YOUR_USERNAME/ngx-bootstrap-components.git
cd ngx-bootstrap-components
```

--------------------------------

### Route & Query Parameters API

Source: https://github.com/dotted-labs/ngx-signal-utils/blob/main/llms.txt

API documentation for route and query parameters features provided by @dotted-labs/ngx-signal-utils/route. Includes functions for integrating route and query parameters into @ngrx/signals stores.

```APIDOC
withRouteParams(ParamsConfig)
  - Enables retrieval of route parameters from URLs within @ngrx/signals stores.
  - Creates computed signals for parameters accessible in withMethods and withComputed.
  - Parameters:
    - ParamsConfig: An object where keys are parameter names and values are functions to transform the parameter.

withQueryParams(ParamsConfig)
  - Enables retrieval of query parameters from URLs within @ngrx/signals stores.
  - Creates computed signals for parameters accessible in withMethods and withComputed.
  - Parameters:
    - ParamsConfig: An object where keys are parameter names and values are functions to transform the parameter.

ParamsConfig
  - An object where keys are parameter names and values are functions to transform the parameter.
  - Example: { userId: (param: string) => Number(param) } // Transform to number
```

--------------------------------

### Testing Commands

Source: https://github.com/dotted-labs/ngx-signal-utils/blob/main/CLAUDE.md

Commands to run all tests or tests for a specific library.

```bash
ng test

ng test ngx-signal-utils
```

--------------------------------

### Angular Store Dependency Injection

Source: https://github.com/dotted-labs/ngx-signal-utils/blob/main/llms.txt

Illustrates using dependency injection for stores with `providedIn: 'root'`. This makes the store available application-wide.

```typescript
import { Injectable, signal } from '@angular/core';

interface UserState {
  name: string;
  age: number;
}

@Injectable({
  providedIn: 'root'
})
export class UserStore {
  private state = signal<UserState>({
    name: 'John Doe',
    age: 30
  });

  readonly user = this.state.asReadonly();

  updateUser(name: string, age: number) {
    this.state.update(state => ({ ...state, name, age }));
  }
}
```

--------------------------------

### Basic Usage with UserStore

Source: https://github.com/dotted-labs/ngx-signal-utils/blob/main/README.md

Demonstrates creating a signal store with entities, pagination, and status management, including methods for loading users and handling responses. It also shows how to use the store in a component.

```typescript
import { signalStore } from '@ngrx/signals';
import { withEntities } from '@ngrx/signals/entities';
import { withPagination } from '@dotted-labs/ngx-signal-utils/pagination';
import { withStatus } from '@dotted-labs/ngx-signal-utils/status';

// Create a feature-rich store with pagination and status management
export const UserStore = signalStore(
  { providedIn: 'root' },
  withEntities<User>(),
  withPagination<User>({ isLocal: false }),
  withStatus(),
  withMethods((store) => ({
    async loadUsers() {
      patchState(store, setLoading());
      try {
        const users = await userService.getUsers({
          page: store.page(),
          pageSize: store.pageSize(),
        });
        patchState(store, setAllEntities(users.data), setTotalItems(users.total), setLoaded());
      } catch (error) {
        patchState(store, setError(error.message));
      }
    },
  })),
);

// Use in your component
@Component({
  template: `
    <div *ngIf="userStore.isLoading()">Loading...</div>
    <div *ngIf="userStore.error()">{{ userStore.error() }}</div>

    <user-list [users]="userStore.currentPage()" />

    <pagination
      [page]="userStore.page()"
      [totalPages]="userStore.totalPages()"
      [hasNext]="userStore.hasNextPage()"
      [hasPrevious]="userStore.hasPreviousPage()"
      (pageChange)="changePage($event)"
    />
  `,
})
export class UsersComponent {
  userStore = inject(UserStore);

  ngOnInit() {
    this.userStore.loadUsers();
  }

  changePage(page: number) {
    this.userStore.changePage(page, () => this.userStore.loadUsers());
  }
}
```

--------------------------------

### Query Parameter Store

Source: https://github.com/dotted-labs/ngx-signal-utils/blob/main/llms.txt

Creates a signal store that synchronizes with URL query parameters. It allows defining default values, transformations, and type safety for parameters. Automatically generates update methods for each parameter.

```typescript
export const FilterStore = signalStore(
  withQueryParams({
    search: (param?: string) => param || '',           // Default empty
    sort: (param?: string) => param as 'asc'|'desc' || 'asc',  // Type-safe
    page: (param?: string) => param ? Number(param) : 1        // Transform
  }),
  withMethods((store) => ({
    updateSearch(term: string) {
      store.updateSearch(term); // Updates URL automatically
    },
    updateSort(direction: 'asc'|'desc') {
      store.updateSort(direction);
    }
  }))
);

```

--------------------------------

### withPagination Store Configuration

Source: https://github.com/dotted-labs/ngx-signal-utils/blob/main/projects/ngx-signal-utils/pagination/README.md

Demonstrates how to configure an entity list store with the withPagination feature. It shows the import statement and the store definition, including the option for local or server-side pagination.

```typescript
import { withPagination } from '@dotted-labs/ngx-signal-utils/pagination';

export const EntityListStore = signalStore(
  withEntities<EntityType>(),
  withPagination<EntityType>({
    isLocal: true // If true, the entities are sliced locally based on the current page and page size. If false, the entities are fetched from the server.
  })
);

readonly #entityListStore = inject(EntityListStore);

console.log(this.#entityListStore.currentPage());
console.log(this.#entityListStore.totalPages());
console.log(this.#entityListStore.hasNextPage());
console.log(this.#entityListStore.hasPreviousPage());

```

--------------------------------

### Troubleshooting: State Updates with patchState

Source: https://github.com/dotted-labs/ngx-signal-utils/blob/main/llms.txt

Demonstrates the correct way to update state using `patchState` for reactive stores.

```typescript
import { patchState } from '@ngrx/signals/stores';

// Assuming 'userStore' is an instance of a store with a state signal
// patchState(userStore.state, { name: 'Jane Doe' });
```

--------------------------------

### Pagination API

Source: https://github.com/dotted-labs/ngx-signal-utils/blob/main/llms.txt

API documentation for pagination features provided by @dotted-labs/ngx-signal-utils/pagination. Includes state properties, computed properties, methods, and helper functions for managing pagination in Angular applications.

```APIDOC
withPagination<EntityType>({ isLocal: boolean })
  - Integrates pagination capabilities into stores.
  - Parameters:
    - isLocal: true = entities sliced locally based on current page/size, false = entities fetched from server for each page

PaginationState Properties:
  - page: Current page number (number)
  - pageSize: Items per page (number)
  - total: Total items across all pages (number)

Computed Properties:
  - isEmpty: Returns true if no entities (boolean)
  - hasNextPage: Returns true if next page available (boolean)
  - hasPreviousPage: Returns true if previous page available (boolean)
  - totalPages: Total number of pages calculated (number)
  - currentPage: Entities for current page, sliced if isLocal=true (Entity[])

Methods:
  - changePage(page: number, callback?: CallableFunction): Navigate to specified page
  - changePageSize(pageSize: number, callback?: CallableFunction): Change items per page

Helper Functions:
  - setTotalItems(total: number): Returns { total } for patchState updates
```

--------------------------------

### Linting Command

Source: https://github.com/dotted-labs/ngx-signal-utils/blob/main/CLAUDE.md

Command to lint and fix code in the main library.

```bash
npm run lint
```

--------------------------------

### Commit Changes

Source: https://github.com/dotted-labs/ngx-signal-utils/blob/main/CONTRIBUTING.md

Commits staged changes to the local repository with a descriptive message.

```bash
git commit -am 'Add some feature'
```

--------------------------------

### Pagination Feature with ProductStore

Source: https://github.com/dotted-labs/ngx-signal-utils/blob/main/README.md

Illustrates the use of the `withPagination` feature for local pagination management in an Angular signal store. It shows how to create a store with entities and pagination, and lists the available computed properties and methods for managing pagination.

```typescript
import { withPagination, setTotalItems } from '@dotted-labs/ngx-signal-utils/pagination';

export const ProductStore = signalStore(
  withEntities<Product>(),
  withPagination<Product>({ isLocal: true }), // Local pagination
);

// Available computed properties
productStore.isEmpty(); // boolean
productStore.hasNextPage(); // boolean
productStore.hasPreviousPage(); // boolean
productStore.totalPages(); // number
productStore.currentPage(); // Product[] (sliced for current page)

// Available methods
productStore.changePage(2, callback); // Navigate to page 2
productStore.changePageSize(20, callback); // Change items per page
```

--------------------------------

### Core Exports API Reference

Source: https://github.com/dotted-labs/ngx-signal-utils/blob/main/README.md

Lists the core exports from the ngx-signal-utils library, including utilities for pagination, route management, and status management.

```APIDOC
Core Exports:

// Pagination
export { withPagination, setTotalItems, PaginationState } from '@dotted-labs/ngx-signal-utils/pagination';

// Route Management
export { withRouteParams, withQueryParams, ParamsConfig } from '@dotted-labs/ngx-signal-utils/route';

// Status Management
export { withStatus, setLoading, setLoaded, setError, StatusState } from '@dotted-labs/ngx-signal-utils/status';
```

--------------------------------

### Push Changes

Source: https://github.com/dotted-labs/ngx-signal-utils/blob/main/CONTRIBUTING.md

Pushes the local feature branch with committed changes to the remote repository (your fork).

```bash
git push origin your-feature-branch
```

--------------------------------

### Create Feature Branch

Source: https://github.com/dotted-labs/ngx-signal-utils/blob/main/CONTRIBUTING.md

Creates a new Git branch for developing a specific feature or bug fix.

```bash
git checkout -b your-feature-branch
```

--------------------------------

### withStatus() State Attributes and Helper Functions

Source: https://github.com/dotted-labs/ngx-signal-utils/blob/main/projects/ngx-signal-utils/status/README.md

Details the state attributes and helper functions provided by the withStatus feature for managing loading, loaded, and error states, including accessing the status object, checking loading/loaded status, retrieving errors, and setting states.

```APIDOC
withStatus() Feature Documentation:

State Attributes:
  - status: Returns the raw status object containing the loading, loaded, or error states.
  - isLoading: Returns `true` if the store is loading, otherwise `false`.
  - isLoaded: Returns `true` if the store is loaded, otherwise `false`.
  - error: Returns an object containing the error message { error: string } if the store is in an error state, otherwise `null`. You can use the `getError()` helper function to detect if there is an error.

Helper Functions:
  - setLoading(): Sets the store to loading state.
  - setLoaded(): Sets the store to loaded state.
  - setError(error:string): Sets the store to error state.
```

--------------------------------

### Pagination State Attributes and Methods

Source: https://github.com/dotted-labs/ngx-signal-utils/blob/main/projects/ngx-signal-utils/pagination/README.md

Details the state attributes (page, pageSize, total) and computed attributes (isEmpty, hasNextPage, hasPreviousPage, totalPages, currentPage) provided by the withPagination feature. It also lists the methods for changing the page and page size.

```APIDOC
withPagination Feature Documentation:

State Attributes:
  - page: Current page number.
  - pageSize: Number of items per page.
  - total: Total number of items across all pages.

Computed Attributes:
  - isEmpty: Returns `true` if there are no entities, otherwise `false`.
  - hasNextPage: Returns `true` if there is a next page available based on the current page and page size.
  - hasPreviousPage: Returns `true` if there is a previous page available.
  - totalPages: Calculates the total number of pages based on total items and page size.
  - currentPage: Returns the entities for the current page. If `isLocal` parameter is `true`, it slices the entities locally based on the current page and page size.

Methods:
  - changePage(page: number, callback?: CallableFunction): Changes the current page to the specified page number and executes a callback function if provided.
  - changePageSize(pageSize: number, callback?: CallableFunction): Changes the number of items per page to the specified size and executes a callback function if provided.

```

--------------------------------

### Usage of withRouteParams and withRouteQueryParams

Source: https://github.com/dotted-labs/ngx-signal-utils/blob/main/projects/ngx-signal-utils/route/README.md

Demonstrates how to integrate `withRouteParams` and `withRouteQueryParams` into an ngrx/signals store to access route and query parameters. It shows how these parameters can be made available as computed signals within the store and used in methods.

```typescript
import { withStatus } from '@dotted-labs/ngx-signal-utils/status';

const routes = [
  { path: 'user/:routeParamId', ... },
];

export const TestStore = signalStore(
  // With the withRouteParams() feature, you can easily access the route parameters of the current route within the store.
  withRouteParams({ routeParamId: (param) => param }),
  // With the withRouteQueryParams() feature, you can easily access the query parameters of the current route within the store.
  // withRouteQueryParams({ queryParamId: (param) => param }),
  withMethods((store) => ({
    placeHolderMethod: () => {
     // Now you can use the route parameters and query parameters within the store.
     console.log(routeParamId());
     ...
    },
  })),
);

readonly #testStore = inject(TestStore);

console.log(this.#testStore.isLoading());
console.log(this.#testStore.isLoaded());
console.log(this.#testStore.computed());

```

--------------------------------

### Route Parameter Store

Source: https://github.com/dotted-labs/ngx-signal-utils/blob/main/llms.txt

Extends signal stores with route parameters, making them accessible as signals. This is useful for accessing dynamic segments from the URL, such as IDs or categories.

```typescript
export const ProductStore = signalStore(
  withRouteParams({
    categoryId: (param: string) => param // Keep as string
  }),
  withQueryParams({
    search: (param?: string) => param || '',
    minPrice: (param?: string) => param ? Number(param) : 0,
    maxPrice: (param?: string) => param ? Number(param) : 1000,
    sortBy: (param?: string) => param as 'name'|'price' || 'name'
  }),
  withMethods((store) => ({
    applyFilters() {
      const filters = {
        category: store.categoryId(),
        search: store.search(),
        minPrice: store.minPrice(),
        maxPrice: store.maxPrice(),
        sortBy: store.sortBy()
      };
      // Apply filters logic
    },
    updatePriceRange(min: number, max: number) {
      store.updateMinPrice(min);
      store.updateMaxPrice(max);
    }
  }))
);

```

--------------------------------

### Angular Computed Properties

Source: https://github.com/dotted-labs/ngx-signal-utils/blob/main/llms.txt

Demonstrates how to use computed properties for reactive templates in Angular. This enhances template performance by only re-evaluating when dependencies change.

```typescript
import { Component, computed, signal } from '@angular/core';

@Component({
  selector: 'app-computed-example',
  template: `
    <p>Count: {{ count() }}</p>
    <p>Double Count: {{ doubleCount() }}</p>
    <button (click)="increment()">Increment</button>
  `
})
export class ComputedExampleComponent {
  count = signal(0);
  doubleCount = computed(() => this.count() * 2);

  increment() {
    this.count.update(value => value + 1);
  }
}
```

--------------------------------

### Integrating with ngx-bootstrap-components Pagination

Source: https://github.com/dotted-labs/ngx-signal-utils/blob/main/projects/ngx-signal-utils/pagination/README.md

Shows how to use the withPagination feature in an Angular component, binding the store's pagination state to the dl-pagination component and handling page and page size changes.

```typescript
import { PaginationComponent } from '@dotted-labs/ngx-bootstrap-components/pagination';

@Component({
...,
  standalone: true,
  imports: [TableComponent],
})
export class UsersComponent implements OnInit {
  public readonly entityListStore = inject(entityListStore);

  public changePage(page: number): void {
    this.entityListStore.changePage(page, this.entityListStore.loadUsers);
  }

  public changePageSize(pageSize: number): void {
    this.entityListStore.changePageSize(pageSize, this.entityListStore.loadUsers);
  }

}

```

```html
<dl-pagination
  [page]="entityListStore.page()"
  [pageSize]="entityListStore.pageSize()"
  [total]="entityListStore.total()"
  [totalPages]="entityListStore.totalPages()"
  [hasPreviousPage]="entityListStore.hasPreviousPage()"
  [hasNextPage]="entityListStore.hasNextPage()"
  [pageSize]="entityListStore.pageSize()"
  (pageChange)="changePage($event)"
  (pageSizeChange)="changePageSize($event)"
></dl-pagination>

```

--------------------------------

### Status Management

Source: https://github.com/dotted-labs/ngx-signal-utils/blob/main/llms.txt

Provides utilities for managing the loading, loaded, and error states of asynchronous operations within @ngrx/signals stores. It includes helper functions to set states and computed properties to check them.

```typescript
import { withStatus, setLoading, setLoaded, setError, StatusState } from '@dotted-labs/ngx-signal-utils/status';

// State structure
interface StatusState {
  status: CallState; // LoadingState enum or ErrorState object
}

type CallState = LoadingState | ErrorState;

enum LoadingState {
  INIT = 'INIT',
  LOADING = 'LOADING', 
  LOADED = 'LOADED'
}

interface ErrorState {
  error: string;
}

// Usage Pattern
export const ApiStore = signalStore(
  withStatus(),
  withMethods((store) => ({
    async fetchData() {
      patchState(store, setLoading());
      
      try {
        const data = await apiService.getData();
        patchState(store, { data }, setLoaded());
      } catch (error) {
        patchState(store, setError(error.message));
      }
    }
  }))
);

```

--------------------------------

### Status Management

Source: https://github.com/dotted-labs/ngx-signal-utils/blob/main/README.md

Provides comprehensive state tracking for loading, errors, and success states using built-in utilities. It simplifies managing asynchronous operation states within signal stores. Dependencies include @ngrx/signals.

```typescript
import { withStatus, setLoading, setLoaded, setError } from '@dotted-labs/ngx-signal-utils/status';

export const ApiStore = signalStore(
  withStatus(),
  withMethods((store) => ({
    async fetchData() {
      patchState(store, setLoading());

      try {
        const data = await apiService.getData();
        patchState(store, { data }, setLoaded());
      } catch (error) {
        patchState(store, setError(error.message));
      }
    },
  })),
);

// Usage in templates
// apiStore.isLoading() -> boolean
// apiStore.isLoaded()  -> boolean
// apiStore.error()     -> string | null
```

--------------------------------

### Type-Safe Parameter Management

Source: https://github.com/dotted-labs/ngx-signal-utils/blob/main/README.md

Handles route and query parameters with full type safety and reactive updates. It allows defining parameter transformations and default values, and accessing them within store methods. Dependencies include @angular/router and @ngrx/signals.

```typescript
import { withRouteParams, withQueryParams } from '@dotted-labs/ngx-signal-utils/route';

// Route: /users/:userId
export const UserDetailStore = signalStore(
  withRouteParams({
    userId: (param: string) => Number(param), // Transform to number
  }),
  withQueryParams({
    tab: (param?: string) => param || 'profile', // Default value
    sort: (param?: string) => (param as 'asc' | 'desc') || 'asc',
  }),
  withMethods((store) => ({
    // Access parameters in methods
    loadUser() {
      const userId = store.userId(); // number
      const tab = store.tab(); // string
      // ... load user logic
    },
    // Update query parameters
    switchTab(tab: string) {
      store.updateTab(tab); // Updates URL automatically
    },
  })),
);
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.