NgRx Signals

https://ngrx.io/guide/signals
Admin
NgRx Signals is a standalone library that provides a reactive state management solution and a set of...
Tokens:30,797
Snippets:300
Trust Score:9.4
Update:1 month ago
Show doc for...
Tokens:
Raw
### Manual installation with npm

Source: https://ngrx.io/guide/signals/install

Manually install the @ngrx/signals package using the npm package manager.

```bash
npm install @ngrx/signals
```

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

### Initialize TodosStore with withEntities

Source: https://ngrx.io/guide/signals/signal-store/entity-management

This example demonstrates how to integrate entity state into a SignalStore using the withEntities feature for a Todo type.

```typescript
import { computed } from '@angular/core';
import { signalStore } from '@ngrx/signals';
import { withEntities } from '@ngrx/signals/entities';

type Todo = {
  id: number;
  text: string;
  completed: boolean;
};

export const TodosStore = signalStore(withEntities<Todo>());
```

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

### Install with ng add

Source: https://ngrx.io/guide/signals/install

Use the Angular CLI to automatically add @ngrx/signals to your project dependencies and trigger the package manager installation.

```bash
ng add @ngrx/signals@latest
```

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

### Define OptionsStore with Explicit Linking

Source: https://ngrx.io/guide/signals/signal-store/linked-state

This example shows how to use WritableSignal instances, such as those created with linkedSignal, as linked state slices within the SignalStore.

```typescript
import { linkedSignal } from '@angular/core';
import {
  signalStore,
  withLinkedState,
  withState,
} from '@ngrx/signals';

export const OptionsStore = signalStore(
  withState({ options: [] as Option[] }),
  withLinkedState(({ options }) => ({
    selectedOption: linkedSignal<Option[], Option>({
      source: options,
      computation: (newOptions, previous) => {
        const option = newOptions.find(
          (o) => o.id === previous?.value.id
        );
        return option ?? newOptions[0];
      },
    }),
  }))
);
```

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

### Implement withHooks using the object signature

Source: https://ngrx.io/guide/signals/signal-store/lifecycle-hooks

This example demonstrates using the first signature of withHooks, which accepts an object with onInit and onDestroy methods. The onInit hook is executed within the injection context, allowing the use of functions like takeUntilDestroyed.

```typescript
import { computed } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { interval } from 'rxjs';
import {
  patchState,
  signalStore,
  withState,
  withHooks,
  withMethods,
} from '@ngrx/signals';

export const CounterStore = signalStore(
  withState({ count: 0 }),
  withMethods((store) => ({
    increment(): void {
      patchState(store, (state) => ({ count: state.count + 1 }));
    },
  })),
  withHooks({
    onInit(store) {
      // 👇 Increment the `count` every 2 seconds.
      interval(2_000)
        // 👇 Automatically unsubscribe when the store is destroyed.
        .pipe(takeUntilDestroyed())
        .subscribe(() => store.increment());
    },
    onDestroy(store) {
      console.log('count on destroy', store.count());
    },
  })
);
```

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

### Defining BookSearchStore with withReducer

Source: https://ngrx.io/guide/signals/signal-store/events

Example of using withReducer to map multiple events to case reducers that return partial state objects.

```typescript
import { signalStore, withState } from '@ngrx/signals';
import { on, withReducer } from '@ngrx/signals/events';
import { bookSearchEvents } from './book-search-events';
import { booksApiEvents } from './books-api-events';
import { Book } from './book';

type State = { query: string; books: Book[]; isLoading: boolean };

export const BookSearchStore = signalStore(
  withState<State>({ query: '', books: [], isLoading: false }),
  withReducer(
    on(bookSearchEvents.opened, () => ({ isLoading: true })),
    on(bookSearchEvents.queryChanged, ({ payload: query }) => ({
      query,
      isLoading: true,
    })),
    on(booksApiEvents.loadedSuccess, ({ payload: books }) => ({
      books,
      isLoading: false,
    })),
    on(booksApiEvents.loadedFailure, () => ({ isLoading: false }))
  )
);
```

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

### Define OptionsStore with Implicit Linking

Source: https://ngrx.io/guide/signals/signal-store/linked-state

This example demonstrates defining a SignalStore with a linked state slice using a computation function, which automatically updates when dependent signals change.

```typescript
import {
  patchState,
  signalStore,
  withLinkedState,
  withMethods,
  withState,
} from '@ngrx/signals';

export const OptionsStore = signalStore(
  withState({ options: [1, 2, 3] }),
  withLinkedState(({ options }) => ({
    // 👇 Defining a linked state slice.
    selectedOption: () => options()[0] ?? undefined,
  })),
  withMethods((store) => ({
    setOptions(options: number[]): void {
      patchState(store, { options });
    },
    setSelectedOption(selectedOption: number): void {
      // 👇 Updating a linked state slice.
      patchState(store, { selectedOption });
    },
  }))
);
```

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

### Defining a Store with Entity Updaters

Source: https://ngrx.io/guide/signals/signal-store/entity-management

Example of integrating entity updaters within a signalStore using withMethods and patchState.

```typescript
import { patchState, signalStore, withMethods } from '@ngrx/signals';
import {
  addEntity,
  removeEntities,
  updateAllEntities,
  withEntities,
} from '@ngrx/signals/entities';

type Todo = {
  /* ... */
};

export const TodosStore = signalStore(
  withEntities<Todo>(),
  withMethods((store) => ({
    addTodo(todo: Todo): void {
      patchState(store, addEntity(todo));
    },
    removeEmptyTodos(): void {
      patchState(
        store,
        removeEntities(({ text }) => !text)
      );
    },
    completeAllTodos(): void {
      patchState(store, updateAllEntities({ completed: true }));
    },
  }))
);
```

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

