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 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:
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" >w3wiki</ 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" >w3wiki</ 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