30 |
45 | `,
46 | providers: [AlbumDetailsStore, AlbumSongsStore],
47 | styleUrl: './album-overview.component.scss',
48 | changeDetection: ChangeDetectionStrategy.OnPush,
49 | })
50 | export default class AlbumOverviewComponent {
51 | readonly #router = inject(Router);
52 | readonly #detailsStore = inject(AlbumDetailsStore);
53 | readonly #songsStore = inject(AlbumSongsStore);
54 |
55 | readonly showProgress = computed(
56 | () => this.#detailsStore.isPending() || this.#songsStore.isPending(),
57 | );
58 |
59 | goToNextAlbum(): void {
60 | this.#router.navigate(['albums', this.#detailsStore.albumId() + 1]);
61 | }
62 |
63 | goToPreviousAlbum(): void {
64 | this.#router.navigate(['albums', this.#detailsStore.albumId() - 1]);
65 | }
66 | }
67 |
--------------------------------------------------------------------------------
/src/app/albums/album-overview/album-songs/album-songs.component.scss:
--------------------------------------------------------------------------------
1 | mat-spinner {
2 | margin: 0 auto;
3 | }
4 |
5 | .song {
6 | display: flex;
7 | flex-direction: row;
8 | align-items: center;
9 | justify-content: space-between;
10 | padding: 1rem;
11 | font-size: 1rem;
12 | width: 100%;
13 | border-radius: 0;
14 | }
15 |
16 | p {
17 | margin: 0;
18 | }
19 |
20 | .song-title {
21 | font-weight: 500;
22 | }
23 |
--------------------------------------------------------------------------------
/src/app/albums/album-overview/album-songs/album-songs.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
2 | import { MatProgressSpinner } from '@angular/material/progress-spinner';
3 | import { MatCard } from '@angular/material/card';
4 | import { AlbumSongsStore } from './album-songs.store';
5 |
6 | @Component({
7 | selector: 'ngrx-album-songs',
8 | standalone: true,
9 | imports: [MatProgressSpinner, MatCard],
10 | template: `
11 | @if (store.isPending()) {
12 | Album Overview
31 | 32 |
33 |
36 |
37 |
44 | {{ song.title }}
17 |{{ song.duration }}
18 |
26 |
27 | Search
28 |
35 |
36 |
37 |
51 | `,
52 | styleUrl: './album-filter.component.scss',
53 | changeDetection: ChangeDetectionStrategy.OnPush,
54 | })
55 | export class AlbumFilterComponent {
56 | readonly query = model('');
57 | readonly order = model
38 |
42 |
43 | arrow_upward
44 |
45 |
46 | arrow_downward
47 |
48 |
49 |
50 |
24 | @for (album of albums(); track album.id) {
25 |
26 |
27 | ![]()
48 |
49 |
50 | }
51 |
52 | }
53 | `,
54 | styleUrl: './album-list.component.scss',
55 | changeDetection: ChangeDetectionStrategy.OnPush,
56 | })
57 | export class AlbumListComponent {
58 | readonly albums = input
28 |
41 |
42 |
29 | {{ album.title }}
30 | by {{ album.artist }}
31 |
32 |
33 |
34 |
40 | 35 | Release Date: 36 | {{ album.releaseDate | date }} 37 |
38 |Genre: {{ album.genre }}
39 |
15 |
29 | `,
30 | providers: [AlbumSearchStore],
31 | changeDetection: ChangeDetectionStrategy.OnPush,
32 | })
33 | export default class AlbumSearchComponent {
34 | readonly store = inject(AlbumSearchStore);
35 | }
36 |
--------------------------------------------------------------------------------
/src/app/albums/album-search/album-search.store.ts:
--------------------------------------------------------------------------------
1 | import { computed, inject } from '@angular/core';
2 | import { MatSnackBar } from '@angular/material/snack-bar';
3 | import { filter, pipe, tap } from 'rxjs';
4 | import {
5 | patchState,
6 | signalStore,
7 | withComputed,
8 | withHooks,
9 | withMethods,
10 | withState,
11 | } from '@ngrx/signals';
12 | import { rxMethod } from '@ngrx/signals/rxjs-interop';
13 | import { SortOrder } from '@/shared/models/sort-order.model';
14 | import { searchAlbums, sortAlbums } from '@/albums/album.model';
15 | import { AlbumsStore } from '@/albums/albums.store';
16 |
17 | export const AlbumSearchStore = signalStore(
18 | withState({
19 | query: '',
20 | order: 'asc' as SortOrder,
21 | }),
22 | withComputed(({ query, order }, albumsStore = inject(AlbumsStore)) => {
23 | const filteredAlbums = computed(() => {
24 | const searchedAlbums = searchAlbums(albumsStore.entities(), query());
25 | return sortAlbums(searchedAlbums, order());
26 | });
27 |
28 | return {
29 | filteredAlbums,
30 | showProgress: albumsStore.isPending,
31 | showSpinner: computed(
32 | () => albumsStore.isPending() && albumsStore.entities().length === 0,
33 | ),
34 | totalAlbums: computed(() => filteredAlbums().length),
35 | };
36 | }),
37 | withMethods((store, snackBar = inject(MatSnackBar)) => ({
38 | updateQuery(query: string): void {
39 | patchState(store, { query });
40 | },
41 | updateOrder(order: SortOrder): void {
42 | patchState(store, { order });
43 | },
44 | _notifyOnError: rxMethodAlbums ({{ store.totalAlbums() }})
16 | 17 |© 2024 NgRx Team
', 7 | styles: ` 8 | :host { 9 | display: block; 10 | margin: 0 2rem; 11 | } 12 | 13 | p { 14 | text-align: center; 15 | padding: 1rem; 16 | margin: 0; 17 | font-size: 1rem; 18 | color: rgba(0, 0, 0, 0.6); 19 | border-top: 1px solid rgba(0, 0, 0, 0.2); 20 | } 21 | `, 22 | changeDetection: ChangeDetectionStrategy.OnPush, 23 | }) 24 | export class FooterComponent {} 25 | -------------------------------------------------------------------------------- /src/app/core/layout/header.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | import { RouterLink } from '@angular/router'; 3 | import { MatToolbar } from '@angular/material/toolbar'; 4 | 5 | @Component({ 6 | selector: 'ngrx-header', 7 | standalone: true, 8 | imports: [MatToolbar, RouterLink], 9 | template: ` 10 |