### Mocking SignalStore in Angular components

Source: https://ngrx.io/guide/signals/signal-store/testing

Shows how to mock a SignalStore by providing a plain object via dependency injection. Includes examples for verifying state changes and verifying method calls using vi.fn().

```typescript
import { Component, inject, signal } from '@angular/core';
import { TestBed } from '@angular/core/testing';
import {
  patchState,
  signalStore,
  withMethods,
  withState,
} from '@ngrx/signals';
import { page } from 'vitest/browser';

const CounterStore = signalStore(
  { providedIn: 'root' },
  withState({ count: 0 }),
  withMethods((store) => ({
    increment() {
      patchState(store, ({ count }) => ({ count: count + 1 }));
    },
  }))
);

@Component({
  selector: 'app-counter',
  template: `
    <p aria-label="count">{{ store.count() }}</p>
    <button type="button" (click)="store.increment()">
      Increment
    </button>
  `,
})
class CounterComponent {
  protected readonly store = inject(CounterStore);
}

// Test
describe('CounterComponent', () => {
  it('updates displayed count when the mock implements increment', async () => {
    const count = signal(0);
    const mockStore = {
      count,
      increment() {
        count.set(count() + 1);
      },
    };

    TestBed.configureTestingModule({
      providers: [{ provide: CounterStore, useValue: mockStore }],
    }).createComponent(CounterComponent);

    await expect
      .element(page.getByLabelText('count'))
      .toHaveTextContent('0');
    await page.getByRole('button', { name: 'Increment' }).click();
    await expect
      .element(page.getByLabelText('count'))
      .toHaveTextContent('1');
  });

  it('calls increment when the button is clicked and mock uses vi.fn()', async () => {
    const count = signal(0);
    const increment = vi.fn(() => count.set(count() + 1));
    const mockStore = { count, increment };

    TestBed.configureTestingModule({
      providers: [{ provide: CounterStore, useValue: mockStore }],
    }).createComponent(CounterComponent);

    await page.getByRole('button', { name: 'Increment' }).click();
    expect(increment).toHaveBeenCalledTimes(1);
  });
});
```

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

### Implement withHooks using the factory function signature

Source: https://ngrx.io/guide/signals/signal-store/lifecycle-hooks

This example uses the second signature of withHooks, which accepts a factory function. This approach allows sharing code between hooks and utilizing dependency injection via inject().

```typescript
export const CounterStore = signalStore(
  /* ... */
  withHooks((store) => {
    const logger = inject(Logger);
    let interval = 0;

    return {
      onInit() {
        interval = setInterval(() => store.increment(), 2_000);
      },
      onDestroy() {
        logger.info('count on destroy', store.count());
        clearInterval(interval);
      },
    };
  })
);
```

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

### BookSearch Component Integration

Source: https://ngrx.io/guide/signals/signal-store

An example of how to inject and use the BookSearchStore within an Angular component to manage state and trigger data fetching.

```typescript
import { Component, inject } from '@angular/core';
import { BookFilter } from './book-filter';
import { BookList } from './book-list';
import { BooksStore } from './books.store';

@Component({
  imports: [BookFilter, BookList],
  template: `
    <h1>Books ({{ store.booksCount() }})</h1>

    <ngrx-book-filter
      [query]="store.filter.query()"
      [order]="store.filter.order()"
      (queryChange)="store.updateQuery($event)"
      (orderChange)="store.updateOrder($event)"
    />

    <ngrx-book-list
      [books]="store.sortedBooks()"
      [isLoading]="store.isLoading()"
    />
  `,
  providers: [BookSearchStore],
})
export class BookSearch {
  readonly store = inject(BookSearchStore);

  constructor() {
    const query = this.store.filter.query;
    // 👇 Re-fetch books whenever the value of query signal changes.
    this.store.loadByQuery(query);
  }
}
```

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

### Define Private Store Members

Source: https://ngrx.io/guide/signals/signal-store/private-store-members

Example of a SignalStore definition using the underscore prefix for private state, computed signals, properties, and methods.

```typescript
import { computed } from '@angular/core';
import { toObservable } from '@angular/core/rxjs-interop';
import {
    patchState,
    signalStore,
    withComputed,
    withMethods,
    withProps,
    withState,
} from '@ngrx/signals';

export const CounterStore = signalStore(
    withState({
        count1: 0,
        // 👇 private state slice
        _count2: 0,
    }),
    withComputed(({ count1, _count2 }) => ({
        // 👇 private computed signal
        _doubleCount1: computed(() => count1() _ 2),
        doubleCount2: computed(() => _count2() _ 2),
    })),
    withProps(({ count2, _doubleCount1 }) => ({
        // 👇 private property
        _count2$: toObservable(count2),
        doubleCount1$: toObservable(_doubleCount1),
    })),
    withMethods((store) => ({
        increment1(): void {
            patchState(store, { count1: store.count1() + 1 });
        },
        // 👇 private method
        _increment2(): void {
            patchState(store, { _count2: store._count2() + 1 });
        },
    })),
);
```

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

### Get the type of a SignalStore

Source: https://ngrx.io/guide/signals/faq

Use the InstanceType utility type to extract the type of a SignalStore instance.

```typescript
const CounterStore = signalStore(withState({ count: 0 }));

type CounterStore = InstanceType<typeof CounterStore>;

function logCount(store: CounterStore): void {
  console.log(store.count());
}
```

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

### BookSearchStore Implementation

Source: https://ngrx.io/guide/signals/signal-store

The complete implementation of BookSearchStore using withState, withComputed, and withMethods to manage book search state and asynchronous data loading.

