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 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
Share your thoughts in the comments
Please Login to comment...