Diskussionsthread zur Schulung

[JohannesHoppe]

Hier können wir während des Workshops Links und Codeschnipsel teilen.

[JohannesHoppe]

https://angular.dev/

https://ngrx.io/guide/store/configuration/runtime-checks
https://doesitmutate.xyz/
https://angular.io/resources?category=development
https://angular.schule/blog/2022-11-use-define-for-class-fields
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toSorted

[JohannesHoppe]

[JohannesHoppe]

describe('In der Mathematik', () => {

    // Arrange
    let summand: number;
    beforeEach(() => {
        summand = 1;
    });

    it('soll 1 + 1 immer 2 sein', () => {  
        // Act
        const result = summand + 1;

        // Assert
        expect(result).toBe(2)
    });
});

[JohannesHoppe]

import { Book } from './book';
import { BookRatingService } from './book-rating.service';

describe('BookRatingService', () => {
  let service: BookRatingService;
  let book: Book;

  beforeEach(() => {
    service = new BookRatingService();
    book = {
      isbn: '000',
      title: 'Test',
      description: 'Test',
      rating: 3,
      price: 1
    }
  });

  it('should rate up a book by one', () => {
    const ratedBook = service.rateUp(book);
    expect(ratedBook.rating).toBe(4);
  });

  it('should rate down a book by one', () => {
    const ratedBook = service.rateDown(book);
    expect(ratedBook.rating).toBe(2);
  });

  it('should not be allowed to have a rating greater than 5', () => {
    book.rating = 5;
    const ratedBook = service.rateUp(book);
    expect(ratedBook.rating).toBe(5);
  });

  it('should not be allowed to have a rating smaller than 1', () => {
    book.rating = 1;
    const ratedBook = service.rateDown(book);
    expect(ratedBook.rating).toBe(1);
  });

  it('should not mutate the book', () => {
    const frozenBook = Object.freeze(book);
    expect(() => service.rateUp(frozenBook)).not.toThrow();
    expect(() => service.rateDown(frozenBook)).not.toThrow();
  })
});

[JohannesHoppe]

import { Injectable } from '@angular/core';
import { Book } from './book';

@Injectable({
  providedIn: 'root'
})
export class BookRatingService {

  readonly minRating = 1;
  readonly maxRating = 5;

  rateUp(book: Book): Book {

    if(book.rating >= this.maxRating) {
      return book;
    }

    return {
      ...book,
      rating: book.rating + 1
    }
  }

  rateDown(book: Book): Book {

    const rating = Math.max(book.rating - 1, this.minRating);

    return {
      ...book,
      rating
    }
  }
}

[JohannesHoppe]

Hausaufgabe (für Donnerstag)

• Entwickle eine Komponente, um die Bewertung eines Buchs anzuzeigen, z. B. <app-rating [value]="4"></app-rating>. Im Template der Komponente soll zunächst nur die Rating-Zahl angezeigt werden.
• Zeige die Bewertung in der neuen Komponente mit Sternen an. Du kannst entweder ein Bild, ein ASCII-Zeichen (*) oder ein Emoji (⭐️) verwenden.

[thermo78]

export class RatingComponent {
  @Input() rating: number = 0;

  get stars() : number[] {
    return new Array(this.rating);
  }
}

<span *ngFor="let item of stars">⭐</span>

[JohannesHoppe]

import { NgForOf } from '@angular/common';

import { Component, Input } from '@angular/core';

 

@Component({

  selector: 'app-rating',

  standalone: true,

  imports: [NgForOf],

  template: '<span *ngFor="let star of stars">✴️</span>',

})

export class RatingComponent {

  stars: number[] = [];

 

  @Input()

  public set rating(value: number) {

    this.stars = new Array(value);

  }

}

[JohannesHoppe]

Freiwillige Hausaufgabe: Buttons disablen (für Freitag)

Deaktiviere die Buttons in der BookComponent, wenn das Max/Min-Rating erreicht ist.
Berücksichtige das Pattern der Container/Presentational Components.

Ansätze:

