From 385887afac36de6e33dd888db14c8a2a2b168714 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=87etin?=
 <69278826+cetincakiroglu@users.noreply.github.com>
Date: Wed, 22 Nov 2023 15:08:41 +0300
Subject: [PATCH] Fixed #14172 - Dropdown | refactor template value and update
 doc

---
 src/app/components/dropdown/dropdown.ts      | 11 +++++++++--
 src/app/showcase/doc/dropdown/templatedoc.ts | 11 ++++++-----
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/app/components/dropdown/dropdown.ts b/src/app/components/dropdown/dropdown.ts
index ff0502dce72..545142b1c6e 100755
--- a/src/app/components/dropdown/dropdown.ts
+++ b/src/app/components/dropdown/dropdown.ts
@@ -147,7 +147,7 @@ export class DropdownItem {
                 (keydown)="onKeyDown($event)"
             >
                 <ng-container *ngIf="!selectedItemTemplate; else defaultPlaceholder">{{ label() === 'p-emptylabel' ? '&nbsp;' : label() }}</ng-container>
-                <ng-container *ngTemplateOutlet="selectedItemTemplate; context: { $implicit: modelValue() }"></ng-container>
+                <ng-container *ngTemplateOutlet="selectedItemTemplate; context: { $implicit: selectedOption }"></ng-container>
                 <ng-template #defaultPlaceholder>
                     <span *ngIf="label() === placeholder || (label() && !placeholder)">{{ label() === 'p-emptylabel' ? '&nbsp;' : placeholder }}</span>
                 </ng-template>
@@ -921,13 +921,20 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
         return selectedOptionIndex !== -1 ? this.getOptionLabel(this.visibleOptions()[selectedOptionIndex]) : this.placeholder || 'p-emptylabel';
     });
 
+    selectedOption: any;
+
     constructor(public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef, public zone: NgZone, public filterService: FilterService, public config: PrimeNGConfig) {
         effect(() => {
             const modelValue = this.modelValue();
+            const visibleOptions = this.visibleOptions();
 
             if (modelValue && this.editable) {
                 this.updateEditableLabel();
             }
+
+            if(visibleOptions && ObjectUtils.isNotEmpty(visibleOptions)) {
+                this.selectedOption = visibleOptions[this.findSelectedOptionIndex()];
+            }
         });
     }
 
@@ -1104,7 +1111,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
     }
 
     getOptionLabel(option: any) {
-        return this.optionLabel ? ObjectUtils.resolveFieldData(option, this.optionLabel) : option && option?.label !== undefined ? option.label : option;
+        return this.optionLabel ? ObjectUtils.resolveFieldData(option, this.optionLabel) : option && option.label !== undefined ? option.label : option;
     }
 
     getOptionValue(option: any) {
diff --git a/src/app/showcase/doc/dropdown/templatedoc.ts b/src/app/showcase/doc/dropdown/templatedoc.ts
index 447e0647718..69f7a2bd092 100644
--- a/src/app/showcase/doc/dropdown/templatedoc.ts
+++ b/src/app/showcase/doc/dropdown/templatedoc.ts
@@ -1,6 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { Code } from '../../domain/code';
 
+
 @Component({
     selector: 'dropdown-template-demo',
     template: ` <section class="py-4">
@@ -11,11 +12,11 @@ import { Code } from '../../domain/code';
             </p>
         </app-docsectiontext>
         <div class="card flex justify-content-center">
-            <p-dropdown [options]="countries" [(ngModel)]="selectedCountry" optionLabel="name" [showClear]="true" placeholder="Select a Country">
-                <ng-template pTemplate="selectedItem">
-                    <div class="flex align-items-center gap-2" *ngIf="selectedCountry">
-                        <img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + selectedCountry.code.toLowerCase()" style="width: 18px" />
-                        <div>{{ selectedCountry.name }}</div>
+            <p-dropdown [options]="countries" [(ngModel)]="selectedCountry" optionLabel="name" [showClear]="true" placeholder="Select a country">
+                <ng-template pTemplate="selectedItem" let-selectedOption>
+                    <div class="flex align-items-center gap-2" *ngIf="selectedOption">
+                        <img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + selectedOption.code.toLowerCase()" style="width: 18px" />
+                        <div>{{ selectedOption.name }}</div>
                     </div>
                 </ng-template>
                 <ng-template let-country pTemplate="item">