fix(primeng/p-tag): style binding not change dynamically

Fixes primefaces#12665.
volvachev · Jun 12, 2023 · 356dd28 · 356dd28
1 parent 5b5b95d
commit 356dd28
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 6 deletions.
diff --git a/src/app/components/tag/tag.ts b/src/app/components/tag/tag.ts
@@ -8,7 +8,7 @@ import { PrimeTemplate, SharedModule } from 'primeng/api';
 @Component({
     selector: 'p-tag',
     template: `
-        <span [ngClass]="containerClass()" [class]="styleClass" [ngStyle]="style">
+        <span [ngClass]="containerClass()" [class]="styleClass" [ngStyle]="tagStyle">
             <ng-content></ng-content>
             <ng-container *ngIf="!iconTemplate">
                 <span class="p-tag-icon" [ngClass]="icon" *ngIf="icon"></span>
@@ -31,7 +31,7 @@ export class Tag {
      * Inline style of the component.
      * @group Props
      */
-    @Input() style: { [klass: string]: any } | null | undefined;
+    @Input() tagStyle: { [klass: string]: any } | null | undefined;
     /**
      * Style class of the component.
      * @group Props

diff --git a/src/app/showcase/doc/apidoc/index.json b/src/app/showcase/doc/apidoc/index.json
@@ -21306,7 +21306,7 @@
                     "description": "Defines the input properties of the component.",
                     "values": [
                         {
-                            "name": "style",
+                            "name": "tagStyle",
                             "optional": false,
                             "readonly": false,
                             "type": "Object",

diff --git a/src/app/showcase/doc/tag/templatedoc.ts b/src/app/showcase/doc/tag/templatedoc.ts
@@ -8,7 +8,7 @@ import { Code } from '../../domain/code';
             <p>Children of the component are passed as the content for templating.</p>
         </app-docsectiontext>
         <div class="card flex justify-content-center">
-            <p-tag [style]="{ background: 'linear-gradient(-225deg,#AC32E4 0%,#7918F2 48%,#4801FF 100%)' }">
+            <p-tag [tagStyle]="{ background: 'linear-gradient(-225deg,#AC32E4 0%,#7918F2 48%,#4801FF 100%)' }">
                 <div class="flex align-items-center gap-2">
                     <img alt="Country" src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" class="flag flag-it" style="width: '18px'" />
                     <span class="text-base">Italia</span>
@@ -26,7 +26,7 @@ export class TemplateDoc {
 
     code: Code = {
         basic: `
-<p-tag [style]="{ 'background': 'linear-gradient(-225deg,#AC32E4 0%,#7918F2 48%,#4801FF 100%)'}">
+<p-tag [tagStyle]="{ 'background': 'linear-gradient(-225deg,#AC32E4 0%,#7918F2 48%,#4801FF 100%)'}">
     <div class="flex align-items-center gap-2">
         <img alt="Country" src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" class="flag flag-it" style="width: '18px'" />
         <span class="text-base">Italia</span>
@@ -35,7 +35,7 @@ export class TemplateDoc {
 </p-tag>`,
         html: `
 <div class="card flex justify-content-center">
-    <p-tag [style]="{ 'background': 'linear-gradient(-225deg,#AC32E4 0%,#7918F2 48%,#4801FF 100%)'}">
+    <p-tag [tagStyle]="{ 'background': 'linear-gradient(-225deg,#AC32E4 0%,#7918F2 48%,#4801FF 100%)'}">
         <div class="flex align-items-center gap-2">
             <img alt="Country" src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" class="flag flag-it" style="width: '18px'" />
             <span class="text-base">Italia</span>