File

src/widgets/notification-box/notification-box.component.ts

Implements

OnInit

Metadata

selector .notificationsBox
styleUrls notification-box.component.css
templateUrl ./notification-box.component.html

Index

Properties
Methods

Constructor

constructor(notifServ: NotificationsService, logger: LoggerService)
Parameters :
Name Type Optional Description
notifServ NotificationsService
logger LoggerService

Methods

Public ngOnInit
ngOnInit()
Returns : void

Properties

Public notifications
notifications: Notification[]
Type : Notification[]
notifLength
notifLength:
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
Component
Html element with directive

results matching ""

    No results matching ""