Differenzansicht 13-pipes
im Vergleich zu 12-validation

← Zurück zur Übersicht | Demo | Quelltext auf GitHub
src/app/books/book-details/book-details.component.html CHANGED
@@ -10,11 +10,11 @@
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>
10
  </div>
11
  <div>
12
  <h2>ISBN</h2>
13
+ {{ book.isbn | isbn }}
14
  </div>
15
  <div *ngIf="book.published">
16
  <h2>Published</h2>
17
+ {{ book.published | date:'longDate' }}
18
  </div>
19
  </div>
20
  <h2>Description</h2>
src/app/books/book-list-item/book-list-item.component.html CHANGED
@@ -9,5 +9,5 @@
9
  {{ author }}
10
  </li>
11
  </ul>
12
- <div>ISBN {{ book.isbn }}</div>
13
  </a>
9
  {{ author }}
10
  </li>
11
  </ul>
12
+ <div>ISBN {{ book.isbn | isbn }}</div>
13
  </a>
src/app/books/books.module.ts CHANGED
@@ -5,12 +5,14 @@ import { BooksRoutingModule } from './books-routing.module';
5
  import { BookListComponent } from './book-list/book-list.component';
6
  import { BookListItemComponent } from './book-list-item/book-list-item.component';
7
  import { BookDetailsComponent } from './book-details/book-details.component';
 
8
 
9
  @NgModule({
10
  declarations: [
11
  BookListComponent,
12
  BookListItemComponent,
13
- BookDetailsComponent
 
14
  ],
15
  imports: [
16
  CommonModule,
5
  import { BookListComponent } from './book-list/book-list.component';
6
  import { BookListItemComponent } from './book-list-item/book-list-item.component';
7
  import { BookDetailsComponent } from './book-details/book-details.component';
8
+ import { IsbnPipe } from './shared/isbn.pipe';
9
 
10
  @NgModule({
11
  declarations: [
12
  BookListComponent,
13
  BookListItemComponent,
14
+ BookDetailsComponent,
15
+ IsbnPipe
16
  ],
17
  imports: [
18
  CommonModule,
src/app/books/shared/isbn.pipe.ts ADDED
@@ -0,0 +1,14 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { Pipe, PipeTransform } from '@angular/core';
2
+
3
+ @Pipe({
4
+ name: 'isbn',
5
+ standalone: false
6
+ })
7
+ export class IsbnPipe implements PipeTransform {
8
+
9
+ transform(value: string): string {
10
+ if (!value) { return ''; }
11
+ return `${value.substring(0, 3)}-${value.substring(3)}`;
12
+ }
13
+
14
+ }