```typescript
import { computed, inject } from '@angular/core';
import {
  debounceTime,
  distinctUntilChanged,
  pipe,
  switchMap,
  tap,
} from 'rxjs';
import {
  patchState,
  signalStore,
  withComputed,
  withMethods,
  withState,
} from '@ngrx/signals';
import { rxMethod } from '@ngrx/signals/rxjs-interop';
import { tapResponse } from '@ngrx/operators';
import { BooksService } from './books-service';
import { Book } from './book';

type BookSearchState = {
  books: Book[];
  isLoading: boolean;
  filter: { query: string; order: 'asc' | 'desc' };
};

const initialState: BookSearchState = {
  books: [],
  isLoading: false,
  filter: { query: '', order: 'asc' },
};

export const BookSearchStore = signalStore(
  withState(initialState),
  withComputed(({ books, filter }) => ({
    booksCount: computed(() => books().length),
    sortedBooks: computed(() => {
      const direction = filter.order() === 'asc' ? 1 : -1;

      return books().toSorted(
        (a, b) => direction * a.title.localeCompare(b.title)
      );
    }),
  })),
  withMethods((store, booksService = inject(BooksService)) => ({
    updateQuery(query: string): void {
      patchState(store, (state) => ({
        filter: { ...state.filter, query },
      }));
    },
    updateOrder(order: 'asc' | 'desc'): void {
      patchState(store, (state) => ({
        filter: { ...state.filter, order },
      }));
    },
    loadByQuery: rxMethod<string>(
      pipe(
        debounceTime(300),
        distinctUntilChanged(),
        tap(() => patchState(store, { isLoading: true })),
        switchMap((query) => {
          return booksService.getByQuery(query).pipe(
            tapResponse({
              next: (books) => patchState(store, { books }),
              error: console.error,
              finalize: () => patchState(store, { isLoading: false }),
            })
          );
        })
      )
    ),
  }))
);
```

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

### BookListStore Implementation

Source: https://ngrx.io/guide/signals/signal-state

A standalone implementation of the BookListStore service.

```typescript
import { inject, Injectable } from '@angular/core';
import { exhaustMap, pipe, tap } from 'rxjs';
import { signalState, patchState } from '@ngrx/signals';
import { rxMethod } from '@ngrx/signals/rxjs-interop';
import { tapResponse } from '@ngrx/operators';
import { BooksService } from './books-service';
import { Book } from './book';

type BookListState = { books: Book[]; isLoading: boolean };

const initialState: BookListState = {
  books: [],
  isLoading: false,
};

@Injectable()
export class BookListStore {
  readonly #booksService = inject(BooksService);
  readonly #state = signalState(initialState);

  readonly books = this.#state.books;
  readonly isLoading = this.#state.isLoading;

  readonly loadBooks = rxMethod<void>(
    pipe(
      tap(() => patchState(this.#state, { isLoading: true })),
      exhaustMap(() => {
        return this.#booksService.getAll().pipe(
          tapResponse({
            next: (books) => patchState(this.#state, { books }),
            error: console.error,
            finalize: () =>
              patchState(this.#state, { isLoading: false }),
          })
        );
      })
    )
  );
}
```

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

### Define API event groups with the eventGroup function

Source: https://ngrx.io/guide/signals/signal-store/events

Example of grouping API-related events under a common source using the eventGroup function.

```typescript
import { type } from '@ngrx/signals';
import { eventGroup } from '@ngrx/signals/events';
import { Book } from './book';

export const booksApiEvents = eventGroup({
  source: 'Books API',
  events: {
    loadedSuccess: type<Book[]>(),
    loadedFailure: type<string>(),
  },
});
```

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

### Testing CounterStore with signalMethod

Source: https://ngrx.io/guide/signals/signal-store/testing

Demonstrates testing a signalStore with signalMethod, including synchronous static updates and asynchronous signal-based updates using TestBed.runInInjectionContext and expect.poll.

```typescript
import { signal } from '@angular/core';
import { TestBed } from '@angular/core/testing';
import {
  patchState,
  signalStore,
  signalMethod,
  withMethods,
  withState,
} from '@ngrx/signals';

const CounterStore = signalStore(
  { providedIn: 'root' },
  withState({ count: 0 }),
  withMethods((store) => ({
    increment: signalMethod<number>((step) => {
      patchState(store, ({ count }) => ({ count: count + step }));
    }),
  }))
);

// Test
describe('CounterStore with signalMethod', () => {
  it('increments by a static step synchronously', () => {
    const store = TestBed.inject(CounterStore);

    store.increment(1);
    expect(store.count()).toBe(1);

    store.increment(2);
    expect(store.count()).toBe(3);
  });

  it('increments by a signal step after tick', async () => {
    const store = TestBed.inject(CounterStore);
    const step = signal(2);

    TestBed.runInInjectionContext(() => store.increment(step));
    expect(store.count()).toBe(0);

    await expect.poll(() => store.count()).toBe(2);

    step.set(3);
    await expect.poll(() => store.count()).toBe(5);

    // Alternatively, TestBed.tick() would flush the effect
    step.set(1);
    TestBed.tick();
    expect(store.count()).toBe(6);
  });
});
```

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

### Define API events with the event function

Source: https://ngrx.io/guide/signals/signal-store/events

Example of defining success and failure events for an API interaction using the event function.

```typescript
import { type } from '@ngrx/signals';
import { event } from '@ngrx/signals/events';
import { Book } from './book';

export const loadedSuccess = event(
  '[Books API] Loaded Success',
  type<Book[]>()
);
export const loadedFailure = event(
  '[Books API] Loaded Failure',
  type<string>()
);
```

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

### Testing a custom signalStoreFeature

Source: https://ngrx.io/guide/signals/signal-store/testing

Demonstrates creating a minimal store to test a custom feature by wrapping it with signalStore and using TestBed to inject and verify the store's state and methods.

