web
mobile

Angular Bootstrap chat

Angular Chat - Bootstrap 4 & Material Design

Angular Bootstrap chat is a component dedicated for text-based communication between two or more users in real time. Build with conversations list sidebar.


Required styles import

Starting with MDB Angular 8, using the following components requires importing an additional stylesheet. Add the following imports to the global styles.scss stylesheet file.


        @import "~ng-uikit-pro-standard/assets/scss/addons-pro/_chat-pro.scss";
      

Basic chat MDB Pro component

  • avatar
    Brad Pitt 12 mins ago

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • Lara Croft 13 mins ago

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

    avatar
  • avatar
    Brad Pitt 12 mins ago

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


<mdb-card class="chat-room">
    <mdb-card-body class="grey lighten-3">

        <!-- Grid row -->
        <div class="row px-lg-2 px-2">

            <!-- Grid column -->
            <div class="col-md-6 col-xl-4 px-0">

                <h6 class="font-weight-bold mb-3 text-center text-lg-left">Member</h6>
                <div class="white z-depth-1 px-3 pt-3 pb-0">
                    <ul class="list-unstyled friend-list">
                        <li class="active grey lighten-3 p-2">
                            <a href="#" class="d-flex justify-content-between">
                                <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-8.jpg" alt="avatar" class="avatar rounded-circle d-flex align-self-center mr-2 z-depth-1">
                                <div class="text-small">
                                    <strong>John Doe</strong>
                                    <p class="last-message text-muted">Hello, Are you there?</p>
                                </div>
                                <div class="chat-footer">
                                    <p class="text-smaller text-muted mb-0">Just now</p>
                                    <mdb-badge danger="true" class="float-right"></mdb-badge>
                                </div>
                            </a>
                        </li>
                        <li class="p-2">
                            <a href="#" class="d-flex justify-content-between">
                                <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-1.jpg" alt="avatar" class="avatar rounded-circle d-flex align-self-center mr-2 z-depth-1">
                                <div class="text-small">
                                    <strong>Danny Smith</strong>
                                    <p class="last-message text-muted">Lorem ipsum dolor sit.</p>
                                </div>
                                <div class="chat-footer">
                                    <p class="text-smaller text-muted mb-0">5 min ago</p>
                                    <span class="text-muted float-right"><mdb-icon fas icon="reply" aria-hidden="true"></mdb-icon></span>
                                </div>
                            </a>
                        </li>
                        <li class="p-2">
                            <a href="#" class="d-flex justify-content-between">
                                <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-2.jpg" alt="avatar" class="avatar rounded-circle d-flex align-self-center mr-2 z-depth-1">
                                <div class="text-small">
                                    <strong>Alex Steward</strong>
                                    <p class="last-message text-muted">Lorem ipsum dolor sit.</p>
                                </div>
                                <div class="chat-footer">
                                    <p class="text-smaller text-muted mb-0">Yesterday</p>
                                    <span class="text-muted float-right"><mdb-icon fas icon="reply" aria-hidden="true"></mdb-icon></span>
                                </div>
                            </a>
                        </li>
                        <li class="p-2">
                            <a href="#" class="d-flex justify-content-between">
                                <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-3.jpg" alt="avatar" class="avatar rounded-circle d-flex align-self-center mr-2 z-depth-1">
                                <div class="text-small">
                                    <strong>Ashley Olsen</strong>
                                    <p class="last-message text-muted">Lorem ipsum dolor sit.</p>
                                </div>
                                <div class="chat-footer">
                                    <p class="text-smaller text-muted mb-0">Yesterday</p>
                                    <span class="text-muted float-right"><mdb-icon fas icon="reply" aria-hidden="true"></mdb-icon></span>
                                </div>
                            </a>
                        </li>
                        <li class="p-2">
                            <a href="#" class="d-flex justify-content-between">
                                <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-4.jpg" alt="avatar" class="avatar rounded-circle d-flex align-self-center mr-2 z-depth-1">
                                <div class="text-small">
                                    <strong>Kate Moss</strong>
                                    <p class="last-message text-muted">Lorem ipsum dolor sit.</p>
                                </div>
                                <div class="chat-footer">
                                    <p class="text-smaller text-muted mb-0">Yesterday</p>
                                    <span class="text-muted float-right"><mdb-icon fas icon="reply" aria-hidden="true"></mdb-icon></span>
                                </div>
                            </a>
                        </li>
                        <li class="p-2">
                            <a href="#" class="d-flex justify-content-between">
                                <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg" alt="avatar" class="avatar rounded-circle d-flex align-self-center mr-2 z-depth-1">
                                <div class="text-small">
                                    <strong>Lara Croft</strong>
                                    <p class="last-message text-muted">Lorem ipsum dolor sit.</p>
                                </div>
                                <div class="chat-footer">
                                    <p class="text-smaller text-muted mb-0">Yesterday</p>
                                    <span class="text-muted float-right"><mdb-icon fas icon="reply" aria-hidden="true"></mdb-icon></span>
                                </div>
                            </a>
                        </li>
                        <li class="p-2">
                            <a href="#" class="d-flex justify-content-between">
                                <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg" alt="avatar" class="avatar rounded-circle d-flex align-self-center mr-2 z-depth-1">
                                <div class="text-small">
                                    <strong>Brad Pitt</strong>
                                    <p class="last-message text-muted">Lorem ipsum dolor sit.</p>
                                </div>
                                <div class="chat-footer">
                                    <p class="text-smaller text-muted mb-0">5 min ago</p>
                                    <span class="text-muted float-right"><mdb-icon fas icon="check" aria-hidden="true"></mdb-icon></span>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>

            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col-md-6 col-xl-8 pl-md-3 px-lg-auto px-0">

                <div class="chat-message">

                    <ul class="list-unstyled chat">
                        <li class="d-flex justify-content-between mb-4">
                            <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg" alt="avatar" class="avatar rounded-circle d-flex align-self-start mr-2 z-depth-1">
                            <div class="chat-body white p-3 ml-2 z-depth-1">
                                <div class="header">
                                    <strong class="primary-font">Brad Pitt</strong>
                                    <small class="pull-right text-muted"><mdb-icon far icon="clock"></mdb-icon> 12 mins ago</small>
                                </div>
                                <hr class="w-100">
                                <p class="mb-0">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                                </p>
                            </div>
                        </li>
                        <li class="d-flex justify-content-between mb-4">
                            <div class="chat-body white p-3 z-depth-1">
                                <div class="header">
                                    <strong class="primary-font">Lara Croft</strong>
                                    <small class="pull-right text-muted"><mdb-icon far icon="clock"></mdb-icon> 13 mins ago</small>
                                </div>
                                <hr class="w-100">
                                <p class="mb-0">
                                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
                                </p>
                            </div>
                            <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg" alt="avatar" class="avatar rounded-circle d-flex align-self-start ml-2 z-depth-1">
                        </li>
                        <li class="d-flex justify-content-between mb-4 pb-3">
                            <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg" alt="avatar" class="avatar rounded-circle d-flex align-self-start mr-2 z-depth-1">
                            <div class="chat-body white p-3 ml-2 z-depth-1">
                                <div class="header">
                                    <strong class="primary-font">Brad Pitt</strong>
                                    <small class="pull-right text-muted"><mdb-icon far icon="clock"></mdb-icon> 12 mins ago</small>
                                </div>
                                <hr class="w-100">
                                <p class="mb-0">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                                </p>
                            </div>
                        </li>
                        <li class="white">
                            <div class="form-group basic-textarea">
                                <textarea class="form-control pl-2 my-0" id="exampleFormControlTextarea2" rows="3" placeholder="Type your message here..."></textarea>
                            </div>
                        </li>
                        <button type="button" mdbBtn color="info" rounded="true" size="sm" class="waves-effect waves-light float-right">Send</button>
                    </ul>

                </div>

            </div>
            <!-- Grid column -->

        </div>
        <!-- Grid row -->

    </mdb-card-body>
