mastering state management with the ngrx signal store 

Hi, I am Fabian 

@fabiangosebrink.bsky.social 

you have to deal with state 

signals 

what are signals? 

const todos = signal([]); 

todos = signal([]); todos(); todos.set(...); todos.update((items) => { /* ... */ }); 1 2 3 4 5 6 7 

todos = signal([]); todos(); todos.set(...); todos.update((items) => { /* ... */ }); 1 2 3 4 5 6 7 todos = signal([]); 1 2 todos(); 3 4 todos.set(...); 5 6 todos.update((items) => { /* ... */ }); 7 

todos = signal([]); todos(); todos.set(...); todos.update((items) => { /* ... */ }); 1 2 3 4 5 6 7 todos = signal([]); 1 2 todos(); 3 4 todos.set(...); 5 6 todos.update((items) => { /* ... */ }); 7 todos(); todos = signal([]); 1 2 3 4 todos.set(...); 5 6 todos.update((items) => { /* ... */ }); 7 

todos = signal([]); todos(); todos.set(...); todos.update((items) => { /* ... */ }); 1 2 3 4 5 6 7 todos = signal([]); 1 2 todos(); 3 4 todos.set(...); 5 6 todos.update((items) => { /* ... */ }); 7 todos(); todos = signal([]); 1 2 3 4 todos.set(...); 5 6 todos.update((items) => { /* ... */ }); 7 todos.set(...); todos = signal([]); 1 2 todos(); 3 4 5 6 todos.update((items) => { /* ... */ }); 7 

todos = signal([]); todos(); todos.set(...); todos.update((items) => { /* ... */ }); 1 2 3 4 5 6 7 todos = signal([]); 1 2 todos(); 3 4 todos.set(...); 5 6 todos.update((items) => { /* ... */ }); 7 todos(); todos = signal([]); 1 2 3 4 todos.set(...); 5 6 todos.update((items) => { /* ... */ }); 7 todos.set(...); todos = signal([]); 1 2 todos(); 3 4 5 6 todos.update((items) => { /* ... */ }); 7 todos.update((items) => { /* ... */ }); todos = signal([]); 1 2 todos(); 3 4 todos.set(...); 5 6 7 

todos = signal([]); count = computed(() => todos().length); count = linkedSignal(() => todos.length); effect(() => { console.log('Todos count changed to ', count()); }); 1 2 3 4 5 6 7 8 9 

todos = signal([]); count = computed(() => todos().length); count = linkedSignal(() => todos.length); effect(() => { console.log('Todos count changed to ', count()); }); 1 2 3 4 5 6 7 8 9 count = computed(() => todos().length); todos = signal([]); 1 2 3 4 count = linkedSignal(() => todos.length); 5 6 effect(() => { 7 console.log('Todos count changed to ', count()); 8 }); 9 

todos = signal([]); count = computed(() => todos().length); count = linkedSignal(() => todos.length); effect(() => { console.log('Todos count changed to ', count()); }); 1 2 3 4 5 6 7 8 9 count = computed(() => todos().length); todos = signal([]); 1 2 3 4 count = linkedSignal(() => todos.length); 5 6 effect(() => { 7 console.log('Todos count changed to ', count()); 8 }); 9 count = linkedSignal(() => todos.length); todos = signal([]); 1 2 count = computed(() => todos().length); 3 4 5 6 effect(() => { 7 console.log('Todos count changed to ', count()); 8 }); 9 

todos = signal([]); count = computed(() => todos().length); count = linkedSignal(() => todos.length); effect(() => { console.log('Todos count changed to ', count()); }); 1 2 3 4 5 6 7 8 9 count = computed(() => todos().length); todos = signal([]); 1 2 3 4 count = linkedSignal(() => todos.length); 5 6 effect(() => { 7 console.log('Todos count changed to ', count()); 8 }); 9 count = linkedSignal(() => todos.length); todos = signal([]); 1 2 count = computed(() => todos().length); 3 4 5 6 effect(() => { 7 console.log('Todos count changed to ', count()); 8 }); 9 effect(() => { console.log('Todos count changed to ', count()); }); todos = signal([]); 1 2 count = computed(() => todos().length); 3 4 count = linkedSignal(() => todos.length); 5 6 7 8 9 

but why? 

optimized ui updates 

zoneless 

no subscribe 

no subscribe no unsubscribe 

rxjs interop 

observables signals && 

ways to use signals 

component 