```typescript
import { TestBed } from '@angular/core/testing';
import {
  patchState,
  signalStore,
  signalStoreFeature,
  withComputed,
  withMethods,
  withState,
} from '@ngrx/signals';

function withCounter() {
  return signalStoreFeature(
    withState({ count: 0 }),
    withComputed(({ count }) => ({
      doubleCount: () => count() * 2,
    })),
    withMethods((store) => ({
      increment() {
        patchState(store, ({ count }) => ({ count: count + 1 }));
      },
    }))
  );
}

// Test
describe('withCounter', () => {
  it('has initial count and doubleCount, and increment updates both', () => {
    // 👇 "testing store" wraps the feature
    const CounterStore = signalStore(
      { providedIn: 'root' },
      withCounter()
    );

    const store = TestBed.inject(CounterStore);

    expect(store.count()).toBe(0);
    expect(store.doubleCount()).toBe(0);

    store.increment();
    expect(store.count()).toBe(1);
    expect(store.doubleCount()).toBe(2);
  });
});
```

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

### Define properties and methods as input

Source: https://ngrx.io/guide/signals/signal-store/custom-store-features

Demonstrates defining expected properties and methods as input for a custom feature using the type helper.

```typescript
import { Signal } from '@angular/core';
import { signalStoreFeature, type, withMethods } from '@ngrx/signals';

export function withBaz<Foo extends string | number>() {
  return signalStoreFeature(
    {
      props: type<{ foo: Signal<Foo> }>(),
      methods: type<{ bar(foo: number): void }>(),
    },
    withMethods((store) => ({
      baz(): void {
        const foo = store.foo();
        store.bar(typeof foo === 'number' ? foo : Number(foo));
      },
    }))
  );
}
```

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

### Compilation error with multiple custom features

Source: https://ngrx.io/guide/signals/signal-store/custom-store-features

This example demonstrates a scenario where combining multiple custom features that do not define generic parameters leads to a TypeScript compilation error.

```typescript
function withZ() {
  return signalStoreFeature(
    { state: type<{ x: number }>() },
    withState({ z: 10 })
  );
}

function withW() {
  return signalStoreFeature(
    { state: type<{ y: number }>() },
    withState({ w: 100 })
  );
}

const Store = signalStore(
  withState({ x: 10, y: 100 }),
  withZ(),
  withW()
); // ❌ compilation error
```

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

### Provide BookSearchStore at the root level

Source: https://ngrx.io/guide/signals/signal-store

Setting the providedIn property to 'root' in the signalStore definition makes the store globally accessible as a singleton.

```typescript
import { signalStore, withState } from '@ngrx/signals';
import { Book } from './book';

type BookSearchState = {
  /* ... */
};

const initialState: BookSearchState = {
  /* ... */
};

export const BookSearchStore = signalStore(
  // 👇 Providing `BookSearchStore` at the root level.
  { providedIn: 'root' },
  withState(initialState)
);
```

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

### Combining global and per-resource extensions

Source: https://ngrx.io/guide/signals/resource-extensions

Shows how to append per-resource extensions after global ones have been applied.

```typescript
@Component({
  /* ... */
})
export class TodoList {
  // Global extensions run first, then `withPreviousValueOnLoading`.
  readonly todosResource = extendResource(
    httpResource<Todo[]>(() => `/api/todos`),
    withPreviousValueOnLoading()
  );
}
```

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

### Applying global extensions with extendResource

Source: https://ngrx.io/guide/signals/resource-extensions

Demonstrates how a resource automatically inherits global extensions when wrapped with extendResource.

```typescript
@Component({
  /* ... */
})
export class TodoList {
  // Global extensions are applied automatically.
  readonly todosResource = extendResource(
    httpResource<Todo[]>(() => `/api/todos`)
  );
}
```

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

### Create a SignalStore with withState

Source: https://ngrx.io/guide/signals/signal-store

Use the signalStore function combined with the withState feature to define a store with an initial state object.

```typescript
import { signalStore, withState } from '@ngrx/signals';
import { Book } from './book';

type BookSearchState = {
  books: Book[];
  isLoading: boolean;
  filter: { query: string; order: 'asc' | 'desc' };
};

const initialState: BookSearchState = {
  books: [],
  isLoading: false,
  filter: { query: '', order: 'asc' },
};

export const BookSearchStore = signalStore(withState(initialState));
```

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

### Test a globally provided SignalStore

Source: https://ngrx.io/guide/signals/signal-store/testing

Use TestBed.inject to instantiate a store configured with { providedIn: 'root' }.

```typescript
import { TestBed } from '@angular/core/testing';
import { signalStore, withState } from '@ngrx/signals';

const CounterStore = signalStore(
  { providedIn: 'root' },
  withState({ count: 0 })
);

// Test
describe('CounterStore (global)', () => {
  it('is defined with an initial count', () => {
    const store = TestBed.inject(CounterStore);

    expect(store).toBeDefined();
    expect(store.count()).toBe(0);
  });
});
```

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

### Named Entity Collections Configuration

Source: https://ngrx.io/guide/signals/signal-store/entity-management

Shows how to define a custom prefix for entity properties by providing a collection name to withEntities.

```typescript
import { signalStore, type } from '@ngrx/signals';
import { withEntities } from '@ngrx/signals/entities';

type Todo = {
  id: number;
  text: string;
  completed: boolean;
};

export const TodosStore = signalStore(
  // 💡 Entity type is specified using the `type` function.
  withEntities({ entity: type<Todo>(), collection: 'todo' })
);
```

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

### Create custom state updaters

Source: https://ngrx.io/guide/signals/signal-state

Shows how to define custom state updaters using PartialStateUpdater to encapsulate logic for reuse.

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

