PrimeNg - Toggle div inline inside ng-template loop - html

Question

I'm working with PrimeNg picklist and here is what i have:
The focus is on the first row, don't mind the other rows not having the radio button (it's uncompleted testdata).
What i'm trying to achieve is that when you click on the first option 'Good:Stock', the little dropdown to the right with A1 appears. When you select 'Bad', it disappears.
The problem now is that when i select 'Good' for one item, the dropdown will appear for every record in the loop.
I want it to appear only for the item where i selected the radiobutton.
All help is welcome! Ask away if you need more code but i don't think the .ts file matters for now.
Here is what the code looks like:
<label for="productGroup">Select product</label>
<div class="form-group" id="productGroup">
<div class="row">
<div class="col">
<p-pickList [source]="products"
(onMoveToTarget)="onMoveToTarget()"
[target]="selectedProducts" sourceHeader="Available" targetHeader="Selected"
[responsive]="true" filterBy="description,productNumber"
dragdrop="true" dragdropScope="products" [showTargetControls]="false" [showSourceControls]="false"
sourceFilterPlaceholder="Search product in Available"
targetFilterPlaceholder="Search product in Selected"
[sourceStyle]="{'height':'33vh'}" [targetStyle]="{'height':'33vh'}">
<ng-template let-product pTemplate="item">
<div id="product" class="row ui-helper-clearfix">
<div class="col-1 padding-0 brighten">
<img (mouseover)="getProductImage(product)"
[escape]="false"
pTooltip='<img style="max-height: 100%; max-width: 100%" src="{{base64String}}">'
tooltipPosition="right"
src="assets/eye-icon.png" style="max-width: 100%; width: 80%;">
</div>
<div class="col-4">
<div class="row">{{product.description}}</div>
<br>
<div class="row">{{product.productNumber}}</div>
</div>
<div class="col-4" *ngIf="inbound && product.goodLabel && product.badLabelInWarranty &&!hqAdmin&&!carStock">
<div class="row">
<p-radioButton (onClick)="toggleProjects(true, product.id)" name="{{product.productNumber}}"
label="Good: {{product.goodLabel.name}}"
[value]="product.goodLabel" [(ngModel)]="product.quality">
</p-radioButton>
<p-radioButton name="{{product.productNumber}}"
label="Bad: {{product.badLabelInWarranty.name}}/{{product.badLabelOutOfWarranty.name}}"
[value]="product.badLabelInWarranty" [(ngModel)]="product.quality"
(onClick)="toggleProjects(false, product.id)">
</p-radioButton>
</div>
</div>
<div class="col-2 nopadding" *ngIf="goodSelected">
<p-dropdown id="dropdownInput"
[autoWidth]="false"
[options]="projectLabelSelectItems">
</p-dropdown>
</div>
</ng-template>
</p-pickList>
</div>
</div>
</div>

Answer 1

What is happening in you case suppose lets take an example you have 10 rows and your are maintaining one single variable for all row so what happen when the value of that flag become true or false drop-down from all the rows will show or hide.
So what is suggest in the collection take one property extra for this drop-down column.
<div class="col-2 nopadding" *ngIf="goodSelected">
<p-dropdown id="dropdownInput"
[autoWidth]="false"
[options]="projectLabelSelectItems">
</p-dropdown>
</div>
Here goodSelected is single variable insted of add one vriable in property
<div class="col-2 nopadding" *ngIf="product.goodSelected">
<p-dropdown id="dropdownInput"
[autoWidth]="false"
[options]="projectLabelSelectItems">
</p-dropdown>
</div>
And on toggle make goodSelected selected value true or false of selected row only.