en primer lugar, use formularios reactivos en lugar de ngModel

 form: FormGroup; constructor(private fb: FormBuilder) {} ngOnInit() { this.form = this.fb.group({ country: this.fb.control('') }); }

modelo:

 <form ngForm="form"> <h5>Advanced with Templating, Filtering and Clear Icon</h5> <p-dropdown [options]="countries" [formControlName]="country" optionLabel="name" [filter]="true" filterBy="name" [showClear]="true" placeholder="Select a Country"> <ng-template pTemplate="selectedItem" let-item> <div class="country-item country-item-value"> <div>{{item.name}}</div> </div> </ng-template> <ng-template let-country pTemplate="item"> <div class="country-item"> <div>{{country.name}}</div> </div> </ng-template> </p-dropdown> </form>

y el segundo: no use *ngIf dentro de pTemplate (en realidad, este es el problema principal de la etiqueta colapsada) Aviso por favor:

• use formControlName en lugar de ngModel
• use let-item dentro de pTemplate para obtener la referencia al elemento seleccionado
• no olvide agregar ReactiveFormsModule a las importaciones