From 615d7c43733f981a6ae2936aed962e27c5d5ebc2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mehmet=20=C3=87etin?=
 <92744169+mehmetcetin01140@users.noreply.github.com>
Date: Thu, 19 Dec 2024 14:31:25 +0300
Subject: [PATCH] update listbox docs

---
 apps/showcase/doc/listbox/groupdoc.ts    | 42 ++++++++----------------
 apps/showcase/doc/listbox/templatedoc.ts | 42 ++++++++----------------
 2 files changed, 28 insertions(+), 56 deletions(-)

diff --git a/apps/showcase/doc/listbox/groupdoc.ts b/apps/showcase/doc/listbox/groupdoc.ts
index 82a5840855d..b8264be9c41 100644
--- a/apps/showcase/doc/listbox/groupdoc.ts
+++ b/apps/showcase/doc/listbox/groupdoc.ts
@@ -16,7 +16,7 @@ interface Country {
         </app-docsectiontext>
         <div class="card flex justify-center">
             <p-listbox [options]="groupedCities" [group]="true" [(ngModel)]="selectedCountry" class="w-full md:w-56">
-                <ng-template let-group pTemplate="group">
+                <ng-template let-group #group>
                     <div class="flex items-center">
                         <img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'mr-2 flag flag-' + group.value" style="width: 20px" />
                         <span>{{ group.label }}</span>
@@ -68,37 +68,23 @@ export class GroupDoc {
     }
 
     code: Code = {
-        basic: `<p-listbox
-    [options]="groupedCities"
-    [group]="true"
-    [(ngModel)]="selectedCountry"
-    class="w-full md:w-56">
-        <ng-template let-group pTemplate="group">
+        basic: `<p-listbox [options]="groupedCities" [group]="true" [(ngModel)]="selectedCountry" class="w-full md:w-56">
+    <ng-template let-group #group>
+        <div class="flex items-center">
+            <img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'mr-2 flag flag-' + group.value" style="width: 20px" />
+            <span>{{ group.label }}</span>
+        </div>
+    </ng-template>
+</p-listbox>`,
+
+        html: `<div class="card flex justify-center">
+    <p-listbox [options]="groupedCities" [group]="true" [(ngModel)]="selectedCountry" class="w-full md:w-56">
+        <ng-template let-group #group>
             <div class="flex items-center">
-                <img
-                    src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png"
-                    [class]="'mr-2 flag flag-' + group.value"
-                    style="width: 20px" />
+                <img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'mr-2 flag flag-' + group.value" style="width: 20px" />
                 <span>{{ group.label }}</span>
             </div>
         </ng-template>
-</p-listbox>`,
-
-        html: `<div class="card flex justify-center">
-    <p-listbox
-        [options]="groupedCities"
-        [group]="true"
-        [(ngModel)]="selectedCountry"
-        class="w-full md:w-56">
-            <ng-template let-group pTemplate="group">
-                <div class="flex items-center">
-                    <img
-                        src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png"
-                        [class]="'mr-2 flag flag-' + group.value"
-                        style="width: 20px" />
-                    <span>{{ group.label }}</span>
-                </div>
-            </ng-template>
     </p-listbox>
 </div>`,
 
diff --git a/apps/showcase/doc/listbox/templatedoc.ts b/apps/showcase/doc/listbox/templatedoc.ts
index 35d3105bb8c..b1193f8529a 100644
--- a/apps/showcase/doc/listbox/templatedoc.ts
+++ b/apps/showcase/doc/listbox/templatedoc.ts
@@ -15,7 +15,7 @@ interface Country {
         </app-docsectiontext>
         <div class="card flex justify-center">
             <p-listbox [options]="countries" [(ngModel)]="selectedCountry" optionLabel="name" class="w-full md:w-56">
-                <ng-template let-country pTemplate="item">
+                <ng-template let-country #item>
                     <div class="flex items-center gap-2">
                         <img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + country.code.toLowerCase()" style="width: 18px" />
                         <div>{{ country.name }}</div>
@@ -47,37 +47,23 @@ export class TemplateDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `<p-listbox
-    [options]="countries"
-    [(ngModel)]="selectedCountry"
-    optionLabel="name"
-    class="w-full md:w-56">
-        <ng-template let-country pTemplate="item">
+        basic: `<p-listbox [options]="countries" [(ngModel)]="selectedCountry" optionLabel="name" class="w-full md:w-56">
+    <ng-template let-country #item>
+        <div class="flex items-center gap-2">
+            <img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + country.code.toLowerCase()" style="width: 18px" />
+            <div>{{ country.name }}</div>
+        </div>
+    </ng-template>
+</p-listbox>`,
+
+        html: `<div class="card flex justify-center">
+    <p-listbox [options]="countries" [(ngModel)]="selectedCountry" optionLabel="name" class="w-full md:w-56">
+        <ng-template let-country #item>
             <div class="flex items-center gap-2">
-                <img
-                    src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png"
-                    [class]="'flag flag-' + country.code.toLowerCase()"
-                    style="width: 18px" />
+                <img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + country.code.toLowerCase()" style="width: 18px" />
                 <div>{{ country.name }}</div>
             </div>
         </ng-template>
-</p-listbox>`,
-
-        html: `<div class="card flex justify-center">
-    <p-listbox
-        [options]="countries"
-        [(ngModel)]="selectedCountry"
-        optionLabel="name"
-        class="w-full md:w-56">
-            <ng-template let-country pTemplate="item">
-                <div class="flex items-center gap-2">
-                    <img
-                        src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png"
-                        [class]="'flag flag-' + country.code.toLowerCase()"
-                        style="width: 18px" />
-                    <div>{{ country.name }}</div>
-                </div>
-            </ng-template>
     </p-listbox>
 </div>`,