W poprzednim artykule stworzyliśmy nasz pierwszy komponent dla aplikacji – listę to do. Czas dodać do niej zadania! Żeby to zrobić stworzymy komponent pojedynczego zadania na liście.

Wymagania wstępne:

Spisane w formie checklisty (do wydrukowania bądź podglądu/importu jako szablon Nozbe):

Materiały do nauki oraz informacje co i jak znajdziesz we wpisie Tworzymy aplikację  webową – krok po kroku – podsumowanie aktualnego statusu & co dalej?

 

Branch, odpowiadający dzisiejszemu artykułowi:  03-todo-item-component : commit #1, commit #2

 

Tworzymy komponent pojedynczego zadania na liście

Krok pierwszy:

Wygeneruj nowy komponent korzystając z Angular CLI. Umieść go w folderze todo-list.

Spróbuj zrobić to samodzielnie. A później sprawdź poniższą podpowiedź:

 

Umieśćmy component na naszej liście:

Na chwilę obecną da to taki efekt:

Świetnie! Wiemy, że działa. No, ale przydałoby się, żeby jeszcze wyglądał jakoś sensownie 😉

Wcześniej wspominałam, że gdybyśmy chcieli stworzyć taki statyczny element to do, mógłby wyglądać następująco:

Skopiuj ten kod do pliku todo-item.component.html. Efekt?

Przydałoby się jednak by nazwa elementu nie była zapisana w kodzie na stałe. TodoItem to komponent wizualny i w zasadzie nie powinien interesować się tym, co wyświetla. Ta wiedza powinna przychodzić z góry, najlepiej z miejsca, w którym znajduje się nazwa samej listy.

 

Istnieją szanse, że zastanawiasz się na tym etapie, że „coś nie halo”. Tworzymy i przechowujemy te dane w różnych miejscach, za chwilę będziemy tworzyć zadania. A gdzie jakiś model? Jakiś ład? Jakiś porządek?

To wszystko przyjdzie z czasem, krok po kroku będziemy zmieniać aplikację.

Ogólnie budowa aplikacji webowej nie polega na tym, że piszemy krok po kroku docelową aplikację. Kod jest ciągle przebudowywany, rozszerzany, zmieniany. W zależności od stawianych przed nim zadań. Nasza aplikacja również będzie się zmieniać. Ale krok po kroku.

 

Dodajmy pola do naszej listy.

app.component.ts

Ponieważ do naszego komponentu todoList przekazujemy całą obiekt lists.todo, nie musimy nic zmieniać w HTML odpowiadającym AppComponent. Możemy po prostu odczytać list.tasks, tak samo jak list.name:

Przydałaby się jednak współpraca po drugiej stronie. Wiesz czego brakuje w todo-item.component.ts? Jak ma nasłuchiwać na dane wejściowe?

Tak. @Input.

A ponieważ mamy nasze zadanie – możemy je wyświetlić:

Rozszerzmy trochę ilość zadań na liście.

 

Pojawiły się kolejne elementy? Pojawiły.

Mam nadzieję, że już na tym etapie zauważasz, że dokładnie kolejnych w ten sposób… no, chyba do końca nie ma sensu.

Mamy listę. Jak przejść po jej elementach i dla każdego z nich stworzyć odpowiedni komponent?

Oczywiście pętla for. Od zera do długości listy.

Ale nie zwykład pętla for.

Kod po tym etapie zamknęłam w oddzielnym commit’cie. Możesz go znaleźć tutaj. Za chwilę ulegnie sporym zmianom.

 

*ngFor

Angular oferuje coś takiego jak *ngFor.

*ngFor jest tzw. dyrektywą strukturalną. Jest to typ dyrektywy odpowiedzialnej za strukturę aplikacji (HTML). Dodaje, usuwa albo manipuluje elementami.

Jak rozpoznać dyrektywę strukturalną? Właśnie po gwiazdce * (asterisk).

Jak wykorzystać dyrektywę *ngFor w naszej aplikacji?

Teraz, niezależnie od ilości zadeklarowanych zadań pojawią się one na liście To do.

 

W tym momencie component listy możemy uznać za zakończony.

 

Spełnia wszystkie nasze dotychczasowe oczekiwania.

No, mogłaby wyglądać odrobinę lepiej…

Dlatego w jednym z kolejnych artykułów zobaczymy jak Bootstrap może odmienić jej oblicze 😉 Ale zanim przejdziemy do wyglądu, skupmy się na działaniu.

 

Przypominam, że kod aplikacji po dzisiejszej lekcji znajdziesz na Github’ie, branch: 03-todo-item-component

Jeśli chcesz podejrzeć same zmiany:

commit #1

commit #2

 

W razie pytań – śmiało dawaj znać w komentarzu lub na naszej Tutorialowej Grupie Wsparcia na Facebooku.

Powodzenia!

Series Navigation<< Template, Component, Data Binding & nasz pierwszy komponentDone vs. to do – tworzymy model pojedynczego zadania >>