Differenzansicht 01-components
im Vergleich zu 00-base

← Zurück zur Übersicht | Demo | Quelltext auf GitHub
src/app/app.ng.html CHANGED
@@ -1 +1,3 @@
1
- <main></main>
 
 
 
1
+ <main>
2
+ <app-book-list />
3
+ </main>
src/app/app.ts CHANGED
@@ -1,8 +1,10 @@
1
  import { Component } from '@angular/core';
2
 
 
 
3
  @Component({
4
  selector: 'app-root',
5
- imports: [],
6
  templateUrl: './app.ng.html',
7
  styleUrl: './app.scss'
8
  })
 
1
  import { Component } from '@angular/core';
2
 
3
+ import { BookList } from './books-portal/book-list/book-list';
4
+
5
  @Component({
6
  selector: 'app-root',
7
+ imports: [BookList],
8
  templateUrl: './app.ng.html',
9
  styleUrl: './app.scss'
10
  })
src/app/books-portal/book-list/book-list.ng.html ADDED
@@ -0,0 +1,18 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <section>
2
+ <h1>Books</h1>
3
+ <div>
4
+ @for (b of books(); track b.isbn) {
5
+ <article class="book-item">
6
+ <header>
7
+ <h2>{{ b.title }}</h2>
8
+ </header>
9
+ <div>
10
+ @if (b.subtitle) {
11
+ <p role="doc-subtitle">{{ b.subtitle }}</p>
12
+ }
13
+ ISBN: {{ b.isbn }}
14
+ </div>
15
+ </article>
16
+ }
17
+ </div>
18
+ </section>
src/app/books-portal/book-list/book-list.ts ADDED
@@ -0,0 +1,36 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { Component, signal } from '@angular/core';
2
+
3
+ import { Book } from '../../shared/book';
4
+
5
+ @Component({
6
+ selector: 'app-book-list',
7
+ imports: [],
8
+ templateUrl: './book-list.ng.html',
9
+ styleUrl: './book-list.scss',
10
+ })
11
+ export class BookList {
12
+ readonly books = signal<Book[]>([]);
13
+
14
+ constructor() {
15
+ this.books.set([
16
+ {
17
+ isbn: '12345',
18
+ title: 'Tierisch gut kochen',
19
+ authors: ['Mrs Chimp', 'Mr Gorilla'],
20
+ subtitle: 'Rezepte von Affe bis Zebra',
21
+ imageUrl: 'https://cdn.ng-buch.de/kochen.png',
22
+ description: 'Immer lecker und gut',
23
+ createdAt: new Date().toISOString(),
24
+ },
25
+ {
26
+ isbn: '67890',
27
+ title: 'Backen mit Affen',
28
+ subtitle: 'Bananenbrot und mehr',
29
+ authors: ['Orang Utan'],
30
+ imageUrl: 'https://cdn.ng-buch.de/backen.png',
31
+ description: 'Tolle Backtipps für Mensch und Tier',
32
+ createdAt: new Date().toISOString(),
33
+ },
34
+ ]);
35
+ }
36
+ }
src/app/shared/book.ts ADDED
@@ -0,0 +1,9 @@
 
 
 
 
 
 
 
 
 
 
1
+ export interface Book {
2
+ isbn: string;
3
+ title: string;
4
+ subtitle?: string;
5
+ authors: string[];
6
+ description: string;
7
+ imageUrl: string;
8
+ createdAt: string;
9
+ }