From dbfbfa9aaf55af72574f88a762bb07a88b34e451 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mehmet=20=C3=87etin?=
 <92744169+mehmetcetin01140@users.noreply.github.com>
Date: Thu, 12 Dec 2024 13:22:34 +0300
Subject: [PATCH] tag | use host attribute

---
 packages/primeng/src/tag/tag.ts | 42 +++++++++++++++++++++------------
 1 file changed, 27 insertions(+), 15 deletions(-)

diff --git a/packages/primeng/src/tag/tag.ts b/packages/primeng/src/tag/tag.ts
index 2b30b5d0fa3..287b6282b01 100755
--- a/packages/primeng/src/tag/tag.ts
+++ b/packages/primeng/src/tag/tag.ts
@@ -13,20 +13,22 @@ import { TagStyle } from './style/tagstyle';
     standalone: true,
     imports: [CommonModule, SharedModule],
     template: `
-        <span [ngClass]="containerClass()" [class]="styleClass" [ngStyle]="style">
-            <ng-content></ng-content>
-            <ng-container *ngIf="!iconTemplate">
-                <span class="p-tag-icon" [ngClass]="icon" *ngIf="icon"></span>
-            </ng-container>
-            <span class="p-tag-icon" *ngIf="iconTemplate">
-                <ng-template *ngTemplateOutlet="iconTemplate"></ng-template>
-            </span>
-            <span class="p-tag-label">{{ value }}</span>
+        <ng-content></ng-content>
+        <ng-container *ngIf="!iconTemplate">
+            <span class="p-tag-icon" [ngClass]="icon" *ngIf="icon"></span>
+        </ng-container>
+        <span class="p-tag-icon" *ngIf="iconTemplate">
+            <ng-template *ngTemplateOutlet="iconTemplate"></ng-template>
         </span>
+        <span class="p-tag-label">{{ value }}</span>
     `,
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,
-    providers: [TagStyle]
+    providers: [TagStyle],
+    host: {
+        '[class]': 'containerClass()',
+        '[style]': 'style'
+    }
 })
 export class Tag extends BaseComponent {
     /**
@@ -84,11 +86,21 @@ export class Tag extends BaseComponent {
     }
 
     containerClass() {
-        return {
-            'p-tag p-component': true,
-            [`p-tag-${this.severity}`]: this.severity,
-            'p-tag-rounded': this.rounded
-        };
+        let classes = 'p-tag p-component';
+
+        if (this.severity) {
+            classes += ` p-tag-${this.severity}`;
+        }
+
+        if (this.rounded) {
+            classes += ' p-tag-rounded';
+        }
+
+        if (this.styleClass) {
+            classes += ` ${this.styleClass}`;
+        }
+
+        return classes;
     }
 }