Skip to content

Latest commit

 

History

History
42 lines (23 loc) · 1.73 KB

File metadata and controls

42 lines (23 loc) · 1.73 KB

Angular Tutorial: First App

Link: https://angular.dev/tutorials/first-app

Zwei wichtige Hinweise zum Tutorial

1. Kapitel Angular Services

Die readonly baseUrl = "https://..."; Variable muss ebenfalls mit der housingLocationList und ihrem Wert in den HousingService kopiert werden!

2. Kapitel Add HTTP communication

Der npm install -g json-server muss nicht ausgeführt werden!
Stattdessen einfach folgenden Befehl im Projektverzeichnis ausführen:

npm run json-server

Aufgaben

  • Beantworte folgende Fragen:

    • Wie erstellt man eine neue Angular Komponente?
    • Auf welche zwei Arten kann man eine Komponente anzeigen lassen?
  • Zeige auf der Detailseite statt “true” oder “false” bei der Ausstattung “Yes” oder “No” an.

  • Zeige eine Meldung wie “No houses found” an, wenn die Suche keine Resultate hatte. Stichwort: *ngIf / @if

  • Blende das gesamte “Apply now to live here” Formular auf der Detailseite aus, wenn keine Einheiten verfügbar sind. Stichwort: *ngIf / @if

  • Zeige auf der Detailseite eine Meldung an, wenn keine Housing Location gefunden wurde (z.b. Test durch Aufruf http://localhost:4200/details/999)

  • Konfiguriere den “Apply now” Button auf der Detailseite so, dass dieser nur angeklickt werden kann, wenn alle Felder im Formular Eingaben enthalten. Stichwort: Validators.required, disabled, form.invalid