alfresco-ng2-components/lib/core/notifications/components/notification-history.component.html

<div (keyup)="onKeyPress($event)">
    <button mat-button [matMenuTriggerFor]="menu" class="adf-notification-history-menu_button"
            id="adf-notification-history-open-button">
        <mat-icon>mail_outline</mat-icon>
    </button>
    <mat-menu #menu="matMenu" [xPosition]="menuPositionX" [yPosition]="menuPositionY"
              [overlapTrigger]="false" id="adf-notification-history-menu" class="adf-notification-history-menu">

        <div id="adf-notification-history-list">
            <mat-list>
                <mat-list-item>
                    <h6 mat-line>{{ 'NOTIFICATIONS.TITLE' | translate }}</h6>
                </mat-list-item>
            </mat-list>
            <mat-divider></mat-divider>

            <mat-list>
                <mat-list-item *ngFor="let notification of notifications">
                    <mat-icon mat-list-icon>{{ notification | noticicationIcon }}</mat-icon>
                    <h4 *ngFor="let message of notification.messages" mat-line>{{ message }}</h4>
                    <p mat-line> {{notification.datetime | date}} </p>
                    <p mat-line> {{notification.initiator.displayName | translate}} </p>
                </mat-list-item>
                <mat-list-item *ngIf="isEmptyNotification()" id="adf-notification-history-component-no-message">
                    <h4 mat-line>{{ 'NOTIFICATIONS.NO_MESSAGE' | translate }}</h4>
                </mat-list-item>
                <mat-action-list *ngIf="!isEmptyNotification()" id="adf-notification-history-mark-as-read">
                    <button mat-list-item (click)="markAsRead()">{{ 'NOTIFICATIONS.MARK_AS_READ' | translate }}
                    </button>
                </mat-action-list>
            </mat-list>
        </div>
    </mat-menu>
</div>