</mdb-card>
                


.basic-textarea textarea.bas  {
    height: auto;
}

.card.chat-room .friend-list li {
  border-bottom: 1px solid #e0e0e0; }
  .card.chat-room .friend-list li:last-of-type {
    border-bottom: none; }

.card.chat-room img.rounded-circle {
  border-radius: 50%; }

.card.chat-room img.avatar {
  height: 3rem;
  width: 3rem; }

.card.chat-room .text-small {
  font-size: 0.95rem; }

.card.chat-room .text-smaller {
  font-size: 0.75rem; }
                

Small chat MDB Pro component

avatar

John Smith

Active now

Generic placeholder image

You're friends on Facebook

Web Designer at MDBootstrap

Lives in Paris

Lorem ipsum dolor sit amet consectetur adipisicing elit voluptatem cum eum tempore.

Rem suscipit lorum repellendus ditiis?

Nostrum minima cupiditate assumenda, atque cumque hic voluptatibus at corporis maxime quam harum.

avatar

Qui animi molestiae autem nihil optio recusandae nisi sit ab quo est.

Maxime nostrum ut blanditiis a quod quam, quidem deleniti?


            <!-- Main layout -->
            <main class="mt-n5">
              <div class="container">

                <!-- Grid row -->
                <div class="row d-flex flex-row-reverse">

                  <!-- Grid column -->
                  <div class="col-md-6 mb-4 d-flex flex-row-reverse">

                    <mdb-card class="chat-room small-chat wide" id="myForm">
                      <mdb-card-header class="white d-flex justify-content-between p-2" id="toggle" style="cursor: pointer;">
                        <div class="heading d-flex justify-content-start">
                          <div class="profile-photo">
                            <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg" alt="avatar"
                                 class="avatar rounded-circle mr-2 ml-0">
                            <span class="state"></span>
                          </div>
                          <div class="data">
                            <p class="name mb-0"><strong>John Smith</strong></p>
                            <p class="activity text-muted mb-0">Active now</p>
                          </div>
                        </div>
                        <div class="icons grey-text">
                          <a class="feature">
                            <mdb-icon fas icon="video" class="mr-2"></mdb-icon>
                          </a>
                          <a class="feature">
                            <mdb-icon fas icon="phone" class="mr-2"></mdb-icon>
                          </a>
                          <a class="feature">
                            <mdb-icon fas icon="cog" class="mr-2"></mdb-icon>
                          </a>
                          <a type="button" id="closeButton">
                            <mdb-icon fas icon="times" class="mr-2"></mdb-icon>
                          </a>
                        </div>
                      </mdb-card-header>
                      <div class="my-custom-scrollbar">
                        <mdb-card-body class="p-3">
                          <div class="chat-message">
                            <div class="media mb-3">
                              <img class="d-flex rounded mr-2" src="https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg"
                                   alt="Generic placeholder image">
                              <div class="media-body">
                                <p class="my-0">You're friends on Facebook</p>
                                <p class="mb-0 text-muted">Web Designer at MDBootstrap</p>
                                <p class="mb-0 text-muted">Lives in Paris</p>
                              </div>
                            </div>
                            <mdb-card bgColor="bg-primary" class="rounded w-75 float-right z-depth-0 mb-1">
                              <mdb-card-body class="p-2">
                                <mdb-card-text class="text-white">Lorem ipsum dolor sit amet consectetur adipisicing elit voluptatem
                                  cum eum tempore.
                                </mdb-card-text>
                              </mdb-card-body>
                            </mdb-card>
                            <mdb-card bgColor="bg-primary" class="rounded w-50 float-right z-depth-0 mb-2">
                              <mdb-card-body class="p-2">
                                <mdb-card-text class="text-white">Rem suscipit lorum repellendus ditiis?</mdb-card-text>
                              </mdb-card-body>
                            </mdb-card>
                            <mdb-card bgColor="bg-light" class="rounded w-75 z-depth-0 mb-2 message-text">
                              <mdb-card-body class="p-2">
                                <mdb-card-text class="black-text">Nostrum minima cupiditate assumenda, atque cumque hic voluptatibus
                                  at corporis maxime quam harum.
                                </mdb-card-text>
                              </mdb-card-body>
                            </mdb-card>
                            <div class="d-flex justify-content-start">
                              <div class="profile-photo message-photo">
                                <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg" alt="avatar"
                                     class="avatar rounded-circle mr-2 ml-0">
                                <span class="state"></span>
                              </div>
                              <mdb-card bgColor="bg-light" class="rounded w-75 z-depth-0 mb-2">
                                <mdb-card-body class="p-2">
                                  <mdb-card-text class="black-text">Qui animi molestiae autem nihil optio recusandae nisi sit ab quo
                                    est.
                                  </mdb-card-text>
                                </mdb-card-body>
                              </mdb-card>
                            </div>
                            <mdb-card bgColor="bg-primary" class="rounded w-75 float-right z-depth-0 mb-2">
                              <mdb-card-body class="p-2">
                                <mdb-card-text class="text-white">Maxime nostrum ut blanditiis a quod quam, quidem deleniti?
                                </mdb-card-text>
                              </mdb-card-body>
                            </mdb-card>
                          </div>
                        </mdb-card-body>
                      </div>
                      <mdb-card-footer class="text-muted white pt-1 pb-2 px-3">
                        <input type="text" id="exampleForm2" class="form-control" placeholder="Type a message...">
                        <div>
                          <a>
                            <mdb-icon far icon="file-image" class="mr-2"></mdb-icon>
                          </a>
                          <a>
                            <mdb-icon far icon="laugh" class="mr-2"></mdb-icon>
                          </a>
                          <a>
                            <mdb-icon fas icon="gamepad" class="mr-2"></mdb-icon>
                          </a>
                          <a>
                            <mdb-icon fas icon="paperclip" class="mr-2"></mdb-icon>
                          </a>
                          <a>
                            <mdb-icon fas icon="camera" class="mr-2"></mdb-icon>
                          </a>
                          <a>
                            <mdb-icon fas icon="thumbs-up" class="float-right"></mdb-icon>
                          </a>
                        </div>
                      </mdb-card-footer>

                    </mdb-card>

                  </div>
                  <!-- Grid column -->

                </div>
                <!-- Grid row -->

              </div>
            </main>

          


            .chat-room.small-chat {
              position: fixed;
              bottom: 0;
              -webkit-border-bottom-left-radius: 0;
              border-bottom-left-radius: 0;
              -webkit-border-bottom-right-radius: 0;
              border-bottom-right-radius: 0;
              width: 20rem;
            }

            .chat-room.small-chat.slim {
              height: 3rem;
            }

            .chat-room.small-chat.slim .icons .feature {
              display: none;
            }

            .chat-room.small-chat .profile-photo img.avatar {
              height: 2rem;
              width: 2rem;
            }

            .chat-room.small-chat .profile-photo .state {
              position: relative;
              display: block;
              background-color: #007E33;
              height: .65rem;
              width: .65rem;
              z-index: 2;
              margin-left: 1.35rem;
              left: auto;
              top: -.5rem;
              -webkit-border-radius: 50%;
              border-radius: 50%;
              border: .1rem solid #fff;
            }

            .chat-room.small-chat .profile-photo.message-photo {
              margin-top: 2.7rem;
            }

            .chat-room.small-chat .heading {
              height: 2.1rem;
            }

            .chat-room.small-chat .heading .data {
              line-height: 1.5;
            }

            .chat-room.small-chat .heading .data .name {
              font-size: .8rem;
            }

            .chat-room.small-chat .heading .data .activity {
              font-size: .75rem;
            }

            .chat-room.small-chat .icons {
              padding-top: .45rem;
            }

            .chat-room.small-chat .my-custom-scrollbar {
              position: relative;
              height: 18rem;
              overflow: auto;
            }

            .chat-room.small-chat .my-custom-scrollbar > .card-body {
              height: 18rem;
            }

            .chat-room.small-chat .my-custom-scrollbar > .card-body .chat-message .media img {
              width: 3rem;
            }

            .chat-room.small-chat .my-custom-scrollbar > .card-body .chat-message .media .media-body p {
              font-size: .7rem;
            }

            .chat-room.small-chat .my-custom-scrollbar > .card-body .chat-message .message-text {
              margin-left: 2.47rem;
            }

            .chat-room.small-chat .card-footer .form-control {
              border: none;
              padding: .375rem 0 .43rem 0;
              font-size: .9rem;
            }

            .chat-room.small-chat .card-footer .form-control:focus {
              -webkit-box-shadow: none;
              box-shadow: none;
            }
          

Colorful background chat MDB Pro component

  • avatar
    Brad Pitt 12 mins ago

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • Lara Croft 13 mins ago

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

    avatar
  • avatar
    Brad Pitt 12 mins ago

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


<mdb-card class="chat-room">
  <mdb-card-body class="purple lighten-4">

    <!-- Grid row -->
    <div class="row px-2">

      <!-- Grid column -->
      <div class="col-md-6 col-xl-8 pr-md-4 px-lg-auto px-0">

        <div class="chat-message">

          <ul class="list-unstyled chat">
            <li class="d-flex justify-content-between mb-4">
              <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg" alt="avatar" class="avatar rounded-circle mr-2 ml-0 z-depth-1">
              <div class="chat-body white p-3 ml-2 z-depth-1">
                <div class="header">
                  <strong class="primary-font">Brad Pitt</strong>
                  <small class="pull-right text-muted"><mdb-icon far icon="clock"></mdb-icon> 12 mins ago</small>
                </div>
                <hr class="w-100">
                <p class="mb-0">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
                  et dolore magna aliqua.
                </p>
              </div>
            </li>
            <li class="d-flex justify-content-between mb-4">
              <div class="chat-body white p-3 z-depth-1">
                <div class="header">
                  <strong class="primary-font">Lara Croft</strong>
                  <small class="pull-right text-muted"><mdb-icon far icon="clock"></mdb-icon> 13 mins ago</small>
                </div>
                <hr class="w-100">
                <p class="mb-0">
                  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
                </p>
              </div>
              <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg" alt="avatar" class="avatar rounded-circle mr-0 ml-3 z-depth-1">
            </li>
            <li class="d-flex justify-content-between mb-4 pb-3">
              <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg" alt="avatar" class="avatar rounded-circle mr-2 ml-0 z-depth-1">
              <div class="chat-body white p-3 ml-2 z-depth-1">
                <div class="header">
                  <strong class="primary-font">Brad Pitt</strong>
                  <small class="pull-right text-muted"><mdb-icon far icon="clock"></mdb-icon> 12 mins ago</small>
                </div>
                <hr class="w-100">
                <p class="mb-0">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
                  et dolore magna aliqua.
                </p>
              </div>
            </li>
            <li class="white">
              <div class="form-group basic-textarea">
                <textarea class="form-control pl-2 my-0" id="exampleFormControlTextarea2" rows="3" placeholder="Type your message here..."></textarea>
              </div>
            </li>
            <button type="button" mdbBtn color="deep-purple" rounded="true" size="sm" class="waves-effect waves-light float-right">Send</button>
          </ul>

        </div>

      </div>
      <!-- Grid column -->

      <!-- Grid column -->
      <div class="col-md-6 col-xl-4 px-0">

        <h6 class="font-weight-bold mb-3 text-center text-lg-left">Member</h6>
        <div class="white z-depth-1 px-3 pt-3 pb-0">
          <ul class="list-unstyled friend-list">
            <li class="active grey lighten-3 p-2">
              <a href="#" class="d-flex justify-content-between">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-8.jpg" alt="avatar" class="avatar rounded-circle d-flex align-self-center mr-2 z-depth-1">
                <div class="text-small">
                  <strong>John Doe</strong>
                  <p class="last-message text-muted">Hello, Are you there?</p>
                </div>
                <div class="chat-footer">
                  <p class="text-smaller text-muted mb-0">Just now</p>
                  <mdb-badge danger="true" class="float-right">1</mdb-badge>
                </div>
              </a>
            </li>
            <li class="p-2">
              <a href="#" class="d-flex justify-content-between">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-1.jpg" alt="avatar" class="avatar rounded-circle d-flex align-self-center mr-2 z-depth-1">
                <div class="text-small">
                  <strong>Danny Smith</strong>
                  <p class="last-message text-muted">Lorem ipsum dolor sit.</p>
                </div>
                <div class="chat-footer">
                  <p class="text-smaller text-muted mb-0">5 min ago</p>
                  <span class="text-muted float-right"><mdb-icon fas icon="reply" aria-hidden="true"></mdb-icon></span>
                </div>
              </a>
            </li>
            <li class="p-2">
              <a href="#" class="d-flex justify-content-between">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-2.jpg" alt="avatar" class="avatar rounded-circle d-flex align-self-center mr-2 z-depth-1">
                <div class="text-small">
                  <strong>Alex Steward</strong>
                  <p class="last-message text-muted">Lorem ipsum dolor sit.</p>
                </div>
                <div class="chat-footer">
                  <p class="text-smaller text-muted mb-0">Yesterday</p>
                  <span class="text-muted float-right"><mdb-icon fas icon="reply" aria-hidden="true"></mdb-icon></i></span>
                </div>
              </a>
            </li>
            <li class="p-2">
              <a href="#" class="d-flex justify-content-between">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-3.jpg" alt="avatar" class="avatar rounded-circle d-flex align-self-center mr-2 z-depth-1">
                <div class="text-small">
                  <strong>Ashley Olsen</strong>
                  <p class="last-message text-muted">Lorem ipsum dolor sit.</p>
                </div>
                <div class="chat-footer">
                  <p class="text-smaller text-muted mb-0">Yesterday</p>
                  <span class="text-muted float-right"><mdb-icon fas icon="reply" aria-hidden="true"></mdb-icon></span>
                </div>
              </a>
            </li>
            <li class="p-2">
              <a href="#" class="d-flex justify-content-between">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-4.jpg" alt="avatar" class="avatar rounded-circle d-flex align-self-center mr-2 z-depth-1">
                <div class="text-small">
                  <strong>Kate Moss</strong>
                  <p class="last-message text-muted">Lorem ipsum dolor sit.</p>
                </div>
                <div class="chat-footer">
                  <p class="text-smaller text-muted mb-0">Yesterday</p>
                  <span class="text-muted float-right"><mdb-icon fas icon="reply" aria-hidden="true"></mdb-icon></span>
                </div>
              </a>
            </li>
            <li class="p-2">
              <a href="#" class="d-flex justify-content-between">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg" alt="avatar" class="avatar rounded-circle d-flex align-self-center mr-2 z-depth-1">
                <div class="text-small">
                  <strong>Lara Croft</strong>
                  <p class="last-message text-muted">Lorem ipsum dolor sit.</p>
                </div>
                <div class="chat-footer">
                  <p class="text-smaller text-muted mb-0">Yesterday</p>
                  <span class="text-muted float-right"><mdb-icon fas icon="reply" aria-hidden="true"></mdb-icon></span>
                </div>
              </a>
            </li>
            <li class="p-2">
              <a href="#" class="d-flex justify-content-between">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg" alt="avatar" class="avatar rounded-circle d-flex align-self-center mr-2 z-depth-1">
                <div class="text-small">
                  <strong>Brad Pitt</strong>
                  <p class="last-message text-muted">Lorem ipsum dolor sit.</p>
                </div>
                <div class="chat-footer">
                  <p class="text-smaller text-muted mb-0">5 min ago</p>
                  <span class="text-muted float-right"><mdb-icon fas icon="check" aria-hidden="true"></mdb-icon></span>
                </div>
              </a>
            </li>
          </ul>
        </div>

      </div>
      <!-- Grid column -->

    </div>
    <!-- Grid row -->

  </mdb-card-body>
</mdb-card>
                

.card.chat-room .friend-list li {
  border-bottom: 1px solid #e0e0e0;
}

.card.chat-room .friend-list li:last-of-type {
  border-bottom: none;
}

.card.chat-room img.rounded-circle {
  border-radius: 50%;
}

.card.chat-room img.avatar {
  height: 3rem;
  width: 3rem;
}

.card.chat-room .text-small {
  font-size: 0.95rem;
}

.card.chat-room .text-smaller {
  font-size: 0.75rem;
}
                

Gradient chat with scrollbar MDB Pro component

  • avatar
    Brad Pitt 12 mins ago

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • Lara Croft 13 mins ago

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

    avatar
  • avatar
    Brad Pitt 12 mins ago

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • Lara Croft 13 mins ago

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

    avatar
  • avatar
    Brad Pitt 12 mins ago

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


<mdb-card class="chat-room">
  <mdb-card-body class="rare-wind-gradient">

    <!-- Grid row -->
    <div class="row px-lg-2 px-2">

      <!-- Grid column -->
      <div class="col-md-6 col-xl-4 px-0">

        <h6 class="font-weight-bold mb-3 text-center text-lg-left">Member</h6>
        <div class="white z-depth-1 px-2 pt-3 pb-0 members-panel-1 scrollbar-light-blue">
          <ul class="list-unstyled friend-list">
            <li class="active grey lighten-3 p-2">
              <a href="#" class="d-flex justify-content-between">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-8.jpg" alt="avatar" class="avatar rounded-circle d-flex align-self-center mr-2 z-depth-1">
                <div class="text-small">
                  <strong>John Doe</strong>
                  <p class="last-message text-muted">Hello, Are you there?</p>
                </div>
                <div class="chat-footer">
                  <p class="text-smaller text-muted mb-0">Just now</p>
                  <mdb-badge danger="true" class="float-right">1</mdb-badge>
                </div>
              </a>
            </li>
            <li class="p-2">
              <a href="#" class="d-flex justify-content-between">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-1.jpg" alt="avatar" class="avatar rounded-circle d-flex align-self-center mr-2 z-depth-1">
                <div class="text-small">
                  <strong>Danny Smith</strong>
                  <p class="last-message text-muted">Lorem ipsum dolor sit.</p>
                </div>
                <div class="chat-footer">
                  <p class="text-smaller text-muted mb-0">5 min ago</p>
                  <span class="text-muted float-right"><mdb-icon fas icon="reply" aria-hidden="true"></mdb-icon></span>
                </div>
              </a>
            </li>
            <li class="p-2">
              <a href="#" class="d-flex justify-content-between">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-2.jpg" alt="avatar" class="avatar rounded-circle d-flex align-self-center mr-2 z-depth-1">
                <div class="text-small">
                  <strong>Alex Steward</strong>
                  <p class="last-message text-muted">Lorem ipsum dolor sit.</p>
                </div>
                <div class="chat-footer">
                  <p class="text-smaller text-muted mb-0">Yesterday</p>
                  <span class="text-muted float-right"><mdb-icon fas icon="reply" aria-hidden="true"></mdb-icon></span>
                </div>
              </a>
            </li>
            <li class="p-2">
              <a href="#" class="d-flex justify-content-between">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-3.jpg" alt="avatar" class="avatar rounded-circle d-flex align-self-center mr-2 z-depth-1">
                <div class="text-small">
                  <strong>Ashley Olsen</strong>
                  <p class="last-message text-muted">Lorem ipsum dolor sit.</p>
                </div>
                <div class="chat-footer">
                  <p class="text-smaller text-muted mb-0">Yesterday</p>
                  <span class="text-muted float-right"><mdb-icon fas icon="reply" aria-hidden="true"></mdb-icon></span>
                </div>
              </a>
            </li>
            <li class="p-2">
              <a href="#" class="d-flex justify-content-between">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-4.jpg" alt="avatar" class="avatar rounded-circle d-flex align-self-center mr-2 z-depth-1">
                <div class="text-small">
                  <strong>Kate Moss</strong>
                  <p class="last-message text-muted">Lorem ipsum dolor sit.</p>
                </div>
                <div class="chat-footer">
                  <p class="text-smaller text-muted mb-0">Yesterday</p>
                  <span class="text-muted float-right"><mdb-icon fas icon="reply" aria-hidden="true"></mdb-icon></span>
                </div>
              </a>
            </li>
            <li class="p-2">
              <a href="#" class="d-flex justify-content-between">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg" alt="avatar" class="avatar rounded-circle d-flex align-self-center mr-2 z-depth-1">
                <div class="text-small">
                  <strong>Lara Croft</strong>
                  <p class="last-message text-muted">Lorem ipsum dolor sit.</p>
                </div>
                <div class="chat-footer">
                  <p class="text-smaller text-muted mb-0">Yesterday</p>
                  <span class="text-muted float-right"><mdb-icon fas icon="reply" aria-hidden="true"></mdb-icon></span>
                </div>
              </a>
            </li>
            <li class="p-2">
              <a href="#" class="d-flex justify-content-between">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg" alt="avatar" class="avatar rounded-circle d-flex align-self-center mr-2 z-depth-1">
                <div class="text-small">
                  <strong>Brad Pitt</strong>
                  <p class="last-message text-muted">Lorem ipsum dolor sit.</p>
                </div>
                <div class="chat-footer">
                  <p class="text-smaller text-muted mb-0">5 min ago</p>
                  <span class="text-muted float-right"><mdb-icon fas icon="check" aria-hidden="true"></mdb-icon></span>
                </div>
              </a>
            </li>
            <li class="p-2">
              <a href="#" class="d-flex justify-content-between">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img(3).jpg" alt="avatar" class="avatar rounded-circle d-flex align-self-center mr-2 z-depth-1">
                <div class="text-small">
                  <strong>Ken Ditto</strong>
                  <p class="last-message text-muted">Lorem ipsum dolor sit.</p>
                </div>
                <div class="chat-footer">
                  <p class="text-smaller text-muted mb-0">Yesterday</p>
                  <span class="text-muted float-right"><mdb-icon fas icon="reply" aria-hidden="true"></mdb-icon></span>
                </div>
              </a>
            </li>
            <li class="p-2">
              <a href="#" class="d-flex justify-content-between">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img(2).jpg" alt="avatar" class="avatar rounded-circle d-flex align-self-center mr-2 z-depth-1">
                <div class="text-small">
                  <strong>Marta Wozniak</strong>
                  <p class="last-message text-muted">Lorem ipsum dolor sit.</p>
                </div>
                <div class="chat-footer">
                  <p class="text-smaller text-muted mb-0">Yesterday</p>
                  <span class="text-muted float-right"><mdb-icon fas icon="reply" aria-hidden="true"></mdb-icon></span>
                </div>
              </a>
            </li>
          </ul>
        </div>

      </div>
      <!-- Grid column -->

      <!-- Grid column -->
      <div class="col-md-6 col-xl-8 pl-md-3 px-lg-auto px-0">

        <div class="chat-message">

          <ul class="list-unstyled chat-1 scrollbar-light-blue">
            <li class="d-flex justify-content-between mb-4">
              <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg" alt="avatar" class="avatar rounded-circle mr-2 ml-lg-3 ml-0 z-depth-1">
              <div class="chat-body white p-3 ml-2 z-depth-1">
                <div class="header">
                  <strong class="primary-font">Brad Pitt</strong>
                  <small class="pull-right text-muted"><mdb-icon far icon="clock"></mdb-icon> 12 mins ago</small>
                </div>
                <hr class="w-100">
                <p class="mb-0">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
                  et dolore magna aliqua.
                </p>
              </div>
            </li>
            <li class="d-flex justify-content-between mb-4">
              <div class="chat-body white p-3 z-depth-1">
                <div class="header">
                  <strong class="primary-font">Lara Croft</strong>
                  <small class="pull-right text-muted"><mdb-icon far icon="clock"></mdb-icon> 13 mins ago</small>
                </div>
                <hr class="w-100">
                <p class="mb-0">
                  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
                </p>
              </div>
              <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg" alt="avatar" class="avatar rounded-circle mr-0 ml-3 z-depth-1">
            </li>
            <li class="d-flex justify-content-between mb-4">
              <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg" alt="avatar" class="avatar rounded-circle mr-2 ml-lg-3 ml-0 z-depth-1">
              <div class="chat-body white p-3 ml-2 z-depth-1">
                <div class="header">
                  <strong class="primary-font">Brad Pitt</strong>
                  <small class="pull-right text-muted"><mdb-icon far icon="clock"></mdb-icon> 12 mins ago</small>
                </div>
                <hr class="w-100">
                <p class="mb-0">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
                  et dolore magna aliqua.
                </p>
              </div>
            </li>
            <li class="d-flex justify-content-between mb-4">
              <div class="chat-body white p-3 z-depth-1">
                <div class="header">
                  <strong class="primary-font">Lara Croft</strong>
                  <small class="pull-right text-muted"><mdb-icon far icon="clock"></mdb-icon> 13 mins ago</small>
                </div>
                <hr class="w-100">
                <p class="mb-0">
                  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
                </p>
              </div>
              <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg" alt="avatar" class="avatar rounded-circle mr-0 ml-3 z-depth-1">
            </li>
            <li class="d-flex justify-content-between mb-4 pb-3">
              <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg" alt="avatar" class="avatar rounded-circle mr-2 ml-lg-3 ml-0 z-depth-1">
              <div class="chat-body white p-3 ml-2 z-depth-1">
                <div class="header">
                  <strong class="primary-font">Brad Pitt</strong>
                  <small class="pull-right text-muted"><mdb-icon far icon="clock"></mdb-icon> 12 mins ago</small>
                </div>
                <hr class="w-100">
                <p class="mb-0">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
                  et dolore magna aliqua.
                </p>
              </div>
            </li>
          </ul>
          <div class="white">
            <div class="form-group basic-textarea">
              <textarea class="form-control pl-2 my-0" id="exampleFormControlTextarea2" rows="3" placeholder="Type your message here..."></textarea>
            </div>
          </div>
          <button type="button" mdbBtn color="pink" outline="true" rounded="true" size="sm" class="waves-effect waves-dark float-right">Send</button>

        </div>

      </div>
      <!-- Grid column -->

    </div>
    <!-- Grid row -->

  </mdb-card-body>
</mdb-card>
                

.card.chat-room .members-panel-1,
.card.chat-room .chat-1 {
  position: relative;
  overflow-y: scroll;
}

.card.chat-room .members-panel-1 {
  height: 570px;
}

.card.chat-room .chat-1 {
  height: 495px;
}

.card.chat-room .friend-list li {
  border-bottom: 1px solid #e0e0e0;
}

.card.chat-room .friend-list li:last-of-type {
  border-bottom: none;
}

.card.chat-room img.rounded-circle {
  border-radius: 50%;
}

.card.chat-room img.avatar {
  height: 3rem;
  width: 3rem;
}

.card.chat-room .text-small {
  font-size: 0.95rem;
}

.card.chat-room .text-smaller {
  font-size: 0.75rem;
}

.scrollbar-light-blue::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #F5F5F5;
  border-radius: 10px;
}

.scrollbar-light-blue::-webkit-scrollbar {
  width: 12px;
  background-color: #F5F5F5;
}

.scrollbar-light-blue::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #82B1FF;
}

.rare-wind-gradient {
  background-image: -webkit-gradient(linear, left bottom, left top, from(#a8edea), to(#fed6e3));
  background-image: -webkit-linear-gradient(bottom, #a8edea 0%, #fed6e3 100%);
  background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
}

                

Angular Chat - API

In this section you will find informations about required modules for chat component.


Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.

// MDB Angular Pro
import { WavesModule, CardsFreeModule } from 'ng-uikit-pro-standard'
// MDB Angular Free
import { WavesModule, CardsFreeModule } from 'angular-bootstrap-md'