Content

Author: Armen Vardanyan

.angulardoc.json

@@ -0,0 +1,4 @@
+{
+  "repoId": "d8b7b3b9-cad2-4cc3-9282-b3ca4a899e28",
+  "lastSync": 0
+}

angular.json

@@ -30,13 +30,14 @@
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/purple-green.css",
               "src/styles.scss",
-              "node_modules/prismjs/themes/prism-dark.css",
+              "node_modules/prismjs/themes/prism-okaidia.css",
               "node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css"
             ],
             "scripts": [
               "node_modules/marked/lib/marked.js",
               "node_modules/prismjs/prism.js",
               "node_modules/prismjs/components/prism-typescript.min.js",
+              "node_modules/prismjs/components/prism-bash.min.js",
               "node_modules/prismjs/plugins/line-numbers/prism-line-numbers.js"
             ]
           },

package-lock.json

@@ -1,6 +1,8 @@
 <mat-sidenav-container>
   <mat-sidenav [opened]="sidebarOpen" (closedStart)="sidebarOpen = false">
-    Start
+    <p *ngFor="let chapter of chapters; let i = index" [routerLink]="['/chapter', i + 1]">
+      <a>{{ chapter }}</a>
+    </p>
   </mat-sidenav>
   <mat-sidenav-content>
     <mat-toolbar>

src/app/app.component.html

@@ -1,11 +1,31 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
+import { filter } from 'rxjs/operators';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   title = 'ngrx-tutorial';
   sidebarOpen = false;
+  chapters = [
+    'Introduction to NgRx',
+    'Getting started: Installing dependencies and creating the project',
+    'NgRx: the What',
+    'NgRx: the Why',
+    'Actions',
+    'Reducers',
+  ];
+
+  constructor(
+    private readonly router: Router
+  ) {}
+
+  ngOnInit() {
+    this.router.events.pipe(
+      filter(event => event instanceof NavigationEnd),
+    ).subscribe(() => window.scrollTo({top: 0, behavior: 'smooth'}));
+  }
 }

src/app/app.component.ts

@@ -11,11 +11,13 @@ import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ChaptersComponent } from './chapters/chapters.component';
 import { HttpClientModule } from '@angular/common/http';
+import { HomeworkComponent } from './homework/homework.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     ChaptersComponent,
+    HomeworkComponent,
    ],
   imports: [
     BrowserModule,

src/app/app.module.ts

@@ -1,4 +1,5 @@
 <div class="chapter">
-  <markdown [src]="chapterPath$ | async"></markdown>
+  <markdown [src]="chapterPath$ | async" lineNumbers></markdown>
+  <app-homework [chapterNumber]="chapterNumber$ | async"></app-homework>
   <a [routerLink]="nextChapterUrl$ | async">Next chapter</a>.
 </div>

src/app/chapters/chapters.component.html

@@ -1,4 +1,5 @@
 .chapter {
   width: 80%;
+  height: 100%;
   margin: auto;
 }

src/app/chapters/chapters.component.scss

@@ -9,9 +9,12 @@ import { map } from 'rxjs/operators';
 })
 export class ChaptersComponent implements OnInit {
 
-  chapterPath$ = this.route.paramMap.pipe(
+  chapterNumber$ = this.route.paramMap.pipe(
     map(params => params.get('chapter')),
-    map(chapter => `assets/content/chapter-${chapter}.md`),
+  );
+
+  chapterPath$ = this.chapterNumber$.pipe(
+    map(chapter => `assets/content/chapters/chapter-${chapter}.md`),
   );
 
   nextChapterUrl$ = this.route.paramMap.pipe(