Moonbase Control: Inputs i kompozycja komponentów

Zadanie z modułu Angular. Repozytorium zawiera kod startowy aplikacji Moonbase Control dla tej lekcji.

Zadanie

Dashboard zawiera cztery karty statusowe o tej samej strukturze. Wydziel kartę do osobnego komponentu i przekaż do niej dane za pomocą inputów.

1. Wygeneruj komponent Card w folderze src/app/shared przy pomocy Angular CLI.
2. Zastąp domyślny szablon w card.html powtarzalnym kodem HTML jednej karty z Dashboardu.
3. Zaimportuj Card do komponentu Dashboard.
4. Zastąp powtarzalny HTML w dashboard.html osobnymi instancjami komponentu Card.
5. W komponencie Card utwórz dwa input signals:
   • title: wymagany input,
   • quantity: input z domyślną wartością 0.
6. Wyświetl wartości obu inputów w card.html. Pamiętaj, że input signal odczytujesz, wywołując go z nawiasami:

{{ title() }}
{{ quantity() }}

7. Przekaż wartości z Dashboard do Card za pomocą property bindingu, na przykład:

<app-card
  [title]="'Active Missions'"
  [quantity]="12"
/>

Każda karta powinna otrzymać inne wartości title i quantity.

💡 Wymagany input zawsze musi otrzymać wartość. Input z wartością domyślną możesz pominąć, wtedy Angular użyje wartości domyślnej.

Jak zacząć

1. Zrób fork tego repozytorium na swoje konto GitHub.
2. Sklonuj swój fork na komputer.
3. Zainstaluj zależności: npm install.
4. Uruchom aplikację: npm start.
5. Jeśli zadanie korzysta z danych z API, uruchom w drugim terminalu mock API: npm run api.

Jak oddać zadanie

1. Zapisz zmiany w commicie i wypchnij je do swojego forka.
2. Otwórz Pull Request z forka do repozytorium mate-academy/angular_inputs, do brancha main.
3. Platforma uruchomi review Twojego Pull Requesta.