ngx-admin-lte/src/widgets/messages-box/messages-box.component.html

AdminLTE theme for angular

<!-- Menu toggle button -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i
	class="fa fa-envelope-o"></i> <span class="label label-success"
	[innerHTML]="messages.length"></span>
</a>
<ul class="dropdown-menu">
	<li class="header">{{ 'MSGBOX.COUNT' | translate:msgLength }}</li>
	<li>
		<!-- inner menu: contains the messages -->
		<ul class="menu">
			<li *ngFor="let msg of messages; let i = index">
				<!-- start message --> <a href="#">
					<div class="pull-left">
						<!-- User Image -->
						<img src="{{msg.author.avatarUrl}}" class="img-circle"
							alt="{{ msg.author.getName() }}">
					</div> <!-- Message title and timestamp -->
					<h4>
						{{msg.title}} <small><i class="fa fa-clock-o"></i>
							{{msg.date | date:'yMd' }}</small>
					</h4> <!-- The message -->
					<p>{{msg.content}}</p>
			</a>
			</li>
			<!-- end message -->
		</ul> <!-- /.menu -->
	</li>
	<li class="footer">
    <a href="#">{{ 'MSGBOX.FOOTER' | translate }}</a>
  </li>
</ul>