Angular - NgTerminal do not work as expected

Viewed 23

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;
0 Answers
Related