Open In App

Angular PrimeNG Tag Styling

Improve
Improve
Like Article
Like
Save
Share
Report

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. There are a total of 4 structural style classes which are listed below.

Angular PrimeNG Tag Styling Classes:

  • p-tag: This is the main tag element.
  • p-tag-rounded: This class is applied to the rounded element of the tag.
  • p-tag-icon: This class is applied to the icon of the tag.
  • p-tag-value: This class is applied to the value of the tag.

 

Syntax:

<p-tag 
    severity="...." 
    value="...."
    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 how to change the roundness of the corners of the tag using the p-tag-rounded class.

app.component.html




<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG Tag Styling</h4>
  
<p-tag 
    styleClass="mr-2"
    class="less-rounded"
    [rounded]="true"
    icon="pi pi-check"
    value="Less Rounded">
</p-tag>
  
<p-tag 
    severity="danger"
    class="more-rounded"
    [rounded]="true"
    icon="pi pi-code" 
    value="More Rounded">
</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 { }


styles.css




.less-rounded span.p-tag.p-tag-rounded {
    border-radius: 5px;
}
  
.more-rounded span.p-tag.p-tag-rounded {
    border-radius: 20px;
}


Output:

 

Example 2: This example shows how to change the size of the tag icon using the p-tag-icon structural class.

app.component.html




<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG Tag Styling</h4>
  
<p-tag 
    styleClass="mr-2"
    class="small-icon"
    icon="pi pi-code"
    value="Small Icon">
</p-tag>
  
<p-tag 
    severity="danger"
    class="large-icon"
    icon="pi pi-code" 
    value="Large Icon">
</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 { }


styles.css




.small-icon span.p-tag .p-tag-icon {
    font-size: 10px;
}
  
.large-icon span.p-tag .p-tag-icon {
    font-size: 20px;
}


Output:

 

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



Last Updated : 26 Sep, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads