Advanced TypeScript Programming Projects

Finishing off our application with the GeneralchatComponent

Let's start off by adding in the Bootstrap code for displaying the messages. We wrap the row message inside a Bootstrap container, or rather container-fluid in this case. In our component, we are going to be reading the messages from the array of messages we received over the socket:

<div class="container-fluid">  <div class="row">    <div *ngFor="let msg of messages" class="col-12">      {{msg}}    </div>  </div></div>

We are also going to add a text box to the navigation bar at the bottom of our screen. This is bound to the CurrentMessage field in the component. We send the message using SendMessage():

<nav class="navbar navbar-dark bg-dark mt-5 fixed-bottom">  <div class="navbar-expand m-auto ...