Componente de terminal PrimeNG angular

Angular PrimeNG es un marco de trabajo de código abierto con un amplio conjunto de componentes nativos de la interfaz de usuario de Angular que se utilizan para lograr un gran estilo y este marco se utiliza para crear sitios web receptivos con mucha facilidad. En este artículo, sabremos cómo usar el componente Terminal en Angular PrimeNG. También aprenderemos sobre las propiedades, el estilo junto con sus sintaxis que se usarán en el código. 

Componente terminal: se utiliza para crear una interfaz de usuario basada en texto.

Propiedades:

• welcomeMessage : Es el texto inicial a mostrar en el terminal. Es de tipo de datos de string, el valor predeterminado es nulo.
• prompt : Es el texto de aviso para cada comando. Es de tipo de datos de string, el valor predeterminado es nulo.
• estilo : es un estilo en línea del componente, es de tipo de datos de string, el valor predeterminado es nulo.
• styleClass : Especifica la clase de estilo del componente, es de tipo de datos de string, el valor predeterminado es nulo.

Estilo:

• p-terminal: Es un elemento contenedor.
• p-terminal-content: Es el contenido de la terminal.
• p-terminal-prompt: Es un mensaje de texto.
• p-terminal-response: Es una respuesta de comando.
• p-terminal-input: Es el elemento Input para ingresar comandos.

Creación de aplicaciones angulares e instalación de módulos:

Paso 1: Cree una aplicación Angular usando el siguiente comando.

ng new appname

Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la aplicación, muévase a ella con el siguiente comando.

cd appname

Paso 3: Instale PrimeNG en su directorio dado.

npm install primeng --save
npm install primeicons --save

Estructura del proyecto: después de la instalación completa, tendrá el siguiente aspecto:

Ejemplo: Este es el ejemplo básico que muestra cómo usar el componente Terminal.

<p-terminal welcomeMessage="Welcome to Custom Command prompt" 
            prompt="Enter Command =>"></p-terminal>

import { Component } from '@angular/core';
import { TerminalService } from 'primeng/terminal';
import { Subscription } from 'rxjs';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  providers: [TerminalService]
})
export class AppComponent {
  subscription: Subscription;
  
  constructor(private terminalService: TerminalService) {
    this.terminalService.commandHandler.subscribe(command => {
      let response =
        command === 'cd abc'
          ? 'changed Current Directory to abc'
          : 'Please Enter a Valid Command: ';
      this.terminalService.sendResponse(response);
    });
  }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } 
    from '@angular/platform-browser/animations';
  
import { AppComponent } from './app.component';
import { TerminalModule } from 'primeng/terminal';
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    TerminalModule,
    FormsModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

Producción:

Referencia: https://primefaces.org/primeng/showcase/#/terminal