update listbox docs

primefaces · Dec 19, 2024 · 615d7c4 · 615d7c4
1 parent 18f9623
commit 615d7c4
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 56 deletions.
diff --git 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
@@ -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>`,