Differenzansicht 03-event-binding
im Vergleich zu 02-property-binding

← Zurück zur Ãœbersicht | Demo | Quelltext auf GitHub
src/app/app.component.html CHANGED
@@ -1,3 +1,6 @@
1
  <main>
2
- <bm-book-list></bm-book-list>
 
 
 
3
  </main>
1
  <main>
2
+ <bm-book-list *ngIf="!book"
3
+ (selectBook)="showDetails($event)"></bm-book-list>
4
+ <bm-book-details *ngIf="book"
5
+ (leave)="showList()" [book]="book"></bm-book-details>
6
  </main>
src/app/app.component.ts CHANGED
@@ -1,4 +1,5 @@
1
  import { Component } from '@angular/core';
 
2
 
3
  @Component({
4
  selector: 'bm-root',
@@ -7,4 +8,13 @@ import { Component } from '@angular/core';
7
  styleUrl: './app.component.css'
8
  })
9
  export class AppComponent {
 
 
 
 
 
 
 
 
 
10
  }
1
  import { Component } from '@angular/core';
2
+ import { Book } from './shared/book';
3
 
4
  @Component({
5
  selector: 'bm-root',
8
  styleUrl: './app.component.css'
9
  })
10
  export class AppComponent {
11
+ book: Book | null = null;
12
+
13
+ showList() {
14
+ this.book = null;
15
+ }
16
+
17
+ showDetails(book: Book) {
18
+ this.book = book;
19
+ }
20
  }
src/app/app.module.ts CHANGED
@@ -5,12 +5,14 @@ import { AppRoutingModule } from './app-routing.module';
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
  BrowserModule,
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
  BrowserModule,
src/app/book-details/book-details.component.html ADDED
@@ -0,0 +1,28 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <div class="details" *ngIf="book">
2
+ <h1>{{ book.title }}</h1>
3
+ <p role="doc-subtitle" *ngIf="book.subtitle">{{ book.subtitle }}</p>
4
+ <div class="header">
5
+ <div>
6
+ <h2>Authors</h2>
7
+ <ul>
8
+ <li *ngFor="let author of book.authors">{{ author }}</li>
9
+ </ul>
10
+ </div>
11
+ <div>
12
+ <h2>ISBN</h2>
13
+ {{ book.isbn }}
14
+ </div>
15
+ <div *ngIf="book.published">
16
+ <h2>Published</h2>
17
+ {{ book.published }}
18
+ </div>
19
+ </div>
20
+ <h2>Description</h2>
21
+ <p>{{ book.description }}</p>
22
+ <img *ngIf="book.thumbnailUrl"
23
+ [src]="book.thumbnailUrl"
24
+ alt="Cover">
25
+ <button class="arrow-left" (click)="doLeave()">
26
+ Back to list
27
+ </button>
28
+ </div>
src/app/book-details/book-details.component.ts ADDED
@@ -0,0 +1,17 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { Component, Input, Output, EventEmitter } from '@angular/core';
2
+ import { Book } from '../shared/book';
3
+
4
+ @Component({
5
+ selector: 'bm-book-details',
6
+ templateUrl: './book-details.component.html',
7
+ standalone: false,
8
+ styleUrl: './book-details.component.css'
9
+ })
10
+ export class BookDetailsComponent {
11
+ @Input() book?: Book;
12
+ @Output() leave = new EventEmitter<void>();
13
+
14
+ doLeave() {
15
+ this.leave.emit();
16
+ }
17
+ }
src/app/book-list/book-list.component.html CHANGED
@@ -1,7 +1,7 @@
1
  <h1>Books</h1>
2
  <ul class="book-list">
3
  <li *ngFor="let book of books">
4
- <bm-book-list-item [book]="book"></bm-book-list-item>
5
  </li>
6
  <li *ngIf="!books.length">
7
  No books available.
1
  <h1>Books</h1>
2
  <ul class="book-list">
3
  <li *ngFor="let book of books">
4
+ <bm-book-list-item [book]="book" (click)="doSelect(book)"></bm-book-list-item>
5
  </li>
6
  <li *ngIf="!books.length">
7
  No books available.
src/app/book-list/book-list.component.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { Component } from '@angular/core';
2
 
3
  import { Book } from '../shared/book';
4
 
@@ -10,6 +10,7 @@ import { Book } from '../shared/book';
10
  })
11
  export class BookListComponent {
12
  books: Book[] = [];
 
13
 
14
  constructor() {
15
  this.books = [
@@ -33,4 +34,8 @@ export class BookListComponent {
33
  }
34
  ];
35
  }
 
 
 
 
36
  }
1
+ import { Component, EventEmitter, Output } from '@angular/core';
2
 
3
  import { Book } from '../shared/book';
4
 
10
  })
11
  export class BookListComponent {
12
  books: Book[] = [];
13
+ @Output() selectBook = new EventEmitter<Book>();
14
 
15
  constructor() {
16
  this.books = [
34
  }
35
  ];
36
  }
37
+
38
+ doSelect(book: Book) {
39
+ this.selectBook.emit(book);
40
+ }
41
  }