Sovelluksen etusivulla käyttäjä näkee luettelon kaikista tehtävistä. Tämä helpottaa nopeasti hahmottamaan, mitä pitää tehdä.

Mutta entä jos käyttäjä haluaa tarkastella tietyn tehtävän yksityiskohtia — sen yksilöllistä tunnistetta, tarkkaa otsikkoa ja tilaa? Tätä varten tarvitsemme erillisen tehtävän yksityiskohtasivun.

Tässä luvussa opit rakentamaan TaskDetailsComponent-komponentin, joka avautuu, kun käyttäjä siirtyy tiettyyn URL-osoitteeseen ja näyttää tiedot valitusta tehtävästä.

Uuden komponentin luominen

Tehtävän tietojen näyttämistä varten luomme itsenäisen komponentin. Se toimii erillisenä ja voidaan liittää suoraan reitityskonfiguraatioon.

Suorita tämä komento:

Tämä luo tiedoston task-details.component.ts sekä sen mallin, tyylit ja testit. Voit halutessasi poistaa testitiedoston turvallisesti.

Komponentin toteutus

Tässä vaiheessa tarvitsemme vain tehtävän id:n, otsikon ja tilan — nämä ovat kaikki tiedot, jotka tehtävästä on saatavilla. Lisäämme siis komponenttiin vain task-ominaisuuden.

Seuraavaksi luodaan mallipohja ja sen CSS-tyylit:

Mallipohja käyttää *ngIf-direktiiviä näyttääkseen tehtävän tiedot kortissa, jos tehtävä löytyy; muussa tapauksessa näytetään "Tehtävää ei löytynyt" -viesti ng-template-elementin avulla.

Kortin sisällä näytetään tehtävän ID, otsikko ja tila, sekä painike, jolla voi palata takaisin tehtävälistaan (lisätään painikkeen toiminnallisuus myöhemmin).

Nyt TaskDetailsComponent-komponenttimme on käyttövalmis. Yhdistämme sen reititykseen seuraavassa luvussa.