work for the https://github.com/surveyjs/survey-library/issues/8284work…

… for the #8209

packages/survey-angular-ui/example/src/app/components/itemContentTemplateComponent.html

@@ -1,4 +1,4 @@
 <div class="sv-ranking-item__text" style="display: flex; align-items: center; gap: 8px;">
   <svg [iconName]="'icon-next_16x16'" [size]="'16'" sv-ng-svg-icon></svg>
-  <sv-ng-string [model]="text"></sv-ng-string>
+  <sv-ng-string [model]="item.locText"></sv-ng-string>
 </div>

packages/survey-angular-ui/example/src/app/components/itemContentTemplateComponent.ts

@@ -1,13 +1,13 @@
 import { Component, Input } from "@angular/core";
 import { AngularComponentFactory } from "survey-angular-ui";
-import { LocalizableString } from "survey-core";
+import { ItemValue } from "survey-core";
 
 @Component({
   selector: "sv-new-item-content",
   templateUrl: "./itemContentTemplateComponent.html"
 })
 export class AngularItemContentTemplateComponent {
-  @Input() text!: LocalizableString;
+  @Input() item!: ItemValue;
   @Input() cssClasses: any;
 }
 

packages/survey-angular-ui/src/questions/ranking-item-content.component.html

@@ -1,3 +1,3 @@
 <div [class]="cssClasses.controlLabel">
-  <sv-ng-string [model]="text"></sv-ng-string>
+  <sv-ng-string [model]="item.locText"></sv-ng-string>
 </div>

packages/survey-angular-ui/src/questions/ranking-item-content.component.ts

@@ -1,14 +1,13 @@
 import { Component, Input } from "@angular/core";
-import { BaseAngular } from "../base-angular";
-import { ItemValue, LocalizableString, QuestionRankingModel } from "survey-core";
+import { ItemValue } from "survey-core";
 import { AngularComponentFactory } from "../component-factory";
 
 @Component({
   selector: "sv-ng-ranking-item-content",
   templateUrl: "./ranking-item-content.component.html"
 })
 export class RankingItemContentComponent {
-  @Input() text!: LocalizableString;
+  @Input() item!: ItemValue;
   @Input() cssClasses: any;
 }
 AngularComponentFactory.Instance.registerComponent("sv-ng-ranking-item-content", RankingItemContentComponent);

packages/survey-angular-ui/src/questions/ranking-item.component.html

@@ -25,7 +25,7 @@
         </svg> 
       </div></ng-template>
 
-      <ng-template [component]="{ name: question.itemContentComponent, data: { text: model.locText, cssClasses: question.cssClasses } }"></ng-template>
+      <ng-template [component]="{ name: question.itemContentComponent, data: { item: model, cssClasses: question.cssClasses } }"></ng-template>
     </div>
   </div>
 </div>

packages/survey-vue3-ui/example/src/components/test/test-custom-components/ItemContent.vue

@@ -1,9 +1,10 @@
 <template>
     <div class="sv-ranking-item__text" :style="{display: 'flex', alignItems: 'center', gap: '8px'}">
         <sv-svg-icon iconName="icon-next_16x16" size = "16"></sv-svg-icon>
-        <survey-string :locString="text" />
+        <survey-string :locString="item.locText" />
     </div>
 </template>
 <script lang="ts" setup>
-defineProps<{ text: any, cssClasses: any }>()
+import type { ItemValue } from 'survey-core';
+defineProps<{ item: ItemValue, cssClasses: any }>()
 </script>

packages/survey-vue3-ui/src/RankingItem.vue

@@ -52,7 +52,7 @@
             <use :xlink:href="question.dashSvgIcon"></use>
           </svg>
         </div>
-        <component :is="question.itemContentComponent" :text="item.locText" :cssClasses="question.cssClasses"></component>
+        <component :is="question.itemContentComponent" :item="item" :cssClasses="question.cssClasses"></component>
       </div>
     </div>
   </div>

packages/survey-vue3-ui/src/RankingItemContent.vue

@@ -1,14 +1,14 @@
 <template>
   <div :class="cssClasses.controlLabel">
-    <survey-string :locString="text" />
+    <survey-string :locString="item.locText" />
   </div>
 </template>
 
 <script lang="ts" setup>
-import type { LocalizableString } from "survey-core";
+import type { ItemValue } from "survey-core";
 defineOptions({ inheritAttrs: false });
 const props = defineProps<{
-  text: LocalizableString;
+  item: ItemValue;
   cssClasses: any;
 }>();
 </script>