Open In App

Angular PrimeNG Terminal Properties

Improve
Improve
Like Article
Like
Save
Share
Report

Angular PrimeNG is an open-source front-end UI library that has many native Angular UI components which help developers to build a fast and scalable web solution. In this article, we will be seeing Angular PrimeNG Terminal Properties.

The Terminal Component is a text base UI provided by PrimeNG where we can define our own commands and their output. There are a total of 4 properties of the terminal component.

Angular PrimeNG Terminal Properties:

  • welcomeMessage: This property is used to set the welcome text to display on the terminal.
  • prompt: It is used to set the prompt text which will be used for each command.
  • style: It is used for the inline styles of the component.
  • styleClass: It is used for the style class of the component.

Syntax:

<p-terminal 
    welcomeMessage="Welcome to GFG Terminal." 
    prompt="geek $">
</p-terminal>

Creating Angular Application and Installing the Module:

Step 1: Create an Angular application using the following command.

ng new appname

Step 2: After creating your project folder i.e. appname, move to it using the following command.

cd appname

Step 3: Finally, Install PrimeNG in your given directory.

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

Project Structure: The project Structure will look like this after following the above steps:

Project structure

Run the below command:

ng serve --open

Example 1:  In this example, we changed the welcome message and prompt of the terminal using the welcomeMessage and prompt properties respectively.

app.component.html




<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Terminal Properties</h3>
  
<p-terminal 
    welcomeMessage="Welcome to GeeksForGeeks" 
    prompt="geek >>">
</p-terminal>


app.component.ts




import { Component } from "@angular/core";
import { TerminalService } from 'primeng/terminal';
  
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"],
    providers: [TerminalService]
})
  
export class AppComponent {
    constructor(private terminalService: TerminalService) {
        this.terminalService.commandHandler.subscribe(command => {
            let res = (command === 'greet') ? 
                'Hello Geek!' : 'Unknown command';
            this.terminalService.sendResponse(res);
        });
    }
}


app.module.ts




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


Output:

 

Example 2: The welcome message can be removed easily by removing the welcomeMessage property of the terminal. The terminal will work fine without it. This example illustrates the same.

app.component.html




<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Terminal Properties</h3>
  
<p-terminal prompt="geek >>"></p-terminal>


app.component.ts




import { Component } from "@angular/core";
import { TerminalService } from 'primeng/terminal';
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"],
    providers: [TerminalService]
})
  
export class AppComponent {
    constructor(private terminalService: TerminalService) {
        this.terminalService.commandHandler.subscribe(command => {
            let res = (command === 'greet') ? 
                'Hello Geek!' : 'Unknown command';
            this.terminalService.sendResponse(res);
        });
    }
}


app.module.ts




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


Output:

 

Reference: http://primefaces.org/primeng/terminal



Last Updated : 24 Sep, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads