File

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

Implements

OnInit

Metadata

selector .messagesBox
styleUrls messages-box.component.css
templateUrl ./messages-box.component.html

Index

Properties
Methods

Constructor

constructor(msgServ: MessagesService, logger: LoggerService)
Parameters :
Name Type Optional Description
msgServ MessagesService
logger LoggerService

Methods

Public ngOnInit
ngOnInit()
Returns : void

Properties

Public messages
messages: Message[]
Type : Message[]
msgLength
msgLength:
import { Component, OnInit, Input } from '@angular/core';
import { Http } from '@angular/http';
import { TranslateService } from '@ngx-translate/core';
import { MessagesService } from '../../services/messages.service';
import { LoggerService } from '../../services/logger.service';
import { Message } from '../../models/message';

@Component( {
    /* tslint:disable */
    selector: '.messagesBox',
    /* tslint:enable */
    styleUrls: ['./messages-box.component.css'],
    templateUrl: './messages-box.component.html'
})
export class MessagesBoxComponent implements OnInit {
    // Declaring the variable for binding with initial value
    public messages: Message[];
    msgLength = { 0: 0 };

    constructor( private msgServ: MessagesService, private logger: LoggerService ) {
        this.messages = [];
    }

    public ngOnInit() {
        // Every incoming message changes entire local message Array.
        this.msgServ.messages.subscribe(( msg: Message[] ) => {
            this.logger.log( 'MsgBox', null, 'RECEIVED.MESSAGE', null );
            this.messages = msg;
            this.msgLength = { 0: this.messages.length };
        });
    }
}
<!-- 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>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""