BookMonkey 3 Diff

Files changed (7) hide show
  1. tmp/src/app/book-monkey/iteration-1/{property-bindings → event-bindings}/app.component.html +9 -1
  2. tmp/src/app/book-monkey/iteration-1/{property-bindings → event-bindings}/app.component.ts +17 -1
  3. tmp/src/app/book-monkey/iteration-1/{property-bindings → event-bindings}/app.module.ts +3 -1
  4. tmp/src/app/book-monkey/iteration-1/{property-bindings → event-bindings}/book-details/book-details.component.html +36 -0
  5. tmp/src/app/book-monkey/iteration-1/{property-bindings → event-bindings}/book-details/book-details.component.ts +24 -0
  6. tmp/src/app/book-monkey/iteration-1/{property-bindings → event-bindings}/book-list/book-list.component.html +2 -1
  7. tmp/src/app/book-monkey/iteration-1/{property-bindings → event-bindings}/book-list/book-list.component.ts +6 -1
tmp/src/app/book-monkey/iteration-1/{property-bindings → event-bindings}/app.component.html RENAMED
@@ -1,2 +1,10 @@
1
- <bm-book-list></bm-book-list>
2
<router-outlet></router-outlet>
1
+ <bm-book-list
2
+ *ngIf="viewState === 'list'"
3
+ (showDetailsEvent)="showDetails($event)"></bm-book-list>
4
+
5
+ <bm-book-details
6
+ *ngIf="viewState === 'details'"
7
+ (showListEvent)="showList()"
8
+ [book]="book"></bm-book-details>
9
+
10
<router-outlet></router-outlet>
tmp/src/app/book-monkey/iteration-1/{property-bindings → event-bindings}/app.component.ts RENAMED
@@ -1,8 +1,24 @@
1
import { Component } from '@angular/core';
2
3
@Component({
4
selector: 'bm-root',
5
templateUrl: './app.component.html',
6
styleUrls: ['./app.component.css']
7
})
8
- export class AppComponent { }
1
import { Component } from '@angular/core';
2
3
+ import { Book } from './shared/book';
4
+
5
+ type ViewState = 'list' | 'details';
6
+
7
@Component({
8
selector: 'bm-root',
9
templateUrl: './app.component.html',
10
styleUrls: ['./app.component.css']
11
})
12
+ export class AppComponent {
13
+ book: Book;
14
+ viewState: ViewState = 'list';
15
+
16
+ showList() {
17
+ this.viewState = 'list';
18
+ }
19
+
20
+ showDetails(book: Book) {
21
+ this.book = book;
22
+ this.viewState = 'details';
23
+ }
24
+ }
tmp/src/app/book-monkey/iteration-1/{property-bindings → event-bindings}/app.module.ts RENAMED
@@ -5,12 +5,14 @@
5
import { AppComponent } from './app.component';
6
import { BookListComponent } from './book-list/book-list.component';
7
import { BookListItemComponent } from './book-list-item/book-list-item.component';
8
9
@NgModule({
10
declarations: [
11
AppComponent,
12
BookListComponent,
13
- BookListItemComponent
14
],
15
imports: [
16
CommonModule,
5
import { AppComponent } from './app.component';
6
import { BookListComponent } from './book-list/book-list.component';
7
import { BookListItemComponent } from './book-list-item/book-list-item.component';
8
+ import { BookDetailsComponent } from './book-details/book-details.component';
9
10
@NgModule({
11
declarations: [
12
AppComponent,
13
BookListComponent,
14
+ BookListItemComponent,
15
+ BookDetailsComponent
16
],
17
imports: [
18
CommonModule,
tmp/src/app/book-monkey/iteration-1/{property-bindings → event-bindings}/book-details/book-details.component.html RENAMED
@@ -0,0 +1,36 @@
1
+ <div *ngIf="book">
2
+ <h1>{{ book.title }}</h1>
3
+ <h3 *ngIf="book.subtitle">{{ book.subtitle }}</h3>
4
+ <div class="ui divider"></div>
5
+ <div class="ui grid">
6
+ <div class="four wide column">
7
+ <h4>Autoren</h4>
8
+ <ng-container *ngFor="let author of book.authors">
9
+ {{ author }}<br>
10
+ </ng-container>
11
+ </div>
12
+ <div class="four wide column">
13
+ <h4>ISBN</h4>
14
+ {{ book.isbn }}
15
+ </div>
16
+ <div class="four wide column">
17
+ <h4>Erschienen</h4>
18
+ {{ book.published }}
19
+ </div>
20
+ <div class="four wide column">
21
+ <h4>Rating</h4>
22
+ <i class="yellow star icon"
23
+ *ngFor="let r of getRating(book.rating)"></i>
24
+ </div>
25
+ </div>
26
+ <h4>Beschreibung</h4>
27
+ <p>{{ book.description }}</p>
28
+ <div class="ui small images">
29
+ <img *ngFor="let thumbnail of book.thumbnails"
30
+ [src]="thumbnail.url">
31
+ </div>
32
+ <button class="ui red button"
33
+ (click)="showBookList()">
34
+ Zurück zur Buchliste
35
+ </button>
36
+ </div>
tmp/src/app/book-monkey/iteration-1/{property-bindings → event-bindings}/book-details/book-details.component.ts RENAMED
@@ -0,0 +1,24 @@
1
+ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
2
+
3
+ import { Book } from '../shared/book';
4
+
5
+ @Component({
6
+ selector: 'bm-book-details',
7
+ templateUrl: './book-details.component.html',
8
+ styleUrls: ['./book-details.component.css']
9
+ })
10
+ export class BookDetailsComponent implements OnInit {
11
+ @Input() book: Book;
12
+ @Output() showListEvent = new EventEmitter<any>();
13
+
14
+ ngOnInit() {
15
+ }
16
+
17
+ getRating(num: number) {
18
+ return new Array(num);
19
+ }
20
+
21
+ showBookList() {
22
+ this.showListEvent.emit();
23
+ }
24
+ }
tmp/src/app/book-monkey/iteration-1/{property-bindings → event-bindings}/book-list/book-list.component.html RENAMED
@@ -1,5 +1,6 @@
1
<div class="ui middle aligned selection divided list">
2
<bm-book-list-item class="item"
3
*ngFor="let b of books"
4
- [book]="b"></bm-book-list-item>
5
</div>
1
<div class="ui middle aligned selection divided list">
2
<bm-book-list-item class="item"
3
*ngFor="let b of books"
4
+ [book]="b"
5
+ (click)="showDetails(b)"></bm-book-list-item>
6
</div>
tmp/src/app/book-monkey/iteration-1/{property-bindings → event-bindings}/book-list/book-list.component.ts RENAMED
@@ -1,4 +1,4 @@
1
- import { Component, OnInit } from '@angular/core';
2
3
import { Book } from '../shared/book';
4
@@ -9,6 +9,7 @@
9
})
10
export class BookListComponent implements OnInit {
11
books: Book[];
12
13
ngOnInit() {
14
this.books = [
@@ -40,4 +41,8 @@
40
}
41
];
42
}
43
}
1
+ import { Component, OnInit, Output, EventEmitter } from '@angular/core';
2
3
import { Book } from '../shared/book';
4
9
})
10
export class BookListComponent implements OnInit {
11
books: Book[];
12
+ @Output() showDetailsEvent = new EventEmitter<Book>();
13
14
ngOnInit() {
15
this.books = [
41
}
42
];
43
}
44
+
45
+ showDetails(book: Book) {
46
+ this.showDetailsEvent.emit(book);
47
+ }
48
}