12-setup-component-store

libs/books-page/src/lib/books-list/books-list.component.ts

@@ -1,14 +1,18 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { BookModel } from '@book-co/shared-models';
+import { BooksListStore } from './books-list.store';
 
 @Component({
   selector: 'bco-books-list',
   templateUrl: './books-list.component.html',
   styleUrls: ['./books-list.component.scss'],
+  providers: [BooksListStore],
 })
 export class BooksListComponent {
   @Input() books: BookModel[] | null = [];
   @Input() readonly: boolean | null = false;
   @Output() select = new EventEmitter();
   @Output() delete = new EventEmitter();
+
+  constructor(readonly booksListStore: BooksListStore) {}
 }

libs/books-page/src/lib/books-list/books-list.store.ts

@@ -23,6 +23,11 @@ interface State {
 }
 
 @Injectable()
-export class BooksListStore {
-  constructor(readonly store: Store, breakpointObserver: BreakpointObserver) {}
+export class BooksListStore extends ComponentStore<State> {
+  constructor(readonly store: Store, breakpointObserver: BreakpointObserver) {
+    super({
+      sortOrder: 'asc',
+      sortProp: 'name',
+    });
+  }
 }