Angular PrimeNG Terminal Styling

Angular PrimeNG is a UI component library for Angular Applications. It offers many pre-built themes and UI components for a variety of tasks like inputs, menus, charts, Buttons, etc. In this article, we will see how to use Terminal Styling in Angular PrimeNG.

The Terminal Component is a text base UI provided by PrimeNG where we can define our own commands and their output. The terminal can be styled according to business requirements by using the structural classes which are applied to different sections of the terminal by PrimeNG while rendering the component.

Angular PrimeNG Terminal Styling Classes:

• p-terminal: It is the outermost container element.
• p-terminal-content: It contains all the content of the terminal.
• p-terminal-prompt: This class is applied to the wrapper element of the prompt text.
• p-terminal-response: This class is applied to the response text of the commands.
• p-terminal-input: It is the input element used to enter the commands.

Syntax:

<p-terminal welcomeMessage="..." prompt="..."></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 color of the terminal’s content to green. Here everything will be green colored except the current prompt and the welcome message because they have separate containers.

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Terminal Styling</h3>

<p-terminal
    welcomeMessage="Hello Geeks! Welcome to GfG."
    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",
    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 { }

styles.css

.p-terminal-content{
    color: green;
}

Output:

Example 2: In this example, we changed the color of the prompt to red and the color of the response to green.

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Terminal Styling</h3>

<p-terminal
    welcomeMessage="Hello Geeks! Welcome to GfG."
    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",
    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 { }

styles.css

.p-terminal-response{
    color: green;
}

.p-terminal-prompt{
    color: red;
}

Output:

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