Angular PrimeNG Terminal Styling
Last Updated :
24 Sep, 2022
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
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
Similar Reads
Angular PrimeNG Table Styling
Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. This article will show us how to use Table Styling in Angular PrimeNG. The Table component shows som
4 min read
Angular PrimeNG Tag Styling
Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will see Angular PrimeNG Tag Properties. A tag component is used to create tags
3 min read
Angular PrimeNG TieredMenu Styling
Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. It provides a lot of templates, components, theme design, an extensive icon library, and much more.
4 min read
Angular PrimeNG Timeline Styling
Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. This article will show us about Angular PrimeNG Timeline Styling. The TimeLine component is used to
4 min read
Angular PrimeNG Tree Styling
Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. It provides a lot of templates, components, theme design, an extensive icon library, and much more.
5 min read
Angular PrimeNG TabMenu Styling
Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. It provides a lot of templates, components, theme design, an extensive icon library, and much more.
4 min read
Angular PrimeNG Toolbar Styling
Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will learn how to use the Toolbar Styling in Angular PrimeNG. The Toolbar Compon
3 min read
Angular PrimeNG TabView Styling
Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will see the Angular PrimeNG TabView Styling. The TabView Component is used to
3 min read
Angular PrimeNG Tooltip Styling
Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will see how to style the Tooltip Component in Angular PrimeNG. The Tooltip comp
3 min read
Angular PrimeNG Terminal Properties
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 wher
3 min read