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