import { Injectable, Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, ChangeDetectorRef, Input, NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { CommonModule } from '@angular/common'; import { DomHandler } from 'primeng/dom'; import { Subject } from 'rxjs'; class TerminalService { constructor() { this.commandSource = new Subject(); this.responseSource = new Subject(); this.commandHandler = this.commandSource.asObservable(); this.responseHandler = this.responseSource.asObservable(); } sendCommand(command) { if (command) { this.commandSource.next(command); } } sendResponse(response) { if (response) { this.responseSource.next(response); } } } TerminalService.decorators = [ { type: Injectable } ]; class Terminal { constructor(el, terminalService, cd) { this.el = el; this.terminalService = terminalService; this.cd = cd; this.commands = []; this.subscription = terminalService.responseHandler.subscribe(response => { this.commands[this.commands.length - 1].response = response; this.commandProcessed = true; }); } ngAfterViewInit() { this.container = DomHandler.find(this.el.nativeElement, '.p-terminal')[0]; } ngAfterViewChecked() { if (this.commandProcessed) { this.container.scrollTop = this.container.scrollHeight; this.commandProcessed = false; } } set response(value) { if (value) { this.commands[this.commands.length - 1].response = value; this.commandProcessed = true; } } handleCommand(event) { if (event.keyCode == 13) { this.commands.push({ text: this.command }); this.terminalService.sendCommand(this.command); this.command = ''; } } focus(element) { element.focus(); } ngOnDestroy() { if (this.subscription) { this.subscription.unsubscribe(); } } } Terminal.decorators = [ { type: Component, args: [{ selector: 'p-terminal', template: `