Primeng p-dropdown Multiple component match error NG0300

I am new at Angular development.

I am using angular v17 and primeng v17. I want to add a component selector for p-dropdown like

@Component({
selector: 'p-dropdown[enum-select]',
templateUrl: './enum-select.component.html',
styleUrls: ['./enum-select.component.css'],
imports: [
DropdownModule,
FormsModule,
NgIf,...
],
standalone: true}) export class MbsmEnumSelectComponent {....}


my template is like

<ng-template pTemplate="selectedItem" let-country>
<div class="flex align-items-center gap-2" *ngIf="model">

<div>{{ country.label | translate }}</div>
</div>
</ng-template>
<ng-template let-country pTemplate="item">
<div class="flex align-items-center gap-2">

<div>{{ country.label | translate }}</div>
</div>
</ng-template>


And I want to use is like <p-dropdown mbsm-enum-select id="test" [showClear]="true" [options]="kullaniciTips" [(ngModel)]="queryModel.kullaniciTip" styleClass="min-width-full"> </p-dropdown> so I can use default ptoperties of p-dropdown and I don't want to implement all features of p-drowdown like form binding and ngModel and so on.

But when I use it I get an error on console

ERROR RuntimeError: NG0300: Multiple components match node with tagname p-dropdown:
​

What am I doing wrong?

Continue reading...