File
Implements
Metadata
selector |
.notificationsBox |
styleUrls |
notification-box.component.css |
templateUrl |
./notification-box.component.html |
Methods
Public ngOnInit
|
ngOnInit()
|
|
|
import { Component, OnInit } from '@angular/core';
import { Notification } from '../../models/notification';
import { NotificationsService } from '../../services/notifications.service';
import { Http } from '@angular/http';
import { TranslateService } from '@ngx-translate/core';
import { LoggerService } from '../../services/logger.service';
@Component( {
/* tslint:disable */
selector: '.notificationsBox',
/* tslint:enable */
styleUrls: ['./notification-box.component.css'],
templateUrl: './notification-box.component.html'
})
export class NotificationBoxComponent implements OnInit {
public notifications: Notification[];
notifLength = { 0: 0 };
constructor( private notifServ: NotificationsService, private logger: LoggerService ) {
this.notifications = [];
}
public ngOnInit() {
// Every incoming notification changes entire local notification Array.
this.notifServ.notifications.subscribe(( notif: Notification[] ) => {
this.logger.log( 'NotificationBox', null, 'RECEIVED.NOTIFICATION', null );
this.notifications = notif;
this.notifLength = { 0: this.notifications.length };
});
}
}
<!-- Menu toggle button -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bell-o"></i>
<span class="label label-warning">{{ notifications.length }}</span>
</a>
<ul class="dropdown-menu">
<li class="header">{{ 'NOTIFBOX.COUNT' | translate:notifLength }}</li>
<li>
<!-- Inner Menu: contains the notifications -->
<ul class="menu">
<li *ngFor="let notif of notifications.reverse(); let i = index">
<a routerLink="{{notif.link}}">
<i class="{{notif.class}}"></i> {{notif.content}}
</a>
</li>
<!-- end notification -->
</ul>
</li>
<li class="footer">
<a href="#">
{{ 'NOTIFBOX.FOOTER' | translate }}
</a>
</li>
</ul>
Legend
Html element with directive