Using what you've learned about components and services, create a new component that will display the number of messages sent by the active user.
Here are a few hints:
- Your new component can be positioned below the user message component at the bottom of the conversation history panel
- It can be a simple label that shows the text "total message(s): " and then the number of messages sent by the active user
- You already have a service that handles the sending of messages - integrate with that service to get your component access to the information it's looking for
Here is the solution:
- In your
messaging-data.service.ts
, you already have aaddUserMessage()
function - no messages get sent through your application without going through this function. - Furthermore, that function already emits an event after it's done handling the requested message
- So all we need to do in our new component is subscribe to the existing event and use the corresponding data to update a local variable with the active number of messages
- We then simply use
{{ }}
notation to bind to that variable in our view
Here is the code for this solution:
Note: we used the following CLI command to generate the new component:
ng g c application-component/conversation-history-component/message-count-component
- Inject the
MessagingDataService
into the message count component:
import { Component, OnInit } from "@angular/core";
import { MessagingDataService } from "src/app/messaging-data.service";
import { Message } from "src/app/message.model";
@Component({
selector: "app-message-count-component",
templateUrl: "./message-count-component.component.html",
styleUrls: ["./message-count-component.component.css"],
})
export class MessageCountComponentComponent implements OnInit {
sentMessageCount = 0;
constructor(private messagingSvce: MessagingDataService) {}
ngOnInit(): void {
this.messagingSvce.userMessagesChanged.subscribe((messages: Message[]) => {
this.sentMessageCount = messages.length;
});
}
}
- Add our simple text to the view for our message count component:
total message(s): {{ sentMessageCount }}
- Add the message count component to the conversation history component in
conversation-history-comopnent.component.html
:
<div class="container">
<div class="row">
<div class="col-12 p-3">Ludovic, Jessica</div>
</div>
<div class="row">
<div class="col-12 border p-3">
<app-conversation-thread-component></app-conversation-thread-component>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12 p-3">
<app-send-message-component></app-send-message-component>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12 p-3">
<app-message-count-component></app-message-count-component>
</div>
</div>
</div>
- Remove the
message-count-component.component.spec.ts
file, since we won't be writing unit tests for this component