File
Implements
Metadata
selector |
.messagesBox |
styleUrls |
messages-box.component.css |
templateUrl |
./messages-box.component.html |
Methods
Public ngOnInit
|
ngOnInit()
|
|
|
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 with directive