adjust tasks

Author: Martina Kraus

README.md

@@ -2,7 +2,7 @@
 
 ## Material
 
-- [Workshop-Slides](https://bit.ly/2sCqPCB)
+- [Workshop-Slides](https://docs.google.com/presentation/d/1iHYJTqgePE94spv_HbLgTL40btSuK6QGLkLZRt0hkAM/edit?usp=sharing)
 
 - [Angular Checklist](https://angular-checklist.io/default/checklist/architecture)
 

Task_1/Installation.md renamed to Task_0/Installation.md

@@ -0,0 +1,27 @@
+# Meet the AppComponent
+
+Let's warm up a bit and get familiar with our project environment.
+
+- Open a terminal
+- Switch into the directory, where your Angular project is located
+- Run the Angular project by executing the command `npm start -- --open`
+- Open your Angular project in your preferred editor (VS Code, WebStorm, Sublime, ...)
+- Open the file _src/app/app.component.ts_.
+- Change the value of the property `title`.
+- Recognize that each change in a file causes an automatic reload in the browser
+
+## Hints
+
+### npm start
+
+If you are not familiar with `npm` here is what `npm start -- --open` does.
+You will find a file called `package.json` in your Angular project.
+If you have a look into the file you will find a section called `scripts`.
+There you can see that the script `start` executes the Angular CLI command `ng serve`.
+That means `npm start` executes `ng serve`.
+
+If you want to pass additional arguments to `ng serve` you can to that with npm to.
+By writing `--` you pass the following arguments to `ng serve`.
+That means `ng serve --open` is equivilant to `npm start -- --open`.
+
+The argument `--open` opens the default browser after the compilation of your Angular project has been completed.

Task_1/New_Project.md renamed to Task_0/New_Project.md

@@ -0,0 +1,52 @@
+# Generate two Submodules
+
+- Generate 2 sub Modules with a routing (we will learn later more about it)
+    - about
+    - books
+
+- Move all book related code to the `books/`-folder.
+    - _book.ts_
+    - _book-card/_
+    - _book-filter/_
+- Create a component that will take all the code of _AppComponent_: `ng generate component books/book`.    
+- Open _app.module.ts_.
+- Remove all book related code.
+    - Remove _BookCardComponent_ & _BookFilterPipe_ from declarations.
+- Add _BookModule_ and _AboutModule_ to the `imports`-Collection.
+- Transfer the content of _AppComponent_ to _BookComponent_ (only **inside** the class).
+- Transfer the content of _app.component.html_ to _book.component.html_.
+- Transfer the content of _app.component.scss_ to _book.component.scss_.
+- Check if all `import`-statements are correct.
+
+- Generate a simple dummy Component `AboutComponent` inside `AboutModule`
+
+Protip: Use the CLI Generator for this (--routing and -m)
+
+## Hints
+
+#### generate a whole module as submodule
+```
+ng g module books --routing -m app.module
+ng g module about --routing -m app.module
+```
+
+####  generate a root-component in a subfolder for a module
+```
+ng g c about/about
+```
+#### app.component.html
+```
+<app-book-card></app-book-card>
+```
+#### books.module.ts
+```
+@NgModule({
+  declarations: [BookComponent, BookCardComponent, BookFilterPipe],
+  imports: [CommonModule],
+  exports: [BookComponent]
+})
+export class BooksModule { }
+```
+
+
+[Solution](https://stackblitz.com/github/workshops-de/angular-workshop/tree/solve--filter-books)

Task_1/Meet_the_AppComponent.md

@@ -0,0 +1,117 @@
+# Generate a Material Sidebar Component
+
+- Add angular Material to you Project (use all default values for the asked questions)
+- Include a [basic sidenav Material component](https://material.angular.io/components/sidenav/examples#sidenav-overview) inside the `app.component.html`
+- You will add a `MatSideNavContainer`, `MatSideNav` and `MatSideNavContent` since they are UI Components from Angular Material you need to import the Module inside your `AppModule` : 
+ `import {MatSidenavModule} from '@angular/material/sidenav';`
+  
+Info: the container contains the side-nav and the content. Inside the side-nav you need to add parameters for the Material UI Component to behave correctly:
+```html
+<mat-sidenav 
+mode="side"
+opened>
+    ...
+</mat-sidenav>
+```
+
+- To create a navigation inside the side-navigation component we need to add some more UI Components:
+```html
+// MaterialToolBar is a simple HeaderComponent
+// https://material.angular.io/components/toolbar/overview#toolbar-overview
+<mat-toolbar>Menu</mat-toolbar>
+
+// MaterialNavigationListComponent 
+// https://material.angular.io/components/list/overview#navigation
+<mat-nav-list>
+   <a mat-list-item routerLink='/books'>Books</a>
+   <a mat-list-item routerLink='/about'>About</a>
+</mat-nav-list></mat-sidenav>
+```
+Hint: Please ignore the `routerLink`-Attribute for now. We will come to it later.
+
+
+- Don't forget to import the new AngularMaterialModules as well:
+`MatListModule` and `MatToolbarModule`
+
+
+
+
+
+## Hints
+
+```sh
+ng add @angular/material
+
+Use all default values
+```
+
+To display the sidenav Component you will need to set a width of the `mat-side` Component
+
+
+
+
+
+
+
+## Solution
+
+```html
+<mat-sidenav-container class='sidenav-container'>
+  <mat-sidenav
+    class='sidenav'
+    mode="side"
+    opened>
+    <mat-toolbar>Menu</mat-toolbar>
+    <mat-nav-list>
+      <a mat-list-item routerLink='/books'>Books</a>
+      <a mat-list-item routerLink='/about'>About</a>
+    </mat-nav-list></mat-sidenav>
+  <mat-sidenav-content>
+      <app-card-book></app-card-book>
+  </mat-sidenav-content>
+</mat-sidenav-container>
+
+```
+
+```ts
+// app.module.ts
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
+import { MatToolbarModule } from '@angular/material/toolbar';
+
+imports: [
+    ...
+        
+    MatToolbarModule,
+    MatButtonModule,
+    MatSidenavModule,
+    MatIconModule,
+    MatListModule
+]
+```
+
+```css
+// app.component.scss
+
+.sidenav-container {
+  height: 100%;
+}
+
+.sidenav {
+  width: 200px;
+}
+
+.sidenav .mat-toolbar {
+  background: inherit;
+}
+
+.mat-toolbar.mat-primary {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+
+```

Task_10/Generate_two_Submodules.md

@@ -0,0 +1,26 @@
+# Create a BookApiService
+- Create a service handling Book-API operations
+- Execute the following Angular CLI command: `ng generate service book/book-api`.
+- Implement the method `getAll()` that yields an array of Books.
+- Inject `BookApiService` into the _BookComponent_.
+- Get rid of the example books of _BookComponent_ by using the `BookApiService`
+
+## Hints
+
+#### Generate with ng-cli:
+
+**Generate with Angular CLI**
+
+```bash
+ng generate service book/book-api
+```
+
+**Code:**
+
+```typescript
+// book-list.component.ts
+constructor(private bookApi: BookApiService){}
+```
+
+
+[Solution](https://stackblitz.com/github/workshops-de/angular-workshop/tree/solve--create-a-BookApi-service)

Task_10/Observables.md

@@ -0,0 +1,24 @@
+# Create an observable
+- Change the API of `getAll` returning `Observable<Book[]>` instead of `Book[]`.
+- Make use of the creation operator `of`.
+- Consume the Observable in the component.
+- Make sure that the books are still rendered.
+
+## Hints
+
+**imports**
+```typescript
+import { Observable, of } from 'rxjs';
+```
+
+**getBooks()**
+```typescript
+return of(this.books);
+```
+
+**Component**
+```typescript
+.subscribe(booksFromApi => /* assign to books */)
+```
+
+[Solution](https://stackblitz.com/github/workshops-de/angular-workshop/tree/solve--create-an-observable)

Task_11/Local_API.md

@@ -0,0 +1,36 @@
+# Load data from local API
+- Start our HTTP-Server `bookmonkey-api` in your shell.
+- Import the `HttpClientModule` in your `AppModule`.
+- Inject `HttpClient` via `constructor(private http: HttpClient)` in `BookApiService`
+- Load data from local API in `BookApiService` service via `http.get(URL)`
+
+## Hints
+
+## API starten
+
+```bash
+# console session
+npm i -g bookmonkey-api
+bookmonkey-api
+# OR
+npx bookmonkey-api
+```
+
+```typescript
+import { HttpClientModule } from '@angular/common/http';
+```
+
+```typescript
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+```
+
+```typescript
+return this.http.get<Book[]>('http://localhost:4730/books')
+```
+
+```typescript
+this.bookDataService.getBooks().subscribe(successFn);
+```
+
+[Solution](https://stackblitz.com/github/workshops-de/angular-workshop/tree/solve--load-data-from-local-api)

Task_11/NavigationComponent.md

@@ -0,0 +1,20 @@
+# Use the async pipe
+- Store the `getAll()`-Observable in a class property
+- Use the Observable and async pipe to subscribe and unsubscribe inside your `*ngFor`
+- **Warning**: This change affects the typing in the template
+    - async returns either `Book[]` or `null`
+    - You may need to adjust BookFilterPipe to deail with `null`-Values.
+
+## Hints
+
+```typescript
+// book-list.component.ts
+this.books$ = this.bookData.getAll();
+```
+
+```html
+<!-- book-list.component.html -->
+*ngFor="let book of books$ | async | ..."
+```
+
+[Solution](https://stackblitz.com/github/workshops-de/angular-workshop/tree/solve--use-the-async-pipe)