src/app/chat/chat.component.ts
| providers |
ChatService
|
| selector | app-chat |
| styleUrls | ./chat.component.css |
| templateUrl | ./chat.component.html |
Properties |
Methods |
|
constructor(chatService: ChatService, _ngZone: NgZone, toastr: ToastrService)
|
||||||||||||
|
Defined in src/app/chat/chat.component.ts:29
|
||||||||||||
|
Parameters :
|
| ngOnInit |
ngOnInit()
|
|
Defined in src/app/chat/chat.component.ts:15
|
|
Returns :
void
|
| sendMessage |
sendMessage()
|
|
Defined in src/app/chat/chat.component.ts:38
|
|
Returns :
void
|
| Private subscribeToEvents |
subscribeToEvents()
|
|
Defined in src/app/chat/chat.component.ts:53
|
|
Returns :
void
|
| message |
Default value : new Message()
|
|
Defined in src/app/chat/chat.component.ts:29
|
| messages |
Default value : new Array<Message>()
|
|
Defined in src/app/chat/chat.component.ts:27
|
| title |
Type : string
|
Default value : 'ClientApp'
|
|
Defined in src/app/chat/chat.component.ts:20
|
| txtMessage |
Type : string
|
Default value : ''
|
|
Defined in src/app/chat/chat.component.ts:23
|
| uniqueID |
Type : string
|
Default value : new Date().getTime().toString()
|
|
Defined in src/app/chat/chat.component.ts:25
|
| username |
Type : string
|
|
Defined in src/app/chat/chat.component.ts:13
|
import { Component, OnInit, NgZone } from '@angular/core';
import { ChatService } from '../services/chat.service';
import { Message } from '../models/message';
import { ToastrService } from 'ngx-toastr';
@Component({
selector: 'app-chat',
templateUrl: './chat.component.html',
styleUrls: ['./chat.component.css'],
providers: [ChatService]
})
export class ChatComponent implements OnInit{
username: string;
ngOnInit() {
this.username = JSON.parse(localStorage.getItem('currentUser')).username;
}
// tslint:disable-next-line: member-ordering
title = 'ClientApp';
// tslint:disable-next-line: no-inferrable-types
// tslint:disable-next-line: member-ordering
txtMessage = '';
// tslint:disable-next-line: member-ordering
uniqueID: string = new Date().getTime().toString();
// tslint:disable-next-line: member-ordering
messages = new Array<Message>();
// tslint:disable-next-line: member-ordering
message = new Message();
constructor(
private chatService: ChatService,
// tslint:disable-next-line: variable-name
private _ngZone: NgZone,
private toastr: ToastrService
) {
this.subscribeToEvents();
}
sendMessage(): void {
if (this.txtMessage) {
this.message = new Message();
this.message.clientuniqueid = this.uniqueID;
this.message.type = 'sent';
this.message.message = this.txtMessage;
this.message.date = new Date();
this.messages.push(this.message);
this.chatService.sendMessage(this.message);
this.txtMessage = '';
}
else if (this.txtMessage === '') {
this.toastr.warning('Type something! :)');
}
}
private subscribeToEvents(): void {
this.chatService.messageReceived.subscribe((message: Message) => {
this._ngZone.run(() => {
if (message.clientuniqueid !== this.uniqueID) {
message.type = 'received';
this.messages.push(message);
}
});
});
}
}
<div class="page-header pb-10 page-header-dark bg-primary">
<div class="container-fluid">
<div class="page-header-content">
<h1 class="page-header-title">
<div class="page-header-icon"><i class="far fa-comments"></i></div>
<span>Chat</span>
</h1>
<div class="page-header-subtitle">Say Hi!</div>
</div>
</div>
</div>
<div class="container-fluid mt-n10">
<div class="card-deck">
<div class="card mb-4">
<div class="card-body">
<h1>ChatBox</h1>
<div class="messaging">
<div class="inbox_msg">
<div class="mesgs">
<div class="msg_history">
<div *ngFor="let msg of messages">
<div class="incoming_msg" *ngIf="msg.type == 'received'">
<div class="incoming_msg_img"> </div>
<div class="received_msg">
<div class="received_withd_msg">
<button class="btn btn-light rounded-pill" id="dropdownFadeIn" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="float: left;">
{{ msg.message }}
</button>
<div class="dropdown-menu animated--fade-in" aria-labelledby="dropdownFadeIn">
<a class="dropdown-item" href="javascript:void(0);">{{ msg.date | date:'medium' }}</a>
</div>
</div>
<br>
<br>
</div>
</div>
<div class="outgoing_msg" *ngIf="msg.type == 'sent'">
<div class="sent_msg">
<button class="btn btn-blue rounded-pill" id="dropdownFadeIn" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="float: right;">
{{ msg.message }}
</button>
<div class="dropdown-menu animated--fade-in" aria-labelledby="dropdownFadeIn">
<a class="dropdown-item" href="javascript:void(0);">{{ msg.date | date:'medium' }}</a>
</div>
</div>
<br>
<br>
</div>
</div>
</div>
<br>
<div class="form-inline">
<div class="form-group mb-2">
<input type="text" class="form-control rounded-0" style="width: 1543px;" [value]="txtMessage"
(input)="txtMessage=$event.target.value" (keydown.enter)="sendMessage()" placeholder="Type a message" />
<button class="btn btn-primary btn-message rounded-0" type="button" (click)="sendMessage()"><i class="far fa-comments"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
./chat.component.css