function setFirstName(
  firstName: string
): PartialStateUpdater<{ user: User }> {
  return (state) => ({ user: { ...state.user, firstName } });
}

const setAdmin = () => ({ isAdmin: true });
```

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

### Use the logger feature in BooksStore

Source: https://ngrx.io/guide/signals/signal-store/custom-store-features

Shows how to compose the logger feature with other features in a store.

```typescript
import { signalStore } from '@ngrx/signals';
import { withEntities } from '@ngrx/signals/entities';
import { withRequestStatus } from './with-request-status';
import { withLogger } from './with-logger';
import { Book } from './book';

export const BooksStore = signalStore(
  withEntities<Book>(),
  withRequestStatus(),
  withLogger('books')
);
```

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

### Managing Multiple Named Entity Collections

Source: https://ngrx.io/guide/signals/signal-store/entity-management

Illustrates how to manage multiple distinct entity collections within a single store by invoking withEntities multiple times.

```typescript
export const LibraryStore = signalStore(
  withEntities({ entity: type<Book>(), collection: 'book' }),
  withEntities({ entity: type<Author>(), collection: 'author' }),
  withEntities({ entity: type<Category>(), collection: 'category' }),
  withMethods((store) => ({
    addBook(book: Book): void {
      patchState(store, addEntity(book, { collection: 'book' }));
    },
    addAuthor(author: Author): void {
      patchState(store, addEntity(author, { collection: 'author' }));
    },
    addCategory(category: Category): void {
      patchState(
        store,
        addEntity(category, { collection: 'category' })
      );
    },
  }))
);
```

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

### Creating Local Scope with provideDispatcher

Source: https://ngrx.io/guide/signals/signal-store/events

Demonstrates providing a local Dispatcher at the component level and dispatching events to different scopes using the dispatch configuration.

```typescript
// ... other imports
import { provideDispatcher } from '@ngrx/signals/events';

@Component({
  // ... component config
  providers: [
    // 👇 Provide local `Dispatcher` and `Events` services
    // at the `BookSearch` injector level.
    provideDispatcher(),
    BookSearchStore,
  ],
})
export class BookSearch {
  readonly store = inject(BookSearchStore);
  readonly dispatch = injectDispatch(bookSearchEvents);

  constructor() {
    // 👇 Dispatch event to the local scope.
    this.dispatch.opened();
  }

  changeQuery(query: string): void {
    // 👇 Dispatch event to the parent scope.
    this.dispatch({ scope: 'parent' }).queryChanged(query);
  }

  triggerRefresh(): void {
    // 👇 Dispatch event to the global scope.
    this.dispatch({ scope: 'global' }).refreshTriggered();
  }
}
```

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

### SignalState in a Service

Source: https://ngrx.io/guide/signals/signal-state

Shows how to manage state in a service using signalState and rxMethod for asynchronous data loading.

```typescript
import { inject, Injectable } from '@angular/core';
import { exhaustMap, pipe, tap } from 'rxjs';
import { signalState, patchState } from '@ngrx/signals';
import { rxMethod } from '@ngrx/signals/rxjs-interop';
import { tapResponse } from '@ngrx/operators';
import { BooksService } from './books-service';
import { Book } from './book';

type BookListState = { books: Book[]; isLoading: boolean };

const initialState: BookListState = {
  books: [],
  isLoading: false,
};

@Injectable()
export class BookListStore {
  readonly #booksService = inject(BooksService);
  readonly #state = signalState(initialState);

  readonly books = this.#state.books;
  readonly isLoading = this.#state.isLoading;

