Chat rootcomponent.

De chat-component is reeds aangemaakt maar bevat voorlopig enkel wat dummy tekst (chat works!). De rootcomponent bevat enkel een tekstveld. Voor het volledig overzicht van alle chatberichten maak je dadelijk een childcomponent (chat-message) aan.

Template aanpassen.

• Wijzig de code op src/app/chat/chat.component.html.

Het dynamisch gedeelte binnen de template is als volgt opgebouwd:

• Lijn 5
  Geef het tekstveld een lokale referentie, bijvoorbeeld #i.
• Lijn 6
  Via event binding ga je de waarde van #i uitlezen en doorgeven aan addMessage(). Vervolgens wordt het tekstveld terug leeg gemaakt.
• Lijn 9
  Hier verwijs je naar de observable chatMessages$ uit de chatService. Met de async-pipe subscribe je op chatMassages$. De json-pipe zet array om naar leesbare tekst.

Component aanpassen.

• Wijzig de code op src/app/chat/chat.component.ts.

• Lijn 11
  Injecteer de ChatService public. In de template ga je de service namelijk rechtstreeks aanspreken.
• Lijn 18
  Controleer eerst of de boodschap tekst bevat en geef het vervolgens door aan de service.