export class TodoMainComponent implements OnInit { private url = `${environment.apiUrl}todos`; private http = inject(HttpClient); private todos = signal([]); count = computed(() => this.todos().length); doneItems = computed(() => this.todos().filter((item) => item.done)?.length); openItems = computed(() => this.todos().filter((item) => !item.done)?.length); sortedTodos = computed(() => this.todos().sort((b, a) => +b.done - +a.done)); // Method logic with http... } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 

export class TodoMainComponent implements OnInit { private url = `${environment.apiUrl}todos`; private http = inject(HttpClient); private todos = signal([]); count = computed(() => this.todos().length); doneItems = computed(() => this.todos().filter((item) => item.done)?.length); openItems = computed(() => this.todos().filter((item) => !item.done)?.length); sortedTodos = computed(() => this.todos().sort((b, a) => +b.done - +a.done)); // Method logic with http... } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 private url = `${environment.apiUrl}todos`; private http = inject(HttpClient); private todos = signal([]); export class TodoMainComponent implements OnInit { 1 2 3 4 5 count = computed(() => this.todos().length); 6 7 doneItems = computed(() => this.todos().filter((item) => item.done)?.length); 8 9 openItems = computed(() => this.todos().filter((item) => !item.done)?.length); 10 11 sortedTodos = computed(() => this.todos().sort((b, a) => +b.done - +a.done)); 12 13 // Method logic with http... 14 } 15 

export class TodoMainComponent implements OnInit { private url = `${environment.apiUrl}todos`; private http = inject(HttpClient); private todos = signal([]); count = computed(() => this.todos().length); doneItems = computed(() => this.todos().filter((item) => item.done)?.length); openItems = computed(() => this.todos().filter((item) => !item.done)?.length); sortedTodos = computed(() => this.todos().sort((b, a) => +b.done - +a.done)); // Method logic with http... } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 private url = `${environment.apiUrl}todos`; private http = inject(HttpClient); private todos = signal([]); export class TodoMainComponent implements OnInit { 1 2 3 4 5 count = computed(() => this.todos().length); 6 7 doneItems = computed(() => this.todos().filter((item) => item.done)?.length); 8 9 openItems = computed(() => this.todos().filter((item) => !item.done)?.length); 10 11 sortedTodos = computed(() => this.todos().sort((b, a) => +b.done - +a.done)); 12 13 // Method logic with http... 14 } 15 count = computed(() => this.todos().length); doneItems = computed(() => this.todos().filter((item) => item.done)?.length); openItems = computed(() => this.todos().filter((item) => !item.done)?.length); sortedTodos = computed(() => this.todos().sort((b, a) => +b.done - +a.done)); export class TodoMainComponent implements OnInit { 1 private url = `${environment.apiUrl}todos`; 2 private http = inject(HttpClient); 3 private todos = signal([]); 4 5 6 7 8 9 10 11 12 13 // Method logic with http... 14 } 15 

service 

service as abstraction 

@Injectable({ providedIn: 'root' }) export class TodoService { private url = `${environment.apiUrl}todos`; private http = inject(HttpClient); private todos = signal([]); count = computed(() => this.todos().length); doneItems = computed(() => this.todos().filter((item) => item.done)?.length); openItems = computed(() => this.todos().filter((item) => !item.done)?.length); sortedTodos = computed(() => this.todos().sort((b, a) => +b.done - +a.done)); getItems() { this.http.get(this.url).subscribe((todos) => this.todos.set(todos)); } replaceItem() { this.todos.update((items) => [...items]); } addItem(value: string) { this.http.post(this.url, { value }).subscribe((addedTodo) => { this.todos.update((items) => [addedTodo, ...items]); }); } updateItem(value: Todo) { // ... } removeItem(id: string) { this.http.delete(`${this.url}/${id}`).subscribe(() => { this.todos.update((items) => [...items.filter((item) => item.id !== id)]); }); } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 

@Injectable({ providedIn: 'root' }) export class TodoService { private url = `${environment.apiUrl}todos`; private http = inject(HttpClient); private todos = signal([]); count = computed(() => this.todos().length); doneItems = computed(() => this.todos().filter((item) => item.done)?.length); openItems = computed(() => this.todos().filter((item) => !item.done)?.length); sortedTodos = computed(() => this.todos().sort((b, a) => +b.done - +a.done)); getItems() { this.http.get(this.url).subscribe((todos) => this.todos.set(todos)); } replaceItem() { this.todos.update((items) => [...items]); } addItem(value: string) { this.http.post(this.url, { value }).subscribe((addedTodo) => { this.todos.update((items) => [addedTodo, ...items]); }); } updateItem(value: Todo) { // ... } removeItem(id: string) { this.http.delete(`${this.url}/${id}`).subscribe(() => { this.todos.update((items) => [...items.filter((item) => item.id !== id)]); }); } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 private url = `${environment.apiUrl}todos`; private http = inject(HttpClient); private todos = signal([]); @Injectable({ providedIn: 'root' }) 1 export class TodoService { 2 3 4 5 6 count = computed(() => this.todos().length); 7 doneItems = computed(() => this.todos().filter((item) => item.done)?.length); 8 openItems = computed(() => this.todos().filter((item) => !item.done)?.length); 9 sortedTodos = computed(() => this.todos().sort((b, a) => +b.done - +a.done)); 10 11 getItems() { 12 this.http.get(this.url).subscribe((todos) => this.todos.set(todos)); 13 } 14 15 replaceItem() { 16 this.todos.update((items) => [...items]); 17 } 18 19 addItem(value: string) { 20 this.http.post(this.url, { value }).subscribe((addedTodo) => { 21 this.todos.update((items) => [addedTodo, ...items]); 22 }); 23 } 24 25 updateItem(value: Todo) { 26 // ... 27 } 28 29 removeItem(id: string) { 30 this.http.delete(`${this.url}/${id}`).subscribe(() => { 31 this.todos.update((items) => [...items.filter((item) => item.id !== id)]); 32 }); 33 } 34 } 35 

@Injectable({ providedIn: 'root' }) export class TodoService { private url = `${environment.apiUrl}todos`; private http = inject(HttpClient); private todos = signal([]); count = computed(() => this.todos().length); doneItems = computed(() => this.todos().filter((item) => item.done)?.length); openItems = computed(() => this.todos().filter((item) => !item.done)?.length); sortedTodos = computed(() => this.todos().sort((b, a) => +b.done - +a.done)); getItems() { this.http.get(this.url).subscribe((todos) => this.todos.set(todos)); } replaceItem() { this.todos.update((items) => [...items]); } addItem(value: string) { this.http.post(this.url, { value }).subscribe((addedTodo) => { this.todos.update((items) => [addedTodo, ...items]); }); } updateItem(value: Todo) { // ... } removeItem(id: string) { this.http.delete(`${this.url}/${id}`).subscribe(() => { this.todos.update((items) => [...items.filter((item) => item.id !== id)]); }); } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 private url = `${environment.apiUrl}todos`; private http = inject(HttpClient); private todos = signal([]); @Injectable({ providedIn: 'root' }) 1 export class TodoService { 2 3 4 5 6 count = computed(() => this.todos().length); 7 doneItems = computed(() => this.todos().filter((item) => item.done)?.length); 8 openItems = computed(() => this.todos().filter((item) => !item.done)?.length); 9 sortedTodos = computed(() => this.todos().sort((b, a) => +b.done - +a.done)); 10 11 getItems() { 12 this.http.get(this.url).subscribe((todos) => this.todos.set(todos)); 13 } 14 15 replaceItem() { 16 this.todos.update((items) => [...items]); 17 } 18 19 addItem(value: string) { 20 this.http.post(this.url, { value }).subscribe((addedTodo) => { 21 this.todos.update((items) => [addedTodo, ...items]); 22 }); 23 } 24 25 updateItem(value: Todo) { 26 // ... 27 } 28 29 removeItem(id: string) { 30 this.http.delete(`${this.url}/${id}`).subscribe(() => { 31 this.todos.update((items) => [...items.filter((item) => item.id !== id)]); 32 }); 33 } 34 } 35 count = computed(() => this.todos().length); doneItems = computed(() => this.todos().filter((item) => item.done)?.length); openItems = computed(() => this.todos().filter((item) => !item.done)?.length); sortedTodos = computed(() => this.todos().sort((b, a) => +b.done - +a.done)); @Injectable({ providedIn: 'root' }) 1 export class TodoService { 2 private url = `${environment.apiUrl}todos`; 3 private http = inject(HttpClient); 4 private todos = signal([]); 5 6 7 8 9 10 11 getItems() { 12 this.http.get(this.url).subscribe((todos) => this.todos.set(todos)); 13 } 14 15 replaceItem() { 16 this.todos.update((items) => [...items]); 17 } 18 19 addItem(value: string) { 20 this.http.post(this.url, { value }).subscribe((addedTodo) => { 21 this.todos.update((items) => [addedTodo, ...items]); 22 }); 23 } 24 25 updateItem(value: Todo) { 26 // ... 27 } 28 29 removeItem(id: string) { 30 this.http.delete(`${this.url}/${id}`).subscribe(() => { 31 this.todos.update((items) => [...items.filter((item) => item.id !== id)]); 32 }); 33 } 34 } 35 

@Injectable({ providedIn: 'root' }) export class TodoService { private url = `${environment.apiUrl}todos`; private http = inject(HttpClient); private todos = signal([]); count = computed(() => this.todos().length); doneItems = computed(() => this.todos().filter((item) => item.done)?.length); openItems = computed(() => this.todos().filter((item) => !item.done)?.length); sortedTodos = computed(() => this.todos().sort((b, a) => +b.done - +a.done)); getItems() { this.http.get(this.url).subscribe((todos) => this.todos.set(todos)); } replaceItem() { this.todos.update((items) => [...items]); } addItem(value: string) { this.http.post(this.url, { value }).subscribe((addedTodo) => { this.todos.update((items) => [addedTodo, ...items]); }); } updateItem(value: Todo) { // ... } removeItem(id: string) { this.http.delete(`${this.url}/${id}`).subscribe(() => { this.todos.update((items) => [...items.filter((item) => item.id !== id)]); }); } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 private url = `${environment.apiUrl}todos`; private http = inject(HttpClient); private todos = signal([]); @Injectable({ providedIn: 'root' }) 1 export class TodoService { 2 3 4 5 6 count = computed(() => this.todos().length); 7 doneItems = computed(() => this.todos().filter((item) => item.done)?.length); 8 openItems = computed(() => this.todos().filter((item) => !item.done)?.length); 9 sortedTodos = computed(() => this.todos().sort((b, a) => +b.done - +a.done)); 10 11 getItems() { 12 this.http.get(this.url).subscribe((todos) => this.todos.set(todos)); 13 } 14 15 replaceItem() { 16 this.todos.update((items) => [...items]); 17 } 18 19 addItem(value: string) { 20 this.http.post(this.url, { value }).subscribe((addedTodo) => { 21 this.todos.update((items) => [addedTodo, ...items]); 22 }); 23 } 24 25 updateItem(value: Todo) { 26 // ... 27 } 28 29 removeItem(id: string) { 30 this.http.delete(`${this.url}/${id}`).subscribe(() => { 31 this.todos.update((items) => [...items.filter((item) => item.id !== id)]); 32 }); 33 } 34 } 35 count = computed(() => this.todos().length); doneItems = computed(() => this.todos().filter((item) => item.done)?.length); openItems = computed(() => this.todos().filter((item) => !item.done)?.length); sortedTodos = computed(() => this.todos().sort((b, a) => +b.done - +a.done)); @Injectable({ providedIn: 'root' }) 1 export class TodoService { 2 private url = `${environment.apiUrl}todos`; 3 private http = inject(HttpClient); 4 private todos = signal([]); 5 6 7 8 9 10 11 getItems() { 12 this.http.get(this.url).subscribe((todos) => this.todos.set(todos)); 13 } 14 15 replaceItem() { 16 this.todos.update((items) => [...items]); 17 } 18 19 addItem(value: string) { 20 this.http.post(this.url, { value }).subscribe((addedTodo) => { 21 this.todos.update((items) => [addedTodo, ...items]); 22 }); 23 } 24 25 updateItem(value: Todo) { 26 // ... 27 } 28 29 removeItem(id: string) { 30 this.http.delete(`${this.url}/${id}`).subscribe(() => { 31 this.todos.update((items) => [...items.filter((item) => item.id !== id)]); 32 }); 33 } 34 } 35 getItems() { this.http.get(this.url).subscribe((todos) => this.todos.set(todos)); } replaceItem() { this.todos.update((items) => [...items]); } addItem(value: string) { this.http.post(this.url, { value }).subscribe((addedTodo) => { this.todos.update((items) => [addedTodo, ...items]); }); } updateItem(value: Todo) { // ... } removeItem(id: string) { this.http.delete(`${this.url}/${id}`).subscribe(() => { this.todos.update((items) => [...items.filter((item) => item.id !== id)]); }); } @Injectable({ providedIn: 'root' }) 1 export class TodoService { 2 private url = `${environment.apiUrl}todos`; 3 private http = inject(HttpClient); 4 private todos = signal([]); 5 6 count = computed(() => this.todos().length); 7 doneItems = computed(() => this.todos().filter((item) => item.done)?.length); 8 openItems = computed(() => this.todos().filter((item) => !item.done)?.length); 9 sortedTodos = computed(() => this.todos().sort((b, a) => +b.done - +a.done)); 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 } 35 

export class TodoMainComponent implements OnInit { private todoService = inject(TodoService); count = this.todoService.count; doneItems = this.todoService.doneItems; openItems = this.todoService.openItems; sortedTodos = this.todoService.sortedTodos; ngOnInit(): void { this.todoService.getItems(); } addTodo(value: string) { this.todoService.addItem(value); } deleteTodo(item: Todo): void { this.todoService.removeitem(item.id); } markAsDone(item: Todo): void { this.todoService.updateItem(item); } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 

No content

No content

store 

store as abstraction 

store ui logic 

store ui logic business logic, events, rxjs, websockets, ... computed, (a)sync glue signals, methods 

@Component({ /* ... */ }) export class TodoMainComponent { private readonly store = inject(Store); items$ = this.store.select(getAllItems); ngOnInit(): void { this.store.dispatch(TodoActions.loadAllTodos()); } } 1 2 3 4 5 6 7 8 9 10 

@Component({ /* ... */ }) export class TodoMainComponent { private readonly store = inject(Store); items$ = this.store.select(getAllItems); ngOnInit(): void { this.store.dispatch(TodoActions.loadAllTodos()); } } 1 2 3 4 5 6 7 8 9 10 private readonly store = inject(Store); @Component({ /* ... */ }) 1 export class TodoMainComponent { 2 3 4 items$ = this.store.select(getAllItems); 5 6 ngOnInit(): void { 7 this.store.dispatch(TodoActions.loadAllTodos()); 8 } 9 } 10 

@Component({ /* ... */ }) export class TodoMainComponent { private readonly store = inject(Store); items$ = this.store.select(getAllItems); ngOnInit(): void { this.store.dispatch(TodoActions.loadAllTodos()); } } 1 2 3 4 5 6 7 8 9 10 private readonly store = inject(Store); @Component({ /* ... */ }) 1 export class TodoMainComponent { 2 3 4 items$ = this.store.select(getAllItems); 5 6 ngOnInit(): void { 7 this.store.dispatch(TodoActions.loadAllTodos()); 8 } 9 } 10 items$ = this.store.select(getAllItems); @Component({ /* ... */ }) 1 export class TodoMainComponent { 2 private readonly store = inject(Store); 3 4 5 6 ngOnInit(): void { 7 this.store.dispatch(TodoActions.loadAllTodos()); 8 } 9 } 10 

@Component({ /* ... */ }) export class TodoMainComponent { private readonly store = inject(Store); items$ = this.store.select(getAllItems); ngOnInit(): void { this.store.dispatch(TodoActions.loadAllTodos()); } } 1 2 3 4 5 6 7 8 9 10 private readonly store = inject(Store); @Component({ /* ... */ }) 1 export class TodoMainComponent { 2 3 4 items$ = this.store.select(getAllItems); 5 6 ngOnInit(): void { 7 this.store.dispatch(TodoActions.loadAllTodos()); 8 } 9 } 10 items$ = this.store.select(getAllItems); @Component({ /* ... */ }) 1 export class TodoMainComponent { 2 private readonly store = inject(Store); 3 4 5 6 ngOnInit(): void { 7 this.store.dispatch(TodoActions.loadAllTodos()); 8 } 9 } 10 this.store.dispatch(TodoActions.loadAllTodos()); @Component({ /* ... */ }) 1 export class TodoMainComponent { 2 private readonly store = inject(Store); 3 4 items$ = this.store.select(getAllItems); 5 6 ngOnInit(): void { 7 8 } 9 } 10 

@Component({ /* ... */ }) export class TodoMainComponent { private readonly store = inject(Store); items$ = this.store.select(getAllItems); ngOnInit(): void { this.store.dispatch(TodoActions.loadAllTodos()); } } 1 2 3 4 5 6 7 8 9 10 1 2 3 

@Component({ /* ... */ }) export class TodoMainComponent { private readonly store = inject(Store); items$ = this.store.select(getAllItems); ngOnInit(): void { this.store.dispatch(TodoActions.loadAllTodos()); } } 1 2 3 4 5 6 7 8 9 10 items$ = this.store.select(getAllItems); @Component({ /* ... */ }) 1 export class TodoMainComponent { 2 private readonly store = inject(Store); 3 4 5 6 ngOnInit(): void { 7 this.store.dispatch(TodoActions.loadAllTodos()); 8 } 9 } 10 1 2 3 

items = this.store.selectSignal(getAllItems); @Component({ /* ... */ }) 1 export class TodoMainComponent { 2 private readonly store = inject(Store); 3 4 5 6 ngOnInit(): void { 7 this.store.dispatch(TodoActions.loadAllTodos()); 8 } 9 } 10 1 2 3 

items = this.store.selectSignal(getAllItems); @Component({ /* ... */ }) 1 export class TodoMainComponent { 2 private readonly store = inject(Store); 3 4 5 6 ngOnInit(): void { 7 this.store.dispatch(TodoActions.loadAllTodos()); 8 } 9 } 10 @Component({ /* ... */ }) export class TodoMainComponent { private readonly store = inject(Store); items = this.store.selectSignal(getAllItems); ngOnInit(): void { this.store.dispatch(TodoActions.loadAllTodos()); } } 1 2 3 4 5 6 7 8 9 10 1 2 3 

No content

partly signals 

partly rxjs partly signals 

No content

No content

mastering state management with the ngrx signal store 

No content

lightweight 

functional based 

highly extensible 

optional rxjs 

export const TodoStore = signalStore( ); 1 2 3 4 5 6 7 8 9 10 11 12 13 

export const TodoStore = signalStore( withState(...), ); 1 2 3 4 5 6 7 8 9 10 11 12 13 

export interface TodoState { items: Todo[]; loading: boolean; } export const initialState: TodoState = { items: [], loading: false, }; export const TodoStore = signalStore( withState(initialState), ); 1 2 3 4 5 6 7 8 9 10 11 12 13 

export interface TodoState { items: Todo[]; loading: boolean; } export const initialState: TodoState = { items: [], loading: false, }; export const TodoStore = signalStore( withState(initialState), ); 1 2 3 4 5 6 7 8 9 10 11 12 13 export interface TodoState { items: Todo[]; loading: boolean; } 1 2 3 4 5 export const initialState: TodoState = { 6 items: [], 7 loading: false, 8 }; 9 10 export const TodoStore = signalStore( 11 withState(initialState), 12 ); 13 

export interface TodoState { items: Todo[]; loading: boolean; } export const initialState: TodoState = { items: [], loading: false, }; export const TodoStore = signalStore( withState(initialState), ); 1 2 3 4 5 6 7 8 9 10 11 12 13 export interface TodoState { items: Todo[]; loading: boolean; } 1 2 3 4 5 export const initialState: TodoState = { 6 items: [], 7 loading: false, 8 }; 9 10 export const TodoStore = signalStore( 11 withState(initialState), 12 ); 13 export const initialState: TodoState = { items: [], loading: false, }; export interface TodoState { 1 items: Todo[]; 2 loading: boolean; 3 } 4 5 6 7 8 9 10 export const TodoStore = signalStore( 11 withState(initialState), 12 ); 13 

export interface TodoState { items: Todo[]; loading: boolean; } export const initialState: TodoState = { items: [], loading: false, }; export const TodoStore = signalStore( withState(initialState), ); 1 2 3 4 5 6 7 8 9 10 11 12 13 export interface TodoState { items: Todo[]; loading: boolean; } 1 2 3 4 5 export const initialState: TodoState = { 6 items: [], 7 loading: false, 8 }; 9 10 export const TodoStore = signalStore( 11 withState(initialState), 12 ); 13 export const initialState: TodoState = { items: [], loading: false, }; export interface TodoState { 1 items: Todo[]; 2 loading: boolean; 3 } 4 5 6 7 8 9 10 export const TodoStore = signalStore( 11 withState(initialState), 12 ); 13 export const TodoStore = signalStore( withState(initialState), ); export interface TodoState { 1 items: Todo[]; 2 loading: boolean; 3 } 4 5 export const initialState: TodoState = { 6 items: [], 7 loading: false, 8 }; 9 10 11 12 13 

export const TodoStore = signalStore( withState({ /* ... */ }), withMethods((...) => ({ // ... })) ); 1 2 3 4 5 6 

export const TodoStore = signalStore( withState({ /* ... */ }), withMethods((...) => ({ // ... })) ); 1 2 3 4 5 6 withMethods((...) => ({ // ... })) export const TodoStore = signalStore( 1 withState({ /* ... */ }), 2 3 4 5 ); 6 

export const TodoStore = signalStore( withState({ /* ... */ ), withMethods((store, todoService = inject(TodoService)) => ({ loadAllTodos() { // use Todoservice and then patchState(store, { items }); }, })) ); 1 2 3 4 5 6 7 8 9 

export const TodoStore = signalStore( withState({ /* ... */ ), withMethods((store, todoService = inject(TodoService)) => ({ loadAllTodos() { // use Todoservice and then patchState(store, { items }); }, })) ); 1 2 3 4 5 6 7 8 9 withMethods((store, todoService = inject(TodoService)) => ({ loadAllTodos() { // use Todoservice and then patchState(store, { items }); }, })) export const TodoStore = signalStore( 1 withState({ /* ... */ ), 2 3 4 5 6 7 8 ); 9 

export const TodoStore = signalStore( { providedIn: 'root' }, withState({ /* state goes here */ ), withMethods((store, todoService = inject(TodoService)) => ({ loadAllTodos: rxMethod( switchMap(() => { patchState(store, {loading: true}); return todoService.getItems().pipe( tapResponse({ next: (items) => patchState(store, {items}), error: console.error, finalize: () => patchState(store, {loading: false}), }) ); }) ), })) ); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 

export const TodoStore = signalStore( { providedIn: 'root' }, withState({ /* state goes here */ ), withMethods((store, todoService = inject(TodoService)) => ({ loadAllTodos: rxMethod( switchMap(() => { patchState(store, {loading: true}); return todoService.getItems().pipe( tapResponse({ next: (items) => patchState(store, {items}), error: console.error, finalize: () => patchState(store, {loading: false}), }) ); }) ), })) ); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 loadAllTodos: rxMethod( switchMap(() => { patchState(store, {loading: true}); return todoService.getItems().pipe( tapResponse({ next: (items) => patchState(store, {items}), error: console.error, finalize: () => patchState(store, {loading: false}), }) ); }) ), export const TodoStore = signalStore( 1 { providedIn: 'root' }, 2 withState({ /* state goes here */ ), 3 withMethods((store, todoService = inject(TodoService)) => ({ 4 5 6 7 8 9 10 11 12 13 14 15 16 17 })) 18 ); 19 

export const TodoStore = signalStore( { providedIn: 'root' }, withState({ /* state goes here */ ), withMethods((store, todoService = inject(TodoService)) => ({ loadAllTodos: rxMethod( switchMap(() => { patchState(store, {loading: true}); return todoService.getItems().pipe( tapResponse({ next: (items) => patchState(store, {items}), error: console.error, finalize: () => patchState(store, {loading: false}), }) ); }) ), })) ); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 loadAllTodos: rxMethod( switchMap(() => { patchState(store, {loading: true}); return todoService.getItems().pipe( tapResponse({ next: (items) => patchState(store, {items}), error: console.error, finalize: () => patchState(store, {loading: false}), }) ); }) ), export const TodoStore = signalStore( 1 { providedIn: 'root' }, 2 withState({ /* state goes here */ ), 3 withMethods((store, todoService = inject(TodoService)) => ({ 4 5 6 7 8 9 10 11 12 13 14 15 16 17 })) 18 ); 19 patchState(store, {loading: true}); export const TodoStore = signalStore( 1 { providedIn: 'root' }, 2 withState({ /* state goes here */ ), 3 withMethods((store, todoService = inject(TodoService)) => ({ 4 loadAllTodos: rxMethod( 5 switchMap(() => { 6 7 8 return todoService.getItems().pipe( 9 tapResponse({ 10 next: (items) => patchState(store, {items}), 11 error: console.error, 12 finalize: () => patchState(store, {loading: false}), 13 }) 14 ); 15 }) 16 ), 17 })) 18 ); 19 

export const TodoStore = signalStore( { providedIn: 'root' }, withState({ /* state goes here */ ), withMethods((store, todoService = inject(TodoService)) => ({ loadAllTodos: rxMethod( switchMap(() => { patchState(store, {loading: true}); return todoService.getItems().pipe( tapResponse({ next: (items) => patchState(store, {items}), error: console.error, finalize: () => patchState(store, {loading: false}), }) ); }) ), })) ); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 loadAllTodos: rxMethod( switchMap(() => { patchState(store, {loading: true}); return todoService.getItems().pipe( tapResponse({ next: (items) => patchState(store, {items}), error: console.error, finalize: () => patchState(store, {loading: false}), }) ); }) ), export const TodoStore = signalStore( 1 { providedIn: 'root' }, 2 withState({ /* state goes here */ ), 3 withMethods((store, todoService = inject(TodoService)) => ({ 4 5 6 7 8 9 10 11 12 13 14 15 16 17 })) 18 ); 19 patchState(store, {loading: true}); export const TodoStore = signalStore( 1 { providedIn: 'root' }, 2 withState({ /* state goes here */ ), 3 withMethods((store, todoService = inject(TodoService)) => ({ 4 loadAllTodos: rxMethod( 5 switchMap(() => { 6 7 8 return todoService.getItems().pipe( 9 tapResponse({ 10 next: (items) => patchState(store, {items}), 11 error: console.error, 12 finalize: () => patchState(store, {loading: false}), 13 }) 14 ); 15 }) 16 ), 17 })) 18 ); 19 return todoService.getItems().pipe( tapResponse({ next: (items) => patchState(store, {items}), error: console.error, finalize: () => patchState(store, {loading: false}), }) ); export const TodoStore = signalStore( 1 { providedIn: 'root' }, 2 withState({ /* state goes here */ ), 3 withMethods((store, todoService = inject(TodoService)) => ({ 4 loadAllTodos: rxMethod( 5 switchMap(() => { 6 patchState(store, {loading: true}); 7 8 9 10 11 12 13 14 15 }) 16 ), 17 })) 18 ); 19 

export const TodoStore = signalStore( { providedIn: 'root' }, withState({ /* state goes here */ ), withMethods((store, todoService = inject(TodoService)) => ({ loadAllTodos: rxMethod( switchMap(() => { patchState(store, {loading: true}); return todoService.getItems().pipe( tapResponse({ next: (items) => patchState(store, {items}), error: console.error, finalize: () => patchState(store, {loading: false}), }) ); }) ), })) ); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 loadAllTodos: rxMethod( switchMap(() => { patchState(store, {loading: true}); return todoService.getItems().pipe( tapResponse({ next: (items) => patchState(store, {items}), error: console.error, finalize: () => patchState(store, {loading: false}), }) ); }) ), export const TodoStore = signalStore( 1 { providedIn: 'root' }, 2 withState({ /* state goes here */ ), 3 withMethods((store, todoService = inject(TodoService)) => ({ 4 5 6 7 8 9 10 11 12 13 14 15 16 17 })) 18 ); 19 patchState(store, {loading: true}); export const TodoStore = signalStore( 1 { providedIn: 'root' }, 2 withState({ /* state goes here */ ), 3 withMethods((store, todoService = inject(TodoService)) => ({ 4 loadAllTodos: rxMethod( 5 switchMap(() => { 6 7 8 return todoService.getItems().pipe( 9 tapResponse({ 10 next: (items) => patchState(store, {items}), 11 error: console.error, 12 finalize: () => patchState(store, {loading: false}), 13 }) 14 ); 15 }) 16 ), 17 })) 18 ); 19 return todoService.getItems().pipe( tapResponse({ next: (items) => patchState(store, {items}), error: console.error, finalize: () => patchState(store, {loading: false}), }) ); export const TodoStore = signalStore( 1 { providedIn: 'root' }, 2 withState({ /* state goes here */ ), 3 withMethods((store, todoService = inject(TodoService)) => ({ 4 loadAllTodos: rxMethod( 5 switchMap(() => { 6 patchState(store, {loading: true}); 7 8 9 10 11 12 13 14 15 }) 16 ), 17 })) 18 ); 19 tapResponse({ next: (items) => patchState(store, {items}), error: console.error, finalize: () => patchState(store, {loading: false}), }) export const TodoStore = signalStore( 1 { providedIn: 'root' }, 2 withState({ /* state goes here */ ), 3 withMethods((store, todoService = inject(TodoService)) => ({ 4 loadAllTodos: rxMethod( 5 switchMap(() => { 6 patchState(store, {loading: true}); 7 8 return todoService.getItems().pipe( 9 10 11 12 13 14 ); 15 }) 16 ), 17 })) 18 ); 19 

optional rxjs 

export const TodoStore = signalStore( { providedIn: 'root' }, withState({ /* state goes here */ ), withMethods((store, todoService = inject(TodoService)) => ({ loadAllTodos(store, todoService: TodoService) { ... }, async loadAllTodosByPromise() { patchState(store, { loading: true }); const items = await todoService.getItemsAsPromise(); patchState(store, { items, loading: false }); }, })) ); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 

export const TodoStore = signalStore( { providedIn: 'root' }, withState({ /* state goes here */ ), withMethods((store, todoService = inject(TodoService)) => ({ loadAllTodos(store, todoService: TodoService) { ... }, async loadAllTodosByPromise() { patchState(store, { loading: true }); const items = await todoService.getItemsAsPromise(); patchState(store, { items, loading: false }); }, })) ); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 async loadAllTodosByPromise() { patchState(store, { loading: true }); const items = await todoService.getItemsAsPromise(); patchState(store, { items, loading: false }); }, export const TodoStore = signalStore( 1 { providedIn: 'root' }, 2 withState({ /* state goes here */ ), 3 withMethods((store, todoService = inject(TodoService)) => ({ 4 loadAllTodos(store, todoService: TodoService) { ... }, 5 6 7 8 9 10 11 12 13 })) 14 ); 15 

@Component({ // ... providers: [TodoStore], }) export class AppComponent implements OnInit { readonly store = inject(TodoStore); ngOnInit() { this.store.loadAllTodos(); } } 1 2 3 4 5 6 7 8 9 10 11 

@Component({ // ... providers: [TodoStore], }) export class AppComponent implements OnInit { readonly store = inject(TodoStore); ngOnInit() { this.store.loadAllTodos(); } } 1 2 3 4 5 6 7 8 9 10 11 providers: [TodoStore], @Component({ 1 // ... 2 3 }) 4 export class AppComponent implements OnInit { 5 readonly store = inject(TodoStore); 6 7 ngOnInit() { 8 this.store.loadAllTodos(); 9 } 10 } 11 

@Component({ // ... providers: [TodoStore], }) export class AppComponent implements OnInit { readonly store = inject(TodoStore); ngOnInit() { this.store.loadAllTodos(); } } 1 2 3 4 5 6 7 8 9 10 11 providers: [TodoStore], @Component({ 1 // ... 2 3 }) 4 export class AppComponent implements OnInit { 5 readonly store = inject(TodoStore); 6 7 ngOnInit() { 8 this.store.loadAllTodos(); 9 } 10 } 11 readonly store = inject(TodoStore); @Component({ 1 // ... 2 providers: [TodoStore], 3 }) 4 export class AppComponent implements OnInit { 5 6 7 ngOnInit() { 8 this.store.loadAllTodos(); 9 } 10 } 11 

@Component({ // ... providers: [TodoStore], }) export class AppComponent implements OnInit { readonly store = inject(TodoStore); ngOnInit() { this.store.loadAllTodos(); } } 1 2 3 4 5 6 7 8 9 10 11 providers: [TodoStore], @Component({ 1 // ... 2 3 }) 4 export class AppComponent implements OnInit { 5 readonly store = inject(TodoStore); 6 7 ngOnInit() { 8 this.store.loadAllTodos(); 9 } 10 } 11 readonly store = inject(TodoStore); @Component({ 1 // ... 2 providers: [TodoStore], 3 }) 4 export class AppComponent implements OnInit { 5 6 7 ngOnInit() { 8 this.store.loadAllTodos(); 9 } 10 } 11 this.store.loadAllTodos(); @Component({ 1 // ... 2 providers: [TodoStore], 3 }) 4 export class AppComponent implements OnInit { 5 readonly store = inject(TodoStore); 6 7 ngOnInit() { 8 9 } 10 } 11 

template: `{{ store.items() }} {{ store.loading() }}`, readonly store = inject(TodoStore); @Component({ 1 // ... 2 3 providers: [TodoStore], 4 }) 5 export class AppComponent implements OnInit { 6 7 8 ngOnInit() { 9 this.store.loadAllTodos(); 10 } 11 } 12 

export const TodoStore = signalStore( { providedIn: 'root' }, withState(initialState), withMethods(/* ... */), withHooks({ // Hooks }) ); 1 2 3 4 5 6 7 8 

export const TodoStore = signalStore( { providedIn: 'root' }, withState(initialState), withMethods(/* ... */), withHooks({ // Hooks }) ); 1 2 3 4 5 6 7 8 withHooks({ // Hooks }) ); export const TodoStore = signalStore( 1 { providedIn: 'root' }, 2 withState(initialState), 3 withMethods(/* ... */), 4 5 6 7 8 

export const TodoStore = signalStore( { providedIn: 'root' }, withState(initialState), withMethods(/* ... */), withHooks({ onInit({ loadAllTodos }) { loadAllTodos(); }, onDestroy() { console.log('on destroy'); }, }) ); 1 2 3 4 5 6 7 8 9 10 11 12 13 

export const TodoStore = signalStore( { providedIn: 'root' }, withState(initialState), withMethods(/* ... */), withHooks({ onInit({ loadAllTodos }) { loadAllTodos(); }, onDestroy() { console.log('on destroy'); }, }) ); 1 2 3 4 5 6 7 8 9 10 11 12 13 withHooks({ onInit({ loadAllTodos }) { loadAllTodos(); }, onDestroy() { console.log('on destroy'); }, }) export const TodoStore = signalStore( 1 { providedIn: 'root' }, 2 withState(initialState), 3 withMethods(/* ... */), 4 5 6 7 8 9 10 11 12 ); 13 

@Component({ // ... providers: [TodoStore], }) export class AppComponent implements OnInit { readonly store = inject(TodoStore); ngOnInit() { this.store.loadAllTodos(); } } 1 2 3 4 5 6 7 8 9 10 11 

@Component({ // ... providers: [TodoStore], }) export class AppComponent { readonly store = inject(TodoStore); } 1 2 3 4 5 6 7 

withComputed((state) => ({ /* ... */ })), export const TodoStore = signalStore( 1 withState(initialState), 2 3 4 5 6 7 withMethods(/* ... */), 8 withHooks(/* ... */) 9 ); 10 

export const TodoStore = signalStore( withState(initialState), withComputed(({ items }) => ({ doneCount: computed(() => items().filter((x) => x.done).length), undoneCount: computed(() => items().filter((x) => !x.done).length), percentageDone: computed(() => { const done = items().filter((x) => x.done).length; const total = items().length; if (total === 0) { return 0; } return (done / total) * 100; }), })), withMethods(/* ... */), withHooks(/* ... */) ); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 

export const TodoStore = signalStore( withState(initialState), withComputed(({ items }) => ({ doneCount: computed(() => items().filter((x) => x.done).length), undoneCount: computed(() => items().filter((x) => !x.done).length), percentageDone: computed(() => { const done = items().filter((x) => x.done).length; const total = items().length; if (total === 0) { return 0; } return (done / total) * 100; }), })), withMethods(/* ... */), withHooks(/* ... */) ); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 withComputed(({ items }) => ({ doneCount: computed(() => items().filter((x) => x.done).length), undoneCount: computed(() => items().filter((x) => !x.done).length), percentageDone: computed(() => { const done = items().filter((x) => x.done).length; const total = items().length; if (total === 0) { return 0; } return (done / total) * 100; }), })), export const TodoStore = signalStore( 1 withState(initialState), 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 withMethods(/* ... */), 19 withHooks(/* ... */) 20 ); 21 

export const TodoStore = signalStore( withState(initialState), withComputed(({ items }) => ({ doneCount: computed(() => items().filter((x) => x.done).length), undoneCount: computed(() => items().filter((x) => !x.done).length), percentageDone: computed(() => { const done = items().filter((x) => x.done).length; const total = items().length; if (total === 0) { return 0; } return (done / total) * 100; }), })), withMethods(/* ... */), withHooks(/* ... */) ); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 withComputed(({ items }) => ({ doneCount: computed(() => items().filter((x) => x.done).length), undoneCount: computed(() => items().filter((x) => !x.done).length), percentageDone: computed(() => { const done = items().filter((x) => x.done).length; const total = items().length; if (total === 0) { return 0; } return (done / total) * 100; }), })), export const TodoStore = signalStore( 1 withState(initialState), 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 withMethods(/* ... */), 19 withHooks(/* ... */) 20 ); 21 doneCount: computed(() => items().filter((x) => x.done).length), export const TodoStore = signalStore( 1 withState(initialState), 2 3 withComputed(({ items }) => ({ 4 5 undoneCount: computed(() => items().filter((x) => !x.done).length), 6 percentageDone: computed(() => { 7 const done = items().filter((x) => x.done).length; 8 const total = items().length; 9 10 if (total === 0) { 11 return 0; 12 } 13 14 return (done / total) * 100; 15 }), 16 })), 17 18 withMethods(/* ... */), 19 withHooks(/* ... */) 20 ); 21 

export const TodoStore = signalStore( withState(initialState), withComputed(({ items }) => ({ doneCount: computed(() => items().filter((x) => x.done).length), undoneCount: computed(() => items().filter((x) => !x.done).length), percentageDone: computed(() => { const done = items().filter((x) => x.done).length; const total = items().length; if (total === 0) { return 0; } return (done / total) * 100; }), })), withMethods(/* ... */), withHooks(/* ... */) ); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 withComputed(({ items }) => ({ doneCount: computed(() => items().filter((x) => x.done).length), undoneCount: computed(() => items().filter((x) => !x.done).length), percentageDone: computed(() => { const done = items().filter((x) => x.done).length; const total = items().length; if (total === 0) { return 0; } return (done / total) * 100; }), })), export const TodoStore = signalStore( 1 withState(initialState), 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 withMethods(/* ... */), 19 withHooks(/* ... */) 20 ); 21 doneCount: computed(() => items().filter((x) => x.done).length), export const TodoStore = signalStore( 1 withState(initialState), 2 3 withComputed(({ items }) => ({ 4 5 undoneCount: computed(() => items().filter((x) => !x.done).length), 6 percentageDone: computed(() => { 7 const done = items().filter((x) => x.done).length; 8 const total = items().length; 9 10 if (total === 0) { 11 return 0; 12 } 13 14 return (done / total) * 100; 15 }), 16 })), 17 18 withMethods(/* ... */), 19 withHooks(/* ... */) 20 ); 21 undoneCount: computed(() => items().filter((x) => !x.done).length), export const TodoStore = signalStore( 1 withState(initialState), 2 3 withComputed(({ items }) => ({ 4 doneCount: computed(() => items().filter((x) => x.done).length), 5 6 percentageDone: computed(() => { 7 const done = items().filter((x) => x.done).length; 8 const total = items().length; 9 10 if (total === 0) { 11 return 0; 12 } 13 14 return (done / total) * 100; 15 }), 16 })), 17 18 withMethods(/* ... */), 19 withHooks(/* ... */) 20 ); 21 

export const TodoStore = signalStore( withState(initialState), withComputed(({ items }) => ({ doneCount: computed(() => items().filter((x) => x.done).length), undoneCount: computed(() => items().filter((x) => !x.done).length), percentageDone: computed(() => { const done = items().filter((x) => x.done).length; const total = items().length; if (total === 0) { return 0; } return (done / total) * 100; }), })), withMethods(/* ... */), withHooks(/* ... */) ); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 withComputed(({ items }) => ({ doneCount: computed(() => items().filter((x) => x.done).length), undoneCount: computed(() => items().filter((x) => !x.done).length), percentageDone: computed(() => { const done = items().filter((x) => x.done).length; const total = items().length; if (total === 0) { return 0; } return (done / total) * 100; }), })), export const TodoStore = signalStore( 1 withState(initialState), 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 withMethods(/* ... */), 19 withHooks(/* ... */) 20 ); 21 doneCount: computed(() => items().filter((x) => x.done).length), export const TodoStore = signalStore( 1 withState(initialState), 2 3 withComputed(({ items }) => ({ 4 5 undoneCount: computed(() => items().filter((x) => !x.done).length), 6 percentageDone: computed(() => { 7 const done = items().filter((x) => x.done).length; 8 const total = items().length; 9 10 if (total === 0) { 11 return 0; 12 } 13 14 return (done / total) * 100; 15 }), 16 })), 17 18 withMethods(/* ... */), 19 withHooks(/* ... */) 20 ); 21 undoneCount: computed(() => items().filter((x) => !x.done).length), export const TodoStore = signalStore( 1 withState(initialState), 2 3 withComputed(({ items }) => ({ 4 doneCount: computed(() => items().filter((x) => x.done).length), 5 6 percentageDone: computed(() => { 7 const done = items().filter((x) => x.done).length; 8 const total = items().length; 9 10 if (total === 0) { 11 return 0; 12 } 13 14 return (done / total) * 100; 15 }), 16 })), 17 18 withMethods(/* ... */), 19 withHooks(/* ... */) 20 ); 21 percentageDone: computed(() => { const done = items().filter((x) => x.done).length; const total = items().length; if (total === 0) { return 0; } return (done / total) * 100; }), export const TodoStore = signalStore( 1 withState(initialState), 2 3 withComputed(({ items }) => ({ 4 doneCount: computed(() => items().filter((x) => x.done).length), 5 undoneCount: computed(() => items().filter((x) => !x.done).length), 6 7 8 9 10 11 12 13 14 15 16 })), 17 18 withMethods(/* ... */), 19 withHooks(/* ... */) 20 ); 21 

@Component({ providers: [TodoStore], templates: ` ` }) export class AppComponent implements OnInit { readonly store = inject(TodoStore); } 1 2 3 4 5 6 7 8 9 10 11 

@Component({ providers: [TodoStore], templates: ` ` }) export class AppComponent implements OnInit { readonly store = inject(TodoStore); } 1 2 3 4 5 6 7 8 9 10 11 ` @Component({ 1 providers: [TodoStore], 2 templates: ` 3 4 5 6 7 }) 8 export class AppComponent implements OnInit { 9 readonly store = inject(TodoStore); 10 } 11 

No content

No content

custom features 

import { computed } from '@angular/core'; import { signalStoreFeature, withComputed, withState } from '@ngrx/signals'; export type RequestStatus = 'idle' | 'pending' | 'fulfilled' | { error: string }; export type RequestStatusState = { requestStatus: RequestStatus }; export function withRequestStatus() { return signalStoreFeature( withState({ requestStatus: 'idle' }), withComputed(({ requestStatus }) => ({ isPending: computed(() => requestStatus() === 'pending'), isFulfilled: computed(() => requestStatus() === 'fulfilled'), error: computed(() => { const status = requestStatus(); return typeof status === 'object' ? status.error : null; }), })) ); } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 

import { computed } from '@angular/core'; import { signalStoreFeature, withComputed, withState } from '@ngrx/signals'; export type RequestStatus = 'idle' | 'pending' | 'fulfilled' | { error: string }; export type RequestStatusState = { requestStatus: RequestStatus }; export function withRequestStatus() { return signalStoreFeature( withState({ requestStatus: 'idle' }), withComputed(({ requestStatus }) => ({ isPending: computed(() => requestStatus() === 'pending'), isFulfilled: computed(() => requestStatus() === 'fulfilled'), error: computed(() => { const status = requestStatus(); return typeof status === 'object' ? status.error : null; }), })) ); } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 export function withRequestStatus() { import { computed } from '@angular/core'; 1 import { signalStoreFeature, withComputed, withState } from '@ngrx/signals'; 2 3 export type RequestStatus = 'idle' | 'pending' | 'fulfilled' | { error: string }; 4 export type RequestStatusState = { requestStatus: RequestStatus }; 5 6 7 return signalStoreFeature( 8 withState({ requestStatus: 'idle' }), 9 withComputed(({ requestStatus }) => ({ 10 isPending: computed(() => requestStatus() === 'pending'), 11 12 isFulfilled: computed(() => requestStatus() === 'fulfilled'), 13 14 error: computed(() => { 15 const status = requestStatus(); 16 17 return typeof status === 'object' ? status.error : null; 18 }), 19 })) 20 ); 21 } 22 

import { computed } from '@angular/core'; import { signalStoreFeature, withComputed, withState } from '@ngrx/signals'; export type RequestStatus = 'idle' | 'pending' | 'fulfilled' | { error: string }; export type RequestStatusState = { requestStatus: RequestStatus }; export function withRequestStatus() { return signalStoreFeature( withState({ requestStatus: 'idle' }), withComputed(({ requestStatus }) => ({ isPending: computed(() => requestStatus() === 'pending'), isFulfilled: computed(() => requestStatus() === 'fulfilled'), error: computed(() => { const status = requestStatus(); return typeof status === 'object' ? status.error : null; }), })) ); } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 export function withRequestStatus() { import { computed } from '@angular/core'; 1 import { signalStoreFeature, withComputed, withState } from '@ngrx/signals'; 2 3 export type RequestStatus = 'idle' | 'pending' | 'fulfilled' | { error: string }; 4 export type RequestStatusState = { requestStatus: RequestStatus }; 5 6 7 return signalStoreFeature( 8 withState({ requestStatus: 'idle' }), 9 withComputed(({ requestStatus }) => ({ 10 isPending: computed(() => requestStatus() === 'pending'), 11 12 isFulfilled: computed(() => requestStatus() === 'fulfilled'), 13 14 error: computed(() => { 15 const status = requestStatus(); 16 17 return typeof status === 'object' ? status.error : null; 18 }), 19 })) 20 ); 21 } 22 return signalStoreFeature( import { computed } from '@angular/core'; 1 import { signalStoreFeature, withComputed, withState } from '@ngrx/signals'; 2 3 export type RequestStatus = 'idle' | 'pending' | 'fulfilled' | { error: string }; 4 export type RequestStatusState = { requestStatus: RequestStatus }; 5 6 export function withRequestStatus() { 7 8 withState({ requestStatus: 'idle' }), 9 withComputed(({ requestStatus }) => ({ 10 isPending: computed(() => requestStatus() === 'pending'), 11 12 isFulfilled: computed(() => requestStatus() === 'fulfilled'), 13 14 error: computed(() => { 15 const status = requestStatus(); 16 17 return typeof status === 'object' ? status.error : null; 18 }), 19 })) 20 ); 21 } 22 

import { computed } from '@angular/core'; import { signalStoreFeature, withComputed, withState } from '@ngrx/signals'; export type RequestStatus = 'idle' | 'pending' | 'fulfilled' | { error: string }; export type RequestStatusState = { requestStatus: RequestStatus }; export function withRequestStatus() { return signalStoreFeature( withState({ requestStatus: 'idle' }), withComputed(({ requestStatus }) => ({ isPending: computed(() => requestStatus() === 'pending'), isFulfilled: computed(() => requestStatus() === 'fulfilled'), error: computed(() => { const status = requestStatus(); return typeof status === 'object' ? status.error : null; }), })) ); } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 export function withRequestStatus() { import { computed } from '@angular/core'; 1 import { signalStoreFeature, withComputed, withState } from '@ngrx/signals'; 2 3 export type RequestStatus = 'idle' | 'pending' | 'fulfilled' | { error: string }; 4 export type RequestStatusState = { requestStatus: RequestStatus }; 5 6 7 return signalStoreFeature( 8 withState({ requestStatus: 'idle' }), 9 withComputed(({ requestStatus }) => ({ 10 isPending: computed(() => requestStatus() === 'pending'), 11 12 isFulfilled: computed(() => requestStatus() === 'fulfilled'), 13 14 error: computed(() => { 15 const status = requestStatus(); 16 17 return typeof status === 'object' ? status.error : null; 18 }), 19 })) 20 ); 21 } 22 return signalStoreFeature( import { computed } from '@angular/core'; 1 import { signalStoreFeature, withComputed, withState } from '@ngrx/signals'; 2 3 export type RequestStatus = 'idle' | 'pending' | 'fulfilled' | { error: string }; 4 export type RequestStatusState = { requestStatus: RequestStatus }; 5 6 export function withRequestStatus() { 7 8 withState({ requestStatus: 'idle' }), 9 withComputed(({ requestStatus }) => ({ 10 isPending: computed(() => requestStatus() === 'pending'), 11 12 isFulfilled: computed(() => requestStatus() === 'fulfilled'), 13 14 error: computed(() => { 15 const status = requestStatus(); 16 17 return typeof status === 'object' ? status.error : null; 18 }), 19 })) 20 ); 21 } 22 withState({ requestStatus: 'idle' }), import { computed } from '@angular/core'; 1 import { signalStoreFeature, withComputed, withState } from '@ngrx/signals'; 2 3 export type RequestStatus = 'idle' | 'pending' | 'fulfilled' | { error: string }; 4 export type RequestStatusState = { requestStatus: RequestStatus }; 5 6 export function withRequestStatus() { 7 return signalStoreFeature( 8 9 withComputed(({ requestStatus }) => ({ 10 isPending: computed(() => requestStatus() === 'pending'), 11 12 isFulfilled: computed(() => requestStatus() === 'fulfilled'), 13 14 error: computed(() => { 15 const status = requestStatus(); 16 17 return typeof status === 'object' ? status.error : null; 18 }), 19 })) 20 ); 21 } 22 

import { computed } from '@angular/core'; import { signalStoreFeature, withComputed, withState } from '@ngrx/signals'; export type RequestStatus = 'idle' | 'pending' | 'fulfilled' | { error: string }; export type RequestStatusState = { requestStatus: RequestStatus }; export function withRequestStatus() { return signalStoreFeature( withState({ requestStatus: 'idle' }), withComputed(({ requestStatus }) => ({ isPending: computed(() => requestStatus() === 'pending'), isFulfilled: computed(() => requestStatus() === 'fulfilled'), error: computed(() => { const status = requestStatus(); return typeof status === 'object' ? status.error : null; }), })) ); } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 export function withRequestStatus() { import { computed } from '@angular/core'; 1 import { signalStoreFeature, withComputed, withState } from '@ngrx/signals'; 2 3 export type RequestStatus = 'idle' | 'pending' | 'fulfilled' | { error: string }; 4 export type RequestStatusState = { requestStatus: RequestStatus }; 5 6 7 return signalStoreFeature( 8 withState({ requestStatus: 'idle' }), 9 withComputed(({ requestStatus }) => ({ 10 isPending: computed(() => requestStatus() === 'pending'), 11 12 isFulfilled: computed(() => requestStatus() === 'fulfilled'), 13 14 error: computed(() => { 15 const status = requestStatus(); 16 17 return typeof status === 'object' ? status.error : null; 18 }), 19 })) 20 ); 21 } 22 return signalStoreFeature( import { computed } from '@angular/core'; 1 import { signalStoreFeature, withComputed, withState } from '@ngrx/signals'; 2 3 export type RequestStatus = 'idle' | 'pending' | 'fulfilled' | { error: string }; 4 export type RequestStatusState = { requestStatus: RequestStatus }; 5 6 export function withRequestStatus() { 7 8 withState({ requestStatus: 'idle' }), 9 withComputed(({ requestStatus }) => ({ 10 isPending: computed(() => requestStatus() === 'pending'), 11 12 isFulfilled: computed(() => requestStatus() === 'fulfilled'), 13 14 error: computed(() => { 15 const status = requestStatus(); 16 17 return typeof status === 'object' ? status.error : null; 18 }), 19 })) 20 ); 21 } 22 withState({ requestStatus: 'idle' }), import { computed } from '@angular/core'; 1 import { signalStoreFeature, withComputed, withState } from '@ngrx/signals'; 2 3 export type RequestStatus = 'idle' | 'pending' | 'fulfilled' | { error: string }; 4 export type RequestStatusState = { requestStatus: RequestStatus }; 5 6 export function withRequestStatus() { 7 return signalStoreFeature( 8 9 withComputed(({ requestStatus }) => ({ 10 isPending: computed(() => requestStatus() === 'pending'), 11 12 isFulfilled: computed(() => requestStatus() === 'fulfilled'), 13 14 error: computed(() => { 15 const status = requestStatus(); 16 17 return typeof status === 'object' ? status.error : null; 18 }), 19 })) 20 ); 21 } 22 withComputed(({ requestStatus }) => ({ import { computed } from '@angular/core'; 1 import { signalStoreFeature, withComputed, withState } from '@ngrx/signals'; 2 3 export type RequestStatus = 'idle' | 'pending' | 'fulfilled' | { error: string }; 4 export type RequestStatusState = { requestStatus: RequestStatus }; 5 6 export function withRequestStatus() { 7 return signalStoreFeature( 8 withState({ requestStatus: 'idle' }), 9 10 isPending: computed(() => requestStatus() === 'pending'), 11 12 isFulfilled: computed(() => requestStatus() === 'fulfilled'), 13 14 error: computed(() => { 15 const status = requestStatus(); 16 17 return typeof status === 'object' ? status.error : null; 18 }), 19 })) 20 ); 21 } 22 

import { computed } from '@angular/core'; import { signalStoreFeature, withComputed, withState } from '@ngrx/signals'; export type RequestStatus = 'idle' | 'pending' | 'fulfilled' | { error: string }; export type RequestStatusState = { requestStatus: RequestStatus }; export function withRequestStatus() { return signalStoreFeature( withState({ requestStatus: 'idle' }), withComputed(({ requestStatus }) => ({ isPending: computed(() => requestStatus() === 'pending'), isFulfilled: computed(() => requestStatus() === 'fulfilled'), error: computed(() => { const status = requestStatus(); return typeof status === 'object' ? status.error : null; }), })) ); } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 export function withRequestStatus() { import { computed } from '@angular/core'; 1 import { signalStoreFeature, withComputed, withState } from '@ngrx/signals'; 2 3 export type RequestStatus = 'idle' | 'pending' | 'fulfilled' | { error: string }; 4 export type RequestStatusState = { requestStatus: RequestStatus }; 5 6 7 return signalStoreFeature( 8 withState({ requestStatus: 'idle' }), 9 withComputed(({ requestStatus }) => ({ 10 isPending: computed(() => requestStatus() === 'pending'), 11 12 isFulfilled: computed(() => requestStatus() === 'fulfilled'), 13 14 error: computed(() => { 15 const status = requestStatus(); 16 17 return typeof status === 'object' ? status.error : null; 18 }), 19 })) 20 ); 21 } 22 return signalStoreFeature( import { computed } from '@angular/core'; 1 import { signalStoreFeature, withComputed, withState } from '@ngrx/signals'; 2 3 export type RequestStatus = 'idle' | 'pending' | 'fulfilled' | { error: string }; 4 export type RequestStatusState = { requestStatus: RequestStatus }; 5 6 export function withRequestStatus() { 7 8 withState({ requestStatus: 'idle' }), 9 withComputed(({ requestStatus }) => ({ 10 isPending: computed(() => requestStatus() === 'pending'), 11 12 isFulfilled: computed(() => requestStatus() === 'fulfilled'), 13 14 error: computed(() => { 15 const status = requestStatus(); 16 17 return typeof status === 'object' ? status.error : null; 18 }), 19 })) 20 ); 21 } 22 withState({ requestStatus: 'idle' }), import { computed } from '@angular/core'; 1 import { signalStoreFeature, withComputed, withState } from '@ngrx/signals'; 2 3 export type RequestStatus = 'idle' | 'pending' | 'fulfilled' | { error: string }; 4 export type RequestStatusState = { requestStatus: RequestStatus }; 5 6 export function withRequestStatus() { 7 return signalStoreFeature( 8 9 withComputed(({ requestStatus }) => ({ 10 isPending: computed(() => requestStatus() === 'pending'), 11 12 isFulfilled: computed(() => requestStatus() === 'fulfilled'), 13 14 error: computed(() => { 15 const status = requestStatus(); 16 17 return typeof status === 'object' ? status.error : null; 18 }), 19 })) 20 ); 21 } 22 withComputed(({ requestStatus }) => ({ import { computed } from '@angular/core'; 1 import { signalStoreFeature, withComputed, withState } from '@ngrx/signals'; 2 3 export type RequestStatus = 'idle' | 'pending' | 'fulfilled' | { error: string }; 4 export type RequestStatusState = { requestStatus: RequestStatus }; 5 6 export function withRequestStatus() { 7 return signalStoreFeature( 8 withState({ requestStatus: 'idle' }), 9 10 isPending: computed(() => requestStatus() === 'pending'), 11 12 isFulfilled: computed(() => requestStatus() === 'fulfilled'), 13 14 error: computed(() => { 15 const status = requestStatus(); 16 17 return typeof status === 'object' ? status.error : null; 18 }), 19 })) 20 ); 21 } 22 isPending: computed(() => requestStatus() === 'pending'), isFulfilled: computed(() => requestStatus() === 'fulfilled'), error: computed(() => { const status = requestStatus(); return typeof status === 'object' ? status.error : null; }), import { computed } from '@angular/core'; 1 import { signalStoreFeature, withComputed, withState } from '@ngrx/signals'; 2 3 export type RequestStatus = 'idle' | 'pending' | 'fulfilled' | { error: string }; 4 export type RequestStatusState = { requestStatus: RequestStatus }; 5 6 export function withRequestStatus() { 7 return signalStoreFeature( 8 withState({ requestStatus: 'idle' }), 9 withComputed(({ requestStatus }) => ({ 10 11 12 13 14 15 16 17 18 19 })) 20 ); 21 } 22 

export function setPending(): RequestStatusState { return { requestStatus: 'pending' }; } export function setFulfilled(): RequestStatusState { return { requestStatus: 'fulfilled' }; } export function setError(error: string): RequestStatusState { return { requestStatus: { error } }; } 1 2 3 4 5 6 7 8 9 10 11 

export const TodoStore = signalStore( withState(initialState), withRequestStatus(), withComputed(/* ... */), withMethods(/* ... */), withHooks(/* ... */) ); readonly store = inject(TodoStore); store.requestStatus(); store.isPending(); store.isFulfilled(); 1 2 3 4 5 6 7 8 9 10 11 12 13 

export const TodoStore = signalStore( withState(initialState), withRequestStatus(), withComputed(/* ... */), withMethods(/* ... */), withHooks(/* ... */) ); readonly store = inject(TodoStore); store.requestStatus(); store.isPending(); store.isFulfilled(); 1 2 3 4 5 6 7 8 9 10 11 12 13 withRequestStatus(), export const TodoStore = signalStore( 1 withState(initialState), 2 3 withComputed(/* ... */), 4 withMethods(/* ... */), 5 withHooks(/* ... */) 6 ); 7 8 readonly store = inject(TodoStore); 9 10 store.requestStatus(); 11 store.isPending(); 12 store.isFulfilled(); 13 

export const TodoStore = signalStore( withState(initialState), withRequestStatus(), withComputed(/* ... */), withMethods(/* ... */), withHooks(/* ... */) ); readonly store = inject(TodoStore); store.requestStatus(); store.isPending(); store.isFulfilled(); 1 2 3 4 5 6 7 8 9 10 11 12 13 withRequestStatus(), export const TodoStore = signalStore( 1 withState(initialState), 2 3 withComputed(/* ... */), 4 withMethods(/* ... */), 5 withHooks(/* ... */) 6 ); 7 8 readonly store = inject(TodoStore); 9 10 store.requestStatus(); 11 store.isPending(); 12 store.isFulfilled(); 13 readonly store = inject(TodoStore); export const TodoStore = signalStore( 1 withState(initialState), 2 withRequestStatus(), 3 withComputed(/* ... */), 4 withMethods(/* ... */), 5 withHooks(/* ... */) 6 ); 7 8 9 10 store.requestStatus(); 11 store.isPending(); 12 store.isFulfilled(); 13 

export const TodoStore = signalStore( withState(initialState), withRequestStatus(), withComputed(/* ... */), withMethods(/* ... */), withHooks(/* ... */) ); readonly store = inject(TodoStore); store.requestStatus(); store.isPending(); store.isFulfilled(); 1 2 3 4 5 6 7 8 9 10 11 12 13 withRequestStatus(), export const TodoStore = signalStore( 1 withState(initialState), 2 3 withComputed(/* ... */), 4 withMethods(/* ... */), 5 withHooks(/* ... */) 6 ); 7 8 readonly store = inject(TodoStore); 9 10 store.requestStatus(); 11 store.isPending(); 12 store.isFulfilled(); 13 readonly store = inject(TodoStore); export const TodoStore = signalStore( 1 withState(initialState), 2 withRequestStatus(), 3 withComputed(/* ... */), 4 withMethods(/* ... */), 5 withHooks(/* ... */) 6 ); 7 8 9 10 store.requestStatus(); 11 store.isPending(); 12 store.isFulfilled(); 13 store.requestStatus(); store.isPending(); store.isFulfilled(); export const TodoStore = signalStore( 1 withState(initialState), 2 withRequestStatus(), 3 withComputed(/* ... */), 4 withMethods(/* ... */), 5 withHooks(/* ... */) 6 ); 7 8 readonly store = inject(TodoStore); 9 10 11 12 13 

custom features 

extend state 

No content

No content

demo 

No content

https://github.com/ngrx/platform/issues/4580 

No content

actions 

export const ProductsActions = createActionGroup({ source: '[Products]', events: { 'Load Products': emptyProps(), 'Load Products Success': props<{ products: Product[] }>(), 'Load Products Failure': props<{ error: HttpErrorResponse }>(), 'Navigate To Detail': props<{ id: string }>(), }, }); 

import { emptyProps, eventGroup, props } from '@ngrx/signals/events'; export const usersPageEvents = eventGroup({ source: 'Users Page', events: { opened: emptyProps(), refreshed: emptyProps(), }, }); export const usersApiEvents = eventGroup({ source: 'Users API', events: { usersLoadedSuccess: props<{ users: User[] }>(), usersLoadedFailure: props<{ error: string }>(), }, }); 

reducer 

export const productsReducer = createReducer( initialProductsState, on(ProductsActions.loadProductsSuccess, (state, { products }) => ({ ...state, products, })), ); 

import { when, withReducer } from '@ngrx/signals/events'; export const UsersStore = signalStore( { providedIn: 'root' }, withEntities(), withRequestStatus(), withReducer( when(usersPageEvents.opened, usersPageEvents.refreshed, setPending), when(usersApiEvents.usersLoadedSuccess, ({ users }) => [ setAllEntities(users), setFulfilled(), ]), when(usersApiEvents.usersLoadedError, ({ error }) => setError(error)), ), ); 

effects 

export const loadProducts$ = createEffect( (actions$ = inject(Actions), productsService = inject(ProductsService)) => actions$.pipe( ofType(ProductsActions.loadProducts), exhaustMap(() => productsService.loadProducts().pipe( map((products) => ProductsActions.loadProductsSuccess({ products })), catchError((error: HttpErrorResponse) => of(ProductsActions.loadProductsFailure({ error })), ), ), ), ), { functional: true }, ); 

export const UsersStore = signalStore( /* ... */ withEffects( (_, events = inject(Events), usersService = inject(UsersService),) => ({ loadUsers$: events .on(usersPageEvents.opened, usersPageEvents.refreshed) .pipe( exhaustMap(() => usersService.getAll().pipe( mapResponse({ next: (users) => usersApiEvents.usersLoadedSuccess({ users }), error: (error: { message: string }) => usersApiEvents.usersLoadedError({ error: error.message }), }), ), ), ), logError$: events .on(usersApiEvents.usersLoadedError) .pipe(tap(({ error }) => console.log(error))), }), ), ); 

reading 

@Component({ template: ` ` }) export class ProductsComponent implements OnInit { private readonly store = inject(Store); readonly productsByCategories = this.store.selectSignal( selectProductsByCategories, ); } 

@Component({ selector: 'app-users', template: `

Users

@if (usersStore.isPending()) {

Loading...

}

@for (user of usersStore.entities(); track user.id) {
• {{ user.name }}
}

`, }) export class UsersComponent { readonly usersStore = inject(UsersStore); } 

dispatching events 

@Component({ template: `...` }) export class ProductsComponent implements OnInit { private readonly store = inject(Store); ngOnInit(): void { this.store.dispatch(ProductsActions.loadProducts()); } } 

@Component({ template: `

Users

Refresh `, }) export class UsersComponent implements OnInit { readonly usersStore = inject(UsersStore); readonly dispatcher = inject(Dispatcher); ngOnInit() { this.dispatcher.dispatch(usersPageEvents.opened()); } onRefresh(): void { this.dispatcher.dispatch(usersPageEvents.refreshed()); } } 

https://github.com/ngrx/platform/issues/4580 

classic store 

signal store classic store 

signal store signal store events plugin classic store 

signal store signal store events plugin classic store 

signal store signal store events plugin classic store biggest and clearest separation actions, reducer, effects, store, ... 

signal store signal store events plugin classic store biggest and clearest separation actions, reducer, effects, store, ... each store as a service no separate actions, reducer, etc. extensible with custom features calling methods on store 

signal store signal store events plugin classic store biggest and clearest separation actions, reducer, effects, store, ... each store as a service no separate actions, reducer, etc. extensible with custom features actions, reducer, effects separated calling methods on store dispatching actions signal store w/ classic ngrx everything signal store has 

you have to deal with state 

https://github.com/FabianGosebrink/ngrx-signal-store-todo https://github.com/FabianGosebrink/angular-todo-signals 

No content