BM5 Diff | 03-event-binding (von 02-property-binding)

src/app/app.component.html CHANGED Viewed

@@ -1,3 +1,6 @@
 <main>
-  <bm-book-list></bm-book-list>
 </main>

 <main>
+  <bm-book-list *ngIf="!book"
+    (selectBook)="showDetails($event)"></bm-book-list>
+  <bm-book-details *ngIf="book"
+    (leave)="showList()" [book]="book"></bm-book-details>
 </main>

src/app/app.component.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
 @Component({
   selector: 'bm-root',
@@ -6,4 +7,13 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
 }

 import { Component } from '@angular/core';
+import { Book } from './shared/book';
 @Component({
   selector: 'bm-root',
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
+  book: Book | null = null;
+  showList() {
+    this.book = null;
+  }
+  showDetails(book: Book) {
+    this.book = book;
+  }
 }

src/app/app.module.ts CHANGED Viewed

@@ -5,12 +5,14 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { BookListComponent } from './book-list/book-list.component';
 import { BookListItemComponent } from './book-list-item/book-list-item.component';
 @NgModule({
   declarations: [
     AppComponent,
     BookListComponent,
-    BookListItemComponent
   ],
   imports: [
     BrowserModule,

 import { AppComponent } from './app.component';
 import { BookListComponent } from './book-list/book-list.component';
 import { BookListItemComponent } from './book-list-item/book-list-item.component';
+import { BookDetailsComponent } from './book-details/book-details.component';
 @NgModule({
   declarations: [
     AppComponent,
     BookListComponent,
+    BookListItemComponent,
+    BookDetailsComponent
   ],
   imports: [
     BrowserModule,

src/app/book-details/book-details.component.html ADDED Viewed

	@@ -0,0 +1,28 @@

+<div class="details" *ngIf="book">
+  <h1>{{ book.title }}</h1>
+  <p role="doc-subtitle" *ngIf="book.subtitle">{{ book.subtitle }}</p>
+  <div class="header">
+    <div>
+      <h2>Authors</h2>
+      <ul>
+        <li *ngFor="let author of book.authors">{{ author }}</li>
+      </ul>
+    </div>
+    <div>
+      <h2>ISBN</h2>
+      {{ book.isbn }}
+    </div>
+    <div *ngIf="book.published">
+      <h2>Published</h2>
+      {{ book.published }}
+    </div>
+  </div>
+  <h2>Description</h2>
+  <p>{{ book.description }}</p>
+  <img *ngIf="book.thumbnailUrl"
+    [src]="book.thumbnailUrl"
+    alt="Cover">
+  <button class="arrow-left" (click)="doLeave()">
+    Back to list
+  </button>
+</div>

src/app/book-details/book-details.component.spec.ts ADDED Viewed

	@@ -0,0 +1,23 @@

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BookDetailsComponent } from './book-details.component';
+describe('BookDetailsComponent', () => {
+  let component: BookDetailsComponent;
+  let fixture: ComponentFixture<BookDetailsComponent>;
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ BookDetailsComponent ]
+    })
+    .compileComponents();
+    fixture = TestBed.createComponent(BookDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/book-details/book-details.component.ts ADDED Viewed

	@@ -0,0 +1,16 @@

+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Book } from '../shared/book';
+@Component({
+  selector: 'bm-book-details',
+  templateUrl: './book-details.component.html',
+  styleUrls: ['./book-details.component.css']
+})
+export class BookDetailsComponent {
+  @Input() book?: Book;
+  @Output() leave = new EventEmitter<void>();
+  doLeave() {
+    this.leave.emit();
+  }
+}

src/app/book-list/book-list.component.html CHANGED Viewed

@@ -1,7 +1,7 @@
 <h1>Books</h1>
 <ul class="book-list">
   <li *ngFor="let book of books">
-    <bm-book-list-item [book]="book"></bm-book-list-item>
   </li>
   <li *ngIf="!books.length">
     No books available.

 <h1>Books</h1>
 <ul class="book-list">
   <li *ngFor="let book of books">
+    <bm-book-list-item [book]="book" (click)="doSelect(book)"></bm-book-list-item>
   </li>
   <li *ngIf="!books.length">
     No books available.

src/app/book-list/book-list.component.integration.spec.ts ADDED Viewed

	@@ -0,0 +1,36 @@

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BookListItemComponent } from '../book-list-item/book-list-item.component';
+import { Book } from '../shared/book';
+import { BookListComponent } from './book-list.component';
+describe('BookListComponent', () => {
+  let component: BookListComponent;
+  let fixture: ComponentFixture<BookListComponent>;
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [
+        BookListComponent,
+        BookListItemComponent
+      ]
+    })
+    .compileComponents();
+    fixture = TestBed.createComponent(BookListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+  it('should trigger an event on clicking the thumbnail', () => {
+    let receivedBook: Book | undefined;
+    component.selectBook.subscribe(book => {
+      receivedBook = book;
+    });
+    fixture.nativeElement
+      .querySelector('img').click();
+    expect(receivedBook?.title).toBe('Tierisch gut kochen');
+  });
+});

src/app/book-list/book-list.component.shallow.spec.ts ADDED Viewed

	@@ -0,0 +1,32 @@

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BookListComponent } from './book-list.component';
+import { Book } from '../shared/book';
+describe('BookListComponent', () => {
+  let component: BookListComponent;
+  let fixture: ComponentFixture<BookListComponent>;
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [BookListComponent]
+    })
+    .compileComponents();
+    fixture = TestBed.createComponent(BookListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+  it('should trigger an event on click', () => {
+    let receivedBook: Book | undefined;
+    component.selectBook.subscribe(book => {
+      receivedBook = book;
+    });
+    fixture.nativeElement
+      .querySelector('bm-book-list-item').click();
+    expect(receivedBook?.title).toBe('Tierisch gut kochen');
+  });
+});

src/app/book-list/book-list.component.spec.ts CHANGED Viewed

@@ -1,23 +1,27 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { BookListComponent } from './book-list.component';
 describe('BookListComponent', () => {
   let component: BookListComponent;
-  let fixture: ComponentFixture<BookListComponent>;
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ BookListComponent ]
-    })
-    .compileComponents();
-    fixture = TestBed.createComponent(BookListComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
   });
