Chat childcomponent.

De details van elk bericht plaats je best in een childcomponent. Hierdoor blijft de code overzichtelijk en makkelijk onderhoudbaar.
(De structuur van deze component kan je vergelijken met de structuur van de todo-item-component.)

Childcomponent aanmaken.

• Maak in de map chat de chat-message-component aan.
  (De component wordt automatisch in de chat-module geïmporteerd!)

  $ ng g c chat/chat-message -s

Hoofdcomponent aanpassen.

De childcomponent heeft als selector de naam app-chat-message gekregen. Voeg deze eerst aan de hoofdcomponent toe.

• Voeg onder het tekstveld binnen src/app/chat/chat.component.html volgende code toe:

• Lijn 2
  Subscribe binnen de lus op chatService.chatMessages$.
• Lijn 3
  Geef het volledig object door aan de childcomponent.
  Binnen de childcomponent lees je het object uit via de @Input-decorator (@input() message: ChatMessage).

De site zal voorlopig niet meer functioneren omdat de childcomponent de input nog niet kent!

Childcomponent aanpassen.

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

• Lijn 13
  Hier krijgt het object de message van de rootcomponent binnen.
• Lijn 14
  De variabele isMine wordt true indien het chatbericht van de ingelogde gebruiker is. Deze variabele wordt verder in de template gebruikt om de kleur van de card te bepalen en om het edit- en delete-icoon al dan niet te tonen.
• Lijn 15
  De variabele hideInputField bepaalt of het tekstveld waarmee je het chatbericht kan wijzigen zichtbaar is of niet.
• Lijn 17
  Injecteer zowel ChatService (public!) als AuthService in de constructor.
• Lijn 20
  Afhankelijk van wie de eigenaar van dit bericht is, wordt isMine true of false.

Template aanpassen.

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

• Lijn 1
  De gebruiker krijgt zijn eigen berichten te zien met de class card mb-2 bg-info.
  Berichten die niet van hem zijn krijgen de class card mb-2 border-secundary.
• Lijn 3
  Lees de timestamp.seconds uit en zet het met de date-pipe naar een leesbaar formaat om. Let op: de date-pipe verwacht een getal in milliseconden, vandaar dat je het aantal seconden eerst met 1000 vermenigvuldigt.
• Lijn 4
  Hier verschijnt de gebruikersnaam.
• Lijn 6
  De toestand van isMine bepaalt de kleur waarin de chatboodschap getoond wordt.
• Lijn 9
  Toon de chatboodschap.
• Lijn 10 t.e.m. lijn 13
  De twee icoontjes met het bijbehorend click-event zijn enkel zichtbaar bij een eigen chatbericht.
  Door op het delete-icoon in de template te klikken, wordt de volledige boodschap doorgestuurd naar de methode deleteMessage() van de ChatService.
• Lijn 16
  Hier kan de gebruiker zijn chatbericht aanpassen. Het tekstveld (default onzichtbaar) is via two-way binding rechtstreeks aan de variabele chatMessage gekoppeld.
• Lijn 18 en 19
  Klik buiten het tekstveld of druk op enter om de wijziging aan de component door te geven.
  Door op het edit-icoon in de template te klikken, maakt het tekstveld zichtbaar Stuur bij elke wijziging de volledige boodschap naar de methode updateMessage() van de ChatService.