Skip to content

Commit f2f0fa2

Browse files
timdeschryvertimdeschryver
committed
docs(www): update walkthrough
1 parent 0365ea5 commit f2f0fa2

34 files changed

+229
-651
lines changed

‎projects/www/src/app/examples/__base/stackblitz-empty.yml‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
name: Base withouth main and app files
2+
description: Base template for NgRx examples
3+
files:
4+
src/_theme.scss: './src/_theme.scss'
5+
src/styles.scss: './src/styles.scss'
6+
package.json: './package.json'
7+
tsconfig.json: './tsconfig.json'
8+
vite.config.js: './vite.config.js'

‎projects/www/src/app/examples/ngrx-start/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>NgRx Example</title>
6+
<base href="/" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1" />
8+
<link rel="stylesheet" href="/src/styles.scss" />
9+
</head>
10+
<body class="mat-typography mat-app-background">
11+
<app-root>Loading...</app-root>
12+
<script type="module" src="/src/main.ts"></script>
13+
</body>
14+
</html>

‎projects/www/src/app/examples/ngrx-start/src/app.component.ts‎ renamed to ‎projects/www/src/app/examples/ngrx-start/src/app.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Component } from '@angular/core';
22

33
@Component({
4-
selector: 'ngrx-root',
4+
selector: 'app-root',
55
template: ` <h1>NgRx base</h1> `,
66
})
7-
export class AppComponent {}
7+
export class App {}

‎projects/www/src/app/examples/ngrx-start/src/main.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import '@angular/compiler';
2+
import { bootstrapApplication } from '@angular/platform-browser';
3+
import {
4+
mergeApplicationConfig,
5+
provideZonelessChangeDetection,
6+
} from '@angular/core';
7+
import { App } from './app';
8+
import { appConfig } from './app.config';
9+
10+
const config = mergeApplicationConfig(appConfig, {
11+
providers: [provideZonelessChangeDetection()],
12+
});
13+
14+
bootstrapApplication(App, config);

‎projects/www/src/app/examples/ngrx-start/stackblitz.yml‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
name: 'Starter project with NgRx dependencies'
22
description: 'A simple Angular project with NgRx dependencies'
3-
extends: '../__base/stackblitz.yml'
3+
extends: '../__base/stackblitz-empty.yml'
4+
open: src/app.ts
45
files:
5-
src/app.component.ts: './src/app.component.ts'
6+
src/main.ts: './src/main.ts'
7+
src/app.ts: './src/app.ts'
68
src/app.config.ts: './src/app.config.ts'
9+
index.html: './index.html'

‎projects/www/src/app/examples/store-walkthrough/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>NgRx Example</title>
6+
<base href="/" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1" />
8+
<link rel="stylesheet" href="/src/styles.scss" />
9+
</head>
10+
<body class="mat-typography mat-app-background">
11+
<app-root>Loading...</app-root>
12+
<script type="module" src="/src/main.ts"></script>
13+
</body>
14+
</html>

‎projects/www/src/app/examples/store-walkthrough/src/app.config.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { ApplicationConfig } from '@angular/core';
2+
import { provideStore } from '@ngrx/store';
3+
4+
import { booksReducer } from './state/books.reducer';
5+
import { collectionReducer } from './state/collection.reducer';
6+
7+
export const appConfig: ApplicationConfig = {
8+
providers: [
9+
provideStore({
10+
books: booksReducer,
11+
collection: collectionReducer,
12+
}),
13+
],
14+
};

‎projects/www/src/app/examples/store-walkthrough/src/app.ts‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { Component, inject, OnInit } from '@angular/core';
2+
import { Store } from '@ngrx/store';
3+
4+
import { selectBookCollection, selectBooks } from './state/books.selectors';
5+
import { BooksActions, BooksApiActions } from './state/books.actions';
6+
import { GoogleBooks } from './book-list/books';
7+
import { BookList } from './book-list/book-list';
8+
import { BookCollection } from './book-collection/book-collection';
9+
10+
@Component({
11+
selector: 'app-root',
12+
template: `
13+
<h1>Oliver Sacks Books Collection</h1>
14+
15+
<h2>Books</h2>
16+
<app-book-list [books]="books()!" (add)="onAdd($event)" />
17+
18+
<h2>My Collection</h2>
19+
<app-book-collection
20+
[books]="bookCollection()!"
21+
(remove)="onRemove($event)"
22+
/>
23+
`,
24+
imports: [BookList, BookCollection],
25+
})
26+
export class App implements OnInit {
27+
private readonly booksService = inject(GoogleBooks);
28+
private readonly store = inject(Store);
29+
30+
protected books = this.store.selectSignal(selectBooks);
31+
protected bookCollection = this.store.selectSignal(selectBookCollection);
32+
33+
protected onAdd(bookId: string) {
34+
this.store.dispatch(BooksActions.addBook({ bookId }));
35+
}
36+
37+
protected onRemove(bookId: string) {
38+
this.store.dispatch(BooksActions.removeBook({ bookId }));
39+
}
40+
41+
ngOnInit() {
42+
this.booksService
43+
.getBooks()
44+
.subscribe((books) =>
45+
this.store.dispatch(BooksApiActions.retrievedBookList({ books }))
46+
);
47+
}
48+
}

‎projects/www/src/app/examples/store-walkthrough/src/app/app.component.html‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎projects/www/src/app/examples/store-walkthrough/src/app/app.component.spec.ts‎

Lines changed: 0 additions & 160 deletions
This file was deleted.

0 commit comments

Comments
 (0)