-  it('should create', () => {
-    expect(component).toBeTruthy();
   });
 });

 import { BookListComponent } from './book-list.component';
+import { Book } from '../shared/book';
 describe('BookListComponent', () => {
   let component: BookListComponent;
+  beforeEach(() => {
+    component = new BookListComponent();
+  });
+  it('should hold a hardcoded list of 2 books', () => {
+    expect(component.books).toHaveSize(2);
   });
+  it('should trigger an event on "doSelect"', () => {
+    const sentBook = {} as Book;
+    let receivedBook: Book | undefined;
+    component.selectBook.subscribe(book => {
+      receivedBook = book;
+    });
+    component.doSelect(sentBook);
+    expect(receivedBook).toBe(sentBook);
   });
 });

src/app/book-list/book-list.component.stub.spec.ts ADDED Viewed

	@@ -0,0 +1,44 @@

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BookListComponent } from './book-list.component';
+import { Book } from '../shared/book';
+import { Component, Input } from '@angular/core';
+@Component({
+  selector: 'bm-book-list-item',
+  template: ''
+})
+class TestBookListItemComponent {
+  @Input() book?: Book;
+}
+describe('BookListComponent', () => {
+  let component: BookListComponent;
+  let fixture: ComponentFixture<BookListComponent>;
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [
+        BookListComponent,
+        TestBookListItemComponent // NEU
+      ]
+    })
+    .compileComponents();
+    fixture = TestBed.createComponent(BookListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+  it('should trigger an event on click', () => {
+    let receivedBook: Book | undefined;
+    component.selectBook.subscribe(book => {
+      receivedBook = book;
+    });
+    fixture.nativeElement
+      .querySelector('bm-book-list-item').click();
+    expect(receivedBook?.title).toBe('Tierisch gut kochen');
+  });
+});

src/app/book-list/book-list.component.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
 import { Book } from '../shared/book';
@@ -9,6 +9,7 @@ import { Book } from '../shared/book';
 })
 export class BookListComponent {
   books: Book[] = [];
   constructor() {
     this.books = [
@@ -32,4 +33,8 @@ export class BookListComponent {
       }
     ];
   }
 }

+import { Component, EventEmitter, Output } from '@angular/core';
 import { Book } from '../shared/book';
 })
 export class BookListComponent {
   books: Book[] = [];
+  @Output() selectBook = new EventEmitter<Book>();
   constructor() {
     this.books = [
       }
     ];
   }
+  doSelect(book: Book) {
+    this.selectBook.emit(book);
+  }
 }

src/app/book-list/book-list.component.without-error-shallow.spec.ts ADDED Viewed

	@@ -0,0 +1,34 @@

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Book } from '../shared/book';
+import { BookListComponent } from './book-list.component';
+describe('BookListComponent', () => {
+  let component: BookListComponent;
+  let fixture: ComponentFixture<BookListComponent>;
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [BookListComponent],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA] // NEU
+    })
+    .compileComponents();
+    fixture = TestBed.createComponent(BookListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+  it('should trigger an event on click', () => {
+    let receivedBook: Book | undefined;
+    component.selectBook.subscribe(book => {
+      receivedBook = book;
+    });
+    fixture.nativeElement
+      .querySelector('bm-book-list-item').click();
+    expect(receivedBook?.title).toBe('Tierisch gut kochen');
+  });
+});

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

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