  readonly loadBooks = rxMethod<void>(
    pipe(
      tap(() => patchState(this.#state, { isLoading: true })),
      exhaustMap(() => {
        return this.#booksService.getAll().pipe(
          tapResponse({
            next: (books) => patchState(this.#state, { books }),
            error: console.error,
            finalize: () =>
              patchState(this.#state, { isLoading: false }),
          })
        );
      })
    )
  );
}
```

```typescript
import { Component, inject } from '@angular/core';
import { BookListStore } from './book-list-store';

@Component({
  selector: 'ngrx-book-list',
  template: `
    <h1>Books</h1>

    @if (store.isLoading()) {
      <p>Loading...</p>
    } @else {
      <ul>
        @for (book of store.books(); track book.id) {
          <li>{{ book.title }}</li>
        }
      </ul>
    }
  `,
  providers: [BookListStore],
})
export class BookList {
  readonly store = inject(BookListStore);

  constructor() {
    this.store.loadBooks();
  }
}
```

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

### Mocking a service dependency in CounterStore

Source: https://ngrx.io/guide/signals/signal-store/testing

Demonstrates providing a mock implementation of StepService using useValue within TestBed.configureTestingModule to control the increment step in CounterStore.

```typescript
import { TestBed } from '@angular/core/testing';
import {
  patchState,
  signalStore,
  withMethods,
  withState,
} from '@ngrx/signals';
import { inject, Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
class StepService {
  getStep() {
    return 1;
  }
}

const CounterStore = signalStore(
  { providedIn: 'root' },
  withState({ count: 0 }),
  withMethods((store, stepService = inject(StepService)) => ({
    increment() {
      patchState(store, ({ count }) => ({
        count: count + stepService.getStep(),
      }));
    },
  }))
);

// Test
describe('CounterStore with StepService', () => {
  it('increments by the step returned by the injected service', () => {
    const mockStepService = { getStep: () => 3 };

    TestBed.configureTestingModule({
      providers: [
        //                      👇 provide the mock service
        { provide: StepService, useValue: mockStepService },
      ],
    });

    const store = TestBed.inject(CounterStore);

    store.increment();

    expect(store.count()).toBe(3);
  });
});
```

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

### Test CounterStore state and methods

Source: https://ngrx.io/guide/signals/signal-store/testing

Demonstrates testing a SignalStore by asserting on initial state, computed values, and state updates triggered by methods.

```typescript
import { TestBed } from '@angular/core/testing';
import {
  patchState,
  signalStore,
  withComputed,
  withMethods,
  withState,
} from '@ngrx/signals';

const CounterStore = signalStore(
  { providedIn: 'root' },
  withState({ count: 0 }),
  withComputed(({ count }) => ({
    doubleCount: () => count() * 2,
  })),
  withMethods((store) => ({
    increment() {
      patchState(store, ({ count }) => ({ count: count + 1 }));
    },
  }))
);

// Test
describe('CounterStore', () => {
  it('has an initial state and derived doubleCount', () => {
    const store = TestBed.inject(CounterStore);

    expect(store.count()).toBe(0);
    expect(store.doubleCount()).toBe(0);
  });

  it('updates doubleCount when count changes on increment', () => {
    const store = TestBed.inject(CounterStore);

    store.increment();
    expect(store.count()).toBe(1);
    expect(store.doubleCount()).toBe(2);

    store.increment();
    expect(store.count()).toBe(2);
    expect(store.doubleCount()).toBe(4);
  });
});
```

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

### Use withSelectedEntity in BooksStore

Source: https://ngrx.io/guide/signals/signal-store/custom-store-features

Demonstrates integrating the withSelectedEntity feature into a store that also uses withEntities.

```typescript
import { signalStore } from '@ngrx/signals';
import { withEntities } from '@ngrx/signals/entities';
import { withSelectedEntity } from './with-selected-entity';
import { Book } from './book';

export const BooksStore = signalStore(
  withEntities<Book>(),
  withSelectedEntity()
);
```

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

### Testing rxMethod with synchronous and asynchronous Observables

Source: https://ngrx.io/guide/signals/signal-store/testing

Demonstrates testing a store method created with rxMethod by passing synchronous and asynchronous Observables. Asynchronous tests utilize expect.poll to verify state updates.

```typescript
import { TestBed } from '@angular/core/testing';
import { of, scheduled, tap, asyncScheduler } from 'rxjs';
import {
  patchState,
  signalStore,
  withMethods,
  withState,
} from '@ngrx/signals';
import { rxMethod } from '@ngrx/signals/rxjs-interop';

const CounterStore = signalStore(
  { providedIn: 'root' },
  withState({ count: 0 }),
  withMethods((store) => ({
    increment: rxMethod<number>(
      tap((n) =>
        patchState(store, ({ count }) => ({ count: count + n }))
      )
    ),
  }))
);

// Test
describe('CounterStore with rxMethod', () => {
  it('adds emitted values to count when called with a synchronous Observable', () => {
    const store = TestBed.inject(CounterStore);

    store.increment(of(1, 2, 3));
    expect(store.count()).toBe(6);
  });

  it('adds emitted values to count when called with an asynchronous Observable', async () => {
    const store = TestBed.inject(CounterStore);

    store.increment(scheduled([1, 2, 3], asyncScheduler));
    expect(store.count()).toBe(0);

    await expect.poll(() => store.count()).toBe(6);
  });
});
```

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

### Registering global extensions with provideResourceExtensions

Source: https://ngrx.io/guide/signals/resource-extensions

Registers global extensions within the application providers using bootstrapApplication.

```typescript
import { bootstrapApplication } from '@angular/platform-browser';
import {
  provideResourceExtensions,
  withValueOnError,
} from '@ngrx/signals/resource';

bootstrapApplication(App, {
  providers: [provideResourceExtensions(withValueOnError(undefined))],
});
```

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

### Provide BookSearchStore at the component level

Source: https://ngrx.io/guide/signals/signal-store

Registering a store in the providers array of a component ties the store instance to the component's lifecycle.

```typescript
import { Component, inject } from '@angular/core';
import { BookSearchStore } from './book-search-store';

@Component({
  /* ... */
  // 👇 Providing `BookSearchStore` at the component level.
  providers: [BookSearchStore],
})
export class BookSearch {
  readonly store = inject(BookSearchStore);
}
```

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

### Returning Partial State Updaters in CounterStore

Source: https://ngrx.io/guide/signals/signal-store/events

Demonstrates returning partial state objects, partial state updaters, or arrays of updaters from case reducer handlers.

```typescript
const incrementBy = event(
  '[Counter Page] Increment By',
  type<number>()
);
const increment = event('[Counter Page] Increment');
const incrementBoth = event('[Counter Page] Increment Both');

export const CounterStore = signalStore(
  withState({ count1: 0, count2: 0 }),
  withReducer(
    // 👇 Returning a partial state object.
    on(incrementBy, (event, state) => ({
      count1: state.count1 + event.payload,
    })),
    // 👇 Returning a partial state updater.
    on(increment, () => incrementFirst()),
    // 👇 Returning an array of partial state updaters.
    on(incrementBoth, () => [incrementFirst(), incrementSecond()])
  )
);

function incrementFirst(): PartialStateUpdater<{ count1: number }> {
  return (state) => ({ count1: state.count1 + 1 });
}

function incrementSecond(): PartialStateUpdater<{ count2: number }> {
  return (state) => ({ count2: state.count2 + 1 });
}
```

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

### Create a DeepSignal with deepComputed

Source: https://ngrx.io/guide/signals/deep-computed

Demonstrates using deepComputed to create a signal that exposes nested computed signals for each property of the returned object literal.

```typescript
import { signal } from '@angular/core';
import { deepComputed } from '@ngrx/signals';

const limit = signal(25);
const offset = signal(0);
const totalItems = signal(100);

const pagination = deepComputed(() => ({
  currentPage: Math.floor(offset() / limit()) + 1,
  pageSize: limit(),
  totalPages: Math.ceil(totalItems() / limit()),
}));

console.log(pagination()); // logs: { currentPage: 1, pageSize: 25, totalPages: 4 }
console.log(pagination.currentPage()); // logs: 1
console.log(pagination.pageSize()); // logs: 25
console.log(pagination.totalPages()); // logs: 4
```

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

### Defining Store Methods with withMethods

Source: https://ngrx.io/guide/signals/signal-store

Use the withMethods feature to define methods that can access the store instance and update state using patchState.

```typescript
import { computed } from '@angular/core';
import {
  patchState,
  signalStore,
  withComputed,
  withMethods,
  withState,
} from '@ngrx/signals';
import { Book } from './book';

type BookSearchState = {
  /* ... */
};

const initialState: BookSearchState = {
  /* ... */
};

export const BookSearchStore = signalStore(
  withState(initialState),
  withComputed(/* ... */),
  // 👇 Accessing a store instance with previously defined state signals,
  // properties, and methods.
  withMethods((store) => ({
    updateQuery(query: string): void {
      // 👇 Updating state using the `patchState` function.
      patchState(store, (state) => ({
        filter: { ...state.filter, query },
      }));
    },
    updateOrder(order: 'asc' | 'desc'): void {
      patchState(store, (state) => ({
        filter: { ...state.filter, order },
      }));
    },
  }))
);
```

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

### Inject a SignalStore via constructor

Source: https://ngrx.io/guide/signals/faq

Export the store instance and its type with the same name to enable dependency injection in components.

```typescript
// counter-store.ts
export const CounterStore = signalStore(withState({ count: 0 }));

export type CounterStore = InstanceType<typeof CounterStore>;

// counter.ts
import { CounterStore } from './counter.store';

@Component({
  /* ... */
})
export class Counter {
  constructor(readonly store: CounterStore) {}
}
```

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

### Fetch data with rxMethod and tapResponse

Source: https://ngrx.io/guide/signals/rxjs-integration

Uses rxMethod to fetch a book by ID when a signal changes, utilizing tapResponse for safe API response handling.

```typescript
import { Component, inject, signal } from '@angular/core';
import { concatMap, filter, pipe } from 'rxjs';
import { rxMethod } from '@ngrx/signals/rxjs-interop';
import { tapResponse } from '@ngrx/operators';
import { BooksService } from './books-service';
import { Book } from './book';

@Component({
  /* ... */
})
export class BookList {
  readonly #booksService = inject(BooksService);

  readonly bookMap = signal<Record<string, Book>>({});
  readonly selectedBookId = signal<string | null>(null);

  readonly loadBookById = rxMethod<string | null>(
    pipe(
      filter((id) => !!id && !this.bookMap()[id]),
      concatMap((id) => {
        return this.#booksService.getById(id).pipe(
          tapResponse({
            next: (book) => this.addBook(book),
            error: console.error,
          })
        );
      })
    )
  );

  constructor() {
    // 👇 Load book by id whenever the `selectedBookId` value changes.
    this.loadBookById(this.selectedBookId);
  }

  addBook(book: Book): void {
    this.bookMap.update((bookMap) => ({
      ...bookMap,
      [book.id]: book,
    }));
  }
}
```

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

### Initialize State with a Factory

Source: https://ngrx.io/guide/signals/signal-store

The withState feature accepts a factory function executed within the injection context, enabling the use of services or injection tokens for initial state.

```typescript
const BOOK_SEARCH_STATE = new InjectionToken<BookSearchState>(
  'BookSearchState',
  { factory: () => initialState }
);

const BookSearchStore = signalStore(
  withState(() => inject(BOOK_SEARCH_STATE))
);
```

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

### Consume OptionsStore in Component

Source: https://ngrx.io/guide/signals/signal-store/linked-state

This component demonstrates injecting and interacting with the OptionsStore, showing how linked state slices react to updates.

```typescript
@Component({
  // ... other metadata
  providers: [OptionsStore],
})
export class OptionList {
  readonly store = inject(OptionsStore);

  constructor() {
    console.log(this.store.selectedOption()); // logs: 1

    this.store.setSelectedOption(2);
    console.log(this.store.selectedOption()); // logs: 2

    this.store.setOptions([4, 5, 6]);
    console.log(this.store.selectedOption()); // logs: 4
  }
}
```

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

### Instantiate SignalState

Source: https://ngrx.io/guide/signals/signal-state

Initialize a SignalState by passing an initial state object to the signalState function.

```typescript
import { signalState } from '@ngrx/signals';
import { User } from './user';

type UserState = { user: User; isAdmin: boolean };

const userState = signalState<UserState>({
  user: { firstName: 'Eric', lastName: 'Clapton' },
  isAdmin: false,
});
```

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

### Use unprotected helper for state updates

Source: https://ngrx.io/guide/signals/signal-store/testing

Shows how to use the unprotected helper to create a writable view of a SignalStore, allowing direct state patching for testing purposes.

```typescript
import { TestBed } from '@angular/core/testing';
import {
  patchState,
  signalStore,
  withComputed,
  withState,
} from '@ngrx/signals';
import { unprotected } from '@ngrx/signals/testing';

const CounterStore = signalStore(
  { providedIn: 'root' },
  withState({ count: 0 }),
  withComputed(({ count }) => ({
    doubleCount: () => count() * 2,
  }))
);

// Test
describe('CounterStore', () => {
  it('recomputes doubleCount when count is patched via unprotected', () => {
    const store = TestBed.inject(CounterStore);

    //         👇 makes the store writable
    patchState(unprotected(store), { count: 5 });

    expect(store.count()).toBe(5);
    expect(store.doubleCount()).toBe(10);
  });
});
```

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

### Manage reactive method cleanup with injectors

Source: https://ngrx.io/guide/signals/rxjs-integration

Demonstrates automatic cleanup within the component context and manual cleanup using an explicit injector reference.

```typescript
import {
  Component,
  inject,
  Injectable,
  Injector,
  OnInit,
} from '@angular/core';
import { tap } from 'rxjs';
import { rxMethod } from '@ngrx/signals/rxjs-interop';

@Injectable({ providedIn: 'root' })
export class NumbersService {
  readonly log = rxMethod<number>(tap(console.log));
}

@Component({
  /* ... */
})
export class Numbers implements OnInit {
  readonly #injector = inject(Injector);
  readonly #numbersService = inject(NumbersService);

  constructor() {
    const num1$ = interval(1_000);
    // 👇 Automatic cleanup when component is destroyed.
    this.#numbersService.log(num1$);
  }

  ngOnInit(): void {
    const num2$ = interval(2_000);
    // 👇 Requires injector for cleanup when component is destroyed.
    this.#numbersService.log(num2$, { injector: this.#injector });
  }
}
```

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

### Apply custom state updaters

Source: https://ngrx.io/guide/signals/signal-state

Compares the inline update approach with the cleaner, reusable custom updater approach.

```typescript
// Before:
patchState(userState, (state) => ({
  user: { ...state.user, firstName: 'Stevie' },
  isAdmin: true,
}));

// After:
patchState(userState, setFirstName('Stevie'), setAdmin());
```

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

### signalMethod<T>(callback)

Source: https://ngrx.io/guide/signals/signal-method

Creates a processor function that executes a callback whenever the provided input (static value, signal, or computation) changes.

```APIDOC
## signalMethod<T>(callback)

### Description
Creates a processor function that manages side effects. It accepts a callback function that receives the input value and returns a function that can be invoked with a static value, a Signal, or a computation function.

### Signature
`signalMethod<T>(callback: (input: T) => void): (input: T | Signal<T> | (() => T)) => void`

### Parameters
- **callback** (function) - Required - A function that defines the side effect to execute. It receives the resolved value of type T.

### Usage
```typescript
// Define the method
readonly logDoubledNumber = signalMethod<number>((num) => {
  console.log(num * 2);
});

// Call with static value
this.logDoubledNumber(1);

// Call with Signal
const num = signal(2);
this.logDoubledNumber(num);

// Call with computation function
this.logSum(() => ({ a: num1(), b: num2() }));
```
```

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

### prependEntity Updater

Source: https://ngrx.io/guide/signals/signal-store/entity-management

Adds an entity to the beginning of the collection. Existing IDs are not added and no error is thrown.

```typescript
patchState(store, prependEntity(todo));
```

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

### Use watchState outside of injection context

Source: https://ngrx.io/guide/signals/signal-store/state-tracking

Shows how to use watchState outside an injection context by explicitly providing an Injector.

```typescript
import { Component, inject, Injector, OnInit } from '@angular/core';
import { watchState } from '@ngrx/signals';
import { CounterStore } from './counter-store';

@Component({
  /* ... */
  providers: [CounterStore],
})
export class Counter implements OnInit {
  readonly #injector = inject(Injector);
  readonly store = inject(CounterStore);

  ngOnInit(): void {
    watchState(this.store, console.log, {
      injector: this.#injector,
    });

    setInterval(() => this.store.increment(), 2_000);
  }
}
```

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

### prependEntities Updater

Source: https://ngrx.io/guide/signals/signal-store/entity-management

Adds multiple entities to the beginning of the collection while maintaining relative order. Existing IDs are not added and no error is thrown.

```typescript
patchState(store, prependEntities([todo1, todo2]));
```

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

### Perform manual cleanup of watchState

Source: https://ngrx.io/guide/signals/signal-store/state-tracking

Demonstrates how to stop tracking state changes manually by calling the destroy method returned by watchState.

```typescript
import {
  patchState,
  signalStore,
  watchState,
  withHooks,
  witMethods,
  withState,
} from '@ngrx/signals';

export const CounterStore = signalStore(
  withState({ count: 0 }),
  withMethods((store) => ({
    increment(): void {
      patchState(store, { count: store.count() + 1 });
    },
  })),
  withHooks({
    onInit(store) {
      const { destroy } = watchState(store, console.log);

      setInterval(() => store.increment(), 1_000);

      // 👇 Stop watching after 5 seconds.
      setTimeout(() => destroy(), 5_000);
    },
  })
);
```

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

### Exposing Observables with withProps

Source: https://ngrx.io/guide/signals/signal-store/custom-store-properties

Use withProps to expose observables from a SignalStore, facilitating integration with RxJS-based APIs.

```typescript
import { toObservable } from '@angular/core/rxjs-interop';
import { signalStore, withProps, withState } from '@ngrx/signals';
import { Book } from './book';

type BooksState = {
  books: Book[];
  isLoading: boolean;
};

export const BooksStore = signalStore(
  withState<BooksState>({ books: [], isLoading: false }),
  withProps(({ isLoading }) => ({
    isLoading$: toObservable(isLoading),
  }))
);
```

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

### Update state with patchState

Source: https://ngrx.io/guide/signals/signal-state

Demonstrates using patchState with partial state objects, state updater functions, or a sequence of both to update SignalState or SignalStore instances.

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

// 👇 Providing a partial state object.
patchState(userState, { isAdmin: true });

// 👇 Providing a partial state updater.
patchState(userState, (state) => ({
  user: { ...state.user, firstName: 'Jimi' },
}));

// 👇 Providing a sequence of partial state objects and/or updaters.
patchState(userState, { isAdmin: false }, (state) => ({
  user: { ...state.user, lastName: 'Hendrix' },
}));
```
Tokens:
Raw