Differenzansicht 02-property-binding
im Vergleich zu 01-components

← Zurück zur Übersicht | Demo | Quelltext auf GitHub
src/app/app.module.ts CHANGED
@@ -4,11 +4,13 @@ import { BrowserModule } from '@angular/platform-browser';
4
  import { AppRoutingModule } from './app-routing.module';
5
  import { AppComponent } from './app.component';
6
  import { BookListComponent } from './book-list/book-list.component';
 
7
 
8
  @NgModule({
9
  declarations: [
10
  AppComponent,
11
- BookListComponent
 
12
  ],
13
  imports: [
14
  BrowserModule,
4
  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,
src/app/book-list/book-list.component.html CHANGED
@@ -1,19 +1,7 @@
1
  <h1>Books</h1>
2
  <ul class="book-list">
3
  <li *ngFor="let book of books">
4
- <div class="list-item">
5
- <img *ngIf="book.thumbnailUrl" [src]="book.thumbnailUrl" alt="Cover">
6
- <h2>{{ book.title }}</h2>
7
- <p role="doc-subtitle" *ngIf="book.subtitle">
8
- {{ book.subtitle }}
9
- </p>
10
- <ul class="comma-list">
11
- <li *ngFor="let author of book.authors">
12
- {{ author }}
13
- </li>
14
- </ul>
15
- <div>ISBN {{ book.isbn }}</div>
16
- </div>
17
  </li>
18
  <li *ngIf="!books.length">
19
  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"></bm-book-list-item>
 
 
 
 
 
 
 
 
 
 
 
 
5
  </li>
6
  <li *ngIf="!books.length">
7
  No books available.
src/app/book-list-item/book-list-item.component.html ADDED
@@ -0,0 +1,13 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <div *ngIf="book" class="list-item">
2
+ <img *ngIf="book.thumbnailUrl" [src]="book.thumbnailUrl" alt="Cover">
3
+ <h2>{{ book.title }}</h2>
4
+ <p role="doc-subtitle" *ngIf="book.subtitle">
5
+ {{ book.subtitle }}
6
+ </p>
7
+ <ul class="comma-list">
8
+ <li *ngFor="let author of book.authors">
9
+ {{ author }}
10
+ </li>
11
+ </ul>
12
+ <div>ISBN {{ book.isbn }}</div>
13
+ </div>
src/app/book-list-item/book-list-item.component.ts ADDED
@@ -0,0 +1,12 @@
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { Component, Input } from '@angular/core';
2
+ import { Book } from '../shared/book';
3
+
4
+ @Component({
5
+ selector: 'bm-book-list-item',
6
+ templateUrl: './book-list-item.component.html',
7
+ standalone: false,
8
+ styleUrl: './book-list-item.component.css'
9
+ })
10
+ export class BookListItemComponent {
11
+ @Input() book?: Book;
12
+ }