Differenzansicht 10-pipes
im Vergleich zu 09-resource

← Zurück zur Übersicht | Demo | Quelltext auf GitHub
src/app/books-portal/book-details/book-details.ng.html CHANGED
@@ -16,11 +16,11 @@
16
  </div>
17
  <div>
18
  <h2>ISBN</h2>
19
- {{ b.isbn }}
20
  </div>
21
  <div>
22
  <h2>Created at</h2>
23
- {{ b.createdAt }}
24
  </div>
25
  </div>
26
  </header>
 
16
  </div>
17
  <div>
18
  <h2>ISBN</h2>
19
+ {{ b.isbn | isbnFormat }}
20
  </div>
21
  <div>
22
  <h2>Created at</h2>
23
+ {{ b.createdAt | date:'medium' }}
24
  </div>
25
  </div>
26
  </header>
src/app/books-portal/book-details/book-details.ts CHANGED
@@ -1,11 +1,13 @@
1
  import { Component, inject, input } from '@angular/core';
 
2
  import { Router, RouterLink } from '@angular/router';
3
 
4
  import { BookStore } from '../../shared/book-store';
 
5
 
6
  @Component({
7
  selector: 'app-book-details',
8
- imports: [RouterLink],
9
  templateUrl: './book-details.ng.html',
10
  styleUrl: './book-details.scss'
11
  })
 
1
  import { Component, inject, input } from '@angular/core';
2
+ import { DatePipe } from '@angular/common';
3
  import { Router, RouterLink } from '@angular/router';
4
 
5
  import { BookStore } from '../../shared/book-store';
6
+ import { IsbnFormatPipe } from '../../shared/isbn-format.pipe';
7
 
8
  @Component({
9
  selector: 'app-book-details',
10
+ imports: [RouterLink, DatePipe, IsbnFormatPipe],
11
  templateUrl: './book-details.ng.html',
12
  styleUrl: './book-details.scss'
13
  })
src/app/books-portal/book-item/book-item.ng.html CHANGED
@@ -9,7 +9,7 @@
9
  @if (b.subtitle) {
10
  <p role="doc-subtitle">{{ b.subtitle }}</p>
11
  }
12
- ISBN: {{ b.isbn }}
13
  </div>
14
  <footer>
15
  <a [routerLink]="['details', b.isbn]">Details</a>
 
9
  @if (b.subtitle) {
10
  <p role="doc-subtitle">{{ b.subtitle }}</p>
11
  }
12
+ ISBN: {{ b.isbn | isbnFormat }}
13
  </div>
14
  <footer>
15
  <a [routerLink]="['details', b.isbn]">Details</a>
src/app/books-portal/book-item/book-item.ts CHANGED
@@ -2,10 +2,11 @@ import { Component, input, output } from '@angular/core';
2
  import { RouterLink } from '@angular/router';
3
 
4
  import { Book } from '../../shared/book';
 
5
 
6
  @Component({
7
  selector: 'app-book-item',
8
- imports: [RouterLink],
9
  templateUrl: './book-item.ng.html',
10
  styleUrl: './book-item.scss'
11
  })
 
2
  import { RouterLink } from '@angular/router';
3
 
4
  import { Book } from '../../shared/book';
5
+ import { IsbnFormatPipe } from '../../shared/isbn-format.pipe';
6
 
7
  @Component({
8
  selector: 'app-book-item',
9
+ imports: [RouterLink, IsbnFormatPipe],
10
  templateUrl: './book-item.ng.html',
11
  styleUrl: './book-item.scss'
12
  })
src/app/shared/isbn-format.pipe.ts ADDED
@@ -0,0 +1,23 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { Pipe, PipeTransform } from '@angular/core';
2
+
3
+ @Pipe({
4
+ name: 'isbnFormat'
5
+ })
6
+ export class IsbnFormatPipe implements PipeTransform {
7
+ transform(value: string): string {
8
+ if (value.length !== 13) {
9
+ return value;
10
+ }
11
+
12
+ // Beispiel: 978-1-2345-6789-0
13
+ const parts = [
14
+ value.slice(0, 3), // Präfix (978 oder 979)
15
+ value.slice(3, 4), // Gruppe (Sprache/Region)
16
+ value.slice(4, 8), // Herausgeber
17
+ value.slice(8, 12), // Titel
18
+ value.slice(12) // Prüfziffer
19
+ ];
20
+
21
+ return parts.join('-');
22
+ }
23
+ }