Angular PrimeNG Tag Properties
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 used for categorizing the content. The content of the tag is decided by its value property.
Angular PrimeNG Tag Properties:
- value: It is the value to be displayed inside the tag. It accepts a string value and the default value is null.
- severity: It decides the severity level of the component. It can be one of “success”, “info”, “warning”, and “danger”.
- rounded: It is a boolean property that tells whether the corners of the tag are rounded or not. The default value is false.
- icon: It is the icon for the tag which will be displayed next to the tag’s value.
- style: It is the inline style of the component. It is of string type and the default value is null.
- styleClass: It is the style class of the component. It is of string type and the default value is null.
Syntax:
<p-tag
value="..."
rounded= true || false
severity="..."
icon="...">
</p-tag>
Creating Angular application and Installing the modules:
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: Install PrimeNG in your given directory.
npm install primeng --save
npm install primeicons --save
Project Structure: After complete installation, the project structure will look like the following:
Project Structure
Run the below command:
ng serve --open
Example 1: This example shows the use of the value, styleClass, and severity properties of the tag component.
app.component.html
< h2 style = "color: green" >GeeksforGeeks</ h2 >
< h4 >Angular PrimeNG Tag Properties</ h4 >
< p-tag
styleClass = "mr-2"
value = "MEARN STACK" >
</ p-tag >
< p-tag
styleClass = "mr-2"
severity = "success"
value = "DSA" >
</ p-tag >
< p-tag
styleClass = "mr-2"
severity = "info"
value = "REACT" >
</ p-tag >
< p-tag
styleClass = "mr-2"
severity = "warning"
value = "ANGULAR" >
</ p-tag >
< p-tag
severity = "danger"
value = "NODE.JS" >
</ p-tag >
|
app.component.ts
import { Component } from "@angular/core" ;
@Component({
selector: "app-root" ,
templateUrl: "./app.component.html" ,
styleUrls: [ './app.component.css' ]
})
export class AppComponent { }
|
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 { TagModule } from "primeng/tag" ;
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
TagModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
|
Output:
Example 2: This example shows the use of the rounded property to round the corners of the tag and the icon property to add the icon to the tag.
app.component.html
< h2 style = "color: green" >GeeksforGeeks</ h2 >
< h4 >Angular PrimeNG Tag Properties</ h4 >
< p-tag
styleClass = "mr-2"
[rounded]="true"
icon = "pi pi-check"
value = "MEARN STACK" >
</ p-tag >
< p-tag
styleClass = "mr-2"
[rounded]="true"
icon = "pi pi-hashtag"
severity = "success"
value = "DSA" >
</ p-tag >
< p-tag
styleClass = "mr-2"
[rounded]="true"
icon = "pi pi-code"
severity = "info"
value = "ANGULAR" >
</ p-tag >
< p-tag
severity = "danger"
[rounded]="true"
icon = "pi pi-circle"
value = "NODE.JS" >
</ p-tag >
|
app.component.ts
import { Component } from "@angular/core" ;
@Component({
selector: "app-root" ,
templateUrl: "./app.component.html" ,
styleUrls: [ './app.component.css' ]
})
export class AppComponent { }
|
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 { TagModule } from "primeng/tag" ;
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
TagModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
|
Output:
Reference: http://primefaces.org/primeng/tag
Last Updated :
26 Sep, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...