I am making an application in angular and I have integrated a chat. As you can see in the screenshot, when my chat loads it shows the first message each time.

what can i do so that when it loads it shows me the part with the last message?

Screenshots:

Screenshot1

Screenshot2

I also quote the HTML code:

<div >
        <li  *ngFor="let message of messages">
          <div
            *ngIf="
              message.receiver_username == myUserName;
              then incoming_msg;
              else outgoing_msg
            "
          ></div>
          <ng-template #incoming_msg>
            <div >
              <div >
                <img
                  src="https://i.imgur.com/k2PZLZa.png"
                  alt="User avatar"
                />
              </div>
              <div >
                <div >
                  <h5>{{message.timestamp | date : 'medium':'GMT'}}</h5>
                  <p>{{ message.message }}</p>
                </div>
              </div>
            </div>
          </ng-template>
          <ng-template #outgoing_msg>
            <div >
              <div >
                <h5>{{message.timestamp | date : 'medium':'GMT'}}</h5>
                <p>{{ message.message }}</p>
              </div>
            </div>
          </ng-template>
        </li>
      </div>

CodePudding user response：

Try somehting like this:

 <li id="liMessages" #liMessages  *ngFor="let message of messages">

Then this in your TS code after you bind the messages array:

document.getElementById("liMessages").tabIndex = this.messages.length;

Or

document.getElementById("liMessages").setAttribute("tabindex", "6");

You can find an alternative approach by scrolling the ul here:

How to scroll to li element in a ul list