1. Konfigurierbar (@Input() minRating / @Input() maxRating)
2. Entscheidung übergeben (@Input() rateUpAllowed: boolean / @Input() rateDownAllowed: boolean)
3. Callbacks (@Input() rateUpAllowedFn = (book: Book) => true / @Input() rateDownAllowedFn (book: Book) => true)

[JohannesHoppe]

ng g @angular/core:control-flow

[JohannesHoppe]

🎮 NEU: RxJS Playground

Du kannst dir entweder

• den Code als ZIP-Datei herunterladen: rxjs-playground.zip
  oder
  
• dieses Repository per Git herunterladen und in den Ordner rxjs-playground wechseln.

cd rxjs-playground
npm install
ng serve

[JohannesHoppe]

ng g c books/book-create

[JohannesHoppe]

<form>

  <div class="form-group">
    <label for="isbn">ISBN</label>
    <input type="text" class="form-control" id="isbn">
    @if (false) {
      <div class="feedback-error">Die ISBN ist ungültig!</div>
    }
  </div>

  <div class="form-group">
    <label for="title">Titel</label>
    <input type="text" class="form-control" id="title">
  </div>

  <div class="form-group">
    <label for="description">Beschreibung</label>
    <textarea class="form-control" id="description"></textarea>
  </div>

  <button type="submit" class="btn btn-primary mb-4">Erstellen</button>

</form>

[JohannesHoppe]

import { Component } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { Observable } from 'rxjs';
import { Book } from '../shared/book';

@Component({
  selector: 'app-book-create',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './book-create.component.html',
  styleUrl: './book-create.component.scss'
})
export class BookCreateComponent {

  bookForm = new FormGroup({

    isbn: new FormControl('', {
      nonNullable: true,
      validators: [Validators.required, Validators.minLength(3)]
    }),

    title: new FormControl('', {
      nonNullable: true,
      validators: [Validators.required]
    }),

    description: new FormControl('', {
      nonNullable: true
    })
  });

  c = this.bookForm.controls;

  isInvalid(control: FormControl) {
    return control.invalid && control.touched;
  }

  // TODO:
  // hasError(control: FormControl, errorCode: string): boolean

  submitForm() {

    const newBook: Book = {
      ...this.bookForm.getRawValue(),
      rating: 1,
      price: 1
    }

    // TODO!
    // 1. Erzeuge ein Event mit dem Namen create – Payload: Book
    // 2. Versende das Event
    // 3. Subscribe dich auf das Event im Dashbard
    // 4. Füge das Buch dem Array hinzu (immutable)

    this.bookForm.reset();

  }
}

<form [formGroup]="bookForm" (ngSubmit)="submitForm()">

  <div class="form-group">
    <label for="isbn">ISBN</label>
    <input [formControl]="c.isbn" type="text" class="form-control" id="isbn">
    @if (isInvalid(c.isbn)) {
      <div class="feedback-error">Die ISBN ist ungültig!</div>
    }
  </div>

  <div class="form-group">
    <label for="title">Titel</label>
    <input [formControl]="c.title" type="text" class="form-control" id="title">
  </div>

  <div class="form-group">
    <label for="description">Beschreibung</label>
    <textarea [formControl]="c.description" class="form-control" id="description"></textarea>
  </div>

  <button [disabled]="bookForm.invalid" type="submit" class="btn btn-primary mb-4">Erstellen</button>

</form>

[thermo78]

@for (b of books; track b) {
  <app-book
    (rateUp)="doRateUp($event)"
    (rateDown)="doRateDown($event)"
    [rateDownAllowedFn]="rateDownAllowedFn"
    [rateUpAllowedFn]="rateUpAllowedFn2.bind(this)"
    [book]="b">
  </app-book>
}

  rateUpAllowedFn = (book: Book) => book.rating < this.rs.maxRating;
  rateDownAllowedFn = (book: Book) => book.rating > this.rs.minRating;

  rateUpAllowedFn2(book: Book) {
    return book.rating < this.rs.maxRating;
  }

[JohannesHoppe]

ng g service books/shared/book-store

[JohannesHoppe]

ng g c books/book-details

[JohannesHoppe]

import { takeUntilDestroyed } from '@angular/core/rxjs-interop';