# All files / src/lib/components/chat chat.component.ts

65.11% Statements 28/43
38.88% Branches 14/36
56.25% Functions 9/16
62.16% Lines 23/37

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    891x
    1x
    1x
    1x
    1x

    1x

    1x
    1x

    1x
    1x

    1x
    1x

    1x
    1x

    1x
    1x
    1x

    1x
    1x
    1x

    1x

    1x

    1x

     import { Component, ElementRef, HostListener, Input, OnInit, ViewChild } from '@angular/core';
    import { Subscription } from 'rxjs';
    impoIrt { ChatMessage } from '../../models/chat.model';
    import { ChatService } from '../../services/chat/chat.service';

    @Component({
    	selector: 'ov-chat',
    	templateUrl: './chat.component.html',
    	styleUrls: ['./chat.component.css']
    })
    export class ChatComponent implements OnInit {
    	@ViewChild('chatScroll') chatScroll: ElementRef;
    	@ViewChild('chatInput') chatInput: ElementRef;
    	message: string;
    	messageList: ChatMessage[] = [];
    	isChatOpened: boolean;

    	private chatMessageSubscription: Subscription;
    	private chatToggleSubscription: Subscription;

    	constructor(private chatService: ChatService) {}

    	@HostListener('document:keydown.escape', ['$event'])
    	onKeydownHandler(event: KeyboardEvent) {
    		if (this.isChatOpened) {
    			this.close();
    		}
    	}

    	ngOnInit() {
    		this.subscribeToMessages();
    		this.subscribeToToggleChat();
    	}

    	ngOnDestroy(): void {
    		if (this.chatMessageSubscription) {
    			this.chatMessageSubscription.unsubscribe();
    		}
    		if (this.chatToggleSubscription) {
    			this.chatToggleSubscription.unsubscribe();
    		}
    	}

    	eventKeyPress(event) {
    		// Pressed 'Enter' key
    		if (event && event.keyCode === 13) {
    			this.sendMessage();
    		}
    	}

    	sendMessage(): void {
    		this.chatService.sendMessage(this.message);
    		this.message = '';
    	}

    	scrollToBottom(): void {
    		setTimeoutI(() => {
    			try {
    				this.chatScroll.nativeElement.scrollTop = this.chatScroll.nativeElement.scrollHeight;
    			} catch (err) {}
    		}, 20);
    	}

    	close() {
    		this.chatSIervice.toggleChat();
    	}

    	private subscribeToMessages() {
    		this.chatMessageSubscription = this.chatService.messagesObs.subscribe((messages: ChatMessage[]) => {
    			this.messageList = messages;
    			if (this.isChatOpened) {
    				this.scrollToBottom();
    			}
    		});
    	}

    	private subscribeToToggleChat() {
    		this.chatToggleSubscription = this.chatService.toggleChatObs.subscribe((opened) => {
    			this.isChatOpened = opened;
    			if (this.isChatOpened) {
    				this.scrollToBottom();
    				setTimeout(() => {
    					this.chatInput.nativeElement.focus();
    				});
    			}
    		});
    	}
    }