I am trying to get the NgTerminal to work in Angular but I can't, I have followed all the steps of the official guide but nothing to do. My Angular version is 13.3.7 and my TypeScript version is 4.6.4.
app.module.ts
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { SessionsComponent } from './sessions/sessions.component';
import { NgTerminalModule } from 'ng-terminal';
@NgModule({
declarations: [
AppComponent,
HomeComponent,
SessionsComponent
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpClientModule,
NgTerminalModule
],
providers: [HttpClient],
bootstrap: [AppComponent]
})
export class AppModule { }
sessions.component.html
<div class="sessions-console-container">
<ng-terminal #terminal (keyEvent)="onKeyEvent($event)" [rows]="10" [cols]="20"></ng-terminal>
</div>
sessions.component.ts
import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
import { FunctionsUsingCSI, NgTerminal } from 'ng-terminal';
@Component({
selector: 'app-sessions',
templateUrl: './sessions.component.html',
styleUrls: ['./sessions.component.css']
})
export class SessionsComponent implements OnInit, AfterViewInit {
...
@ViewChild('terminal', { static: true }) child: NgTerminal;
constructor(...) {
...
// Dont't know what to do...
}
...
ngAfterViewInit(){
this.child.keyEventInput.subscribe(e => {
console.log('keyboard event:' + e.domEvent.keyCode + ', ' + e.key);
const ev = e.domEvent;
const printable = !ev.altKey && !ev.ctrlKey && !ev.metaKey;
if (ev.keyCode === 13) {
this.child.write('\n' + FunctionsUsingCSI.cursorColumn(1) + '$ '); // \r\n
} else if (ev.keyCode === 8) {
if (this.child.underlying.buffer.active.cursorX > 2) {
this.child.write('\b \b');
}
} else if (printable) {
this.child.write(e.key);
}
})
}
...
onKeyEvent(event: any): void {
console.log(event.key)
}
}
I got the following error:
[webpack-dev-server] ERROR
src/app/sessions/sessions.component.ts:17:40 - error TS2564: Property 'child' has no initializer and is not definitely assigned in the constructor.
17 @ViewChild('terminal', { static: true }) child: NgTerminal;