How to use ngIf inside the ngFor correctly. (Angular)

Question

  <label for="bank_id">Bank</label>
     <select class="browser-default custom-select custom-select-sx col-md-12 mb-auto" (change)="selectedBank($event)">
             <option selected>Select Bank</option>
             <option value="{{ bankData.id }}" *ngFor="let bankData of bankDetails; let i = index">
                 {{  bankData.country_name}}
             </option>
     </select>

I get the bank Id and set the Id in to selectdBank variable

 selectedBank(event: any) {
    this.seletedbank = event.target.value;
 }

I want to show the bank details to that set id

<div *ngFor ="let bankData of bankDetails">
    <div *ngif="bankData.id == seletedbank">
        <h6 class="text-center font-weight-bold">
            {{ bankData.country_name}} - Bank Details
        </h6>
    </div>
</div>

ngIf is not working. How do I get the data, that related to the seleted bank id.

Answer 1

It's not an answer, only a "better doing"

Use two ways binding [(ngModel)]

//in .ts you declare
selectedbank:any=null

<!--see you need not use (change)-->
<select [(ngModel)]="seletedbank">
     <!--not use selected, you can use-->
       <option [value]="null" hidden disabled>Select Bank</option>
       <!--see the use of "binding" [value], better than "interpolation"-->
       <option *ngFor="let bankData of bankDetails" [value]="bankData.id" >
              {{  bankData.country_name}}
       </option>
</select>
<div *ngFor ="let bankData of bankDetails">
   <!--you can use *ngIf in any "tag", not only in a div-->
   <h6 ngIf="bankData.id == seletedbank" class="text-center font-weight-bold">
      {{ bankData.country_name}} - Bank Details
   </h6>
</div>

BTW, Really force Angular to loop to show an unique value it's not very efficiency. So use another variable

<!--"split"  the [(ngModel)] in [ngModel] and (ngModelChange)
    to call a function when a change happens -->
<select [ngModel]="seletedbank" 
        (ngModelChange)="selectedbank=$event;getData($event)>
  ....
</select>
<h1>{{bankDetail?.country_name}}</h1>

//declare a variable
bankDetail:any=null;
getData(id:any){
   this.bankDetail=this.bankDetails.find((x:any)=>x.id==id)
}

One time explain a bit ngModel, I suggest another approach: use the select with [ngValue] in the way the variable gets the full value

//in .ts you declare
selectedbank:any=null

<select [(ngModel)]="seletedbank">
       <option [value]="null" hidden disabled>Select Bank</option>
       <!--see the use of "binding" [ngValue] to all the object-->
       <option *ngFor="let bankData of bankDetails" [ngValue]="bankData" >
              {{  bankData.country_name}}
       </option>
</select>
<h1>{{seletedbank?.country_name}}</h1>

See that in this way the variable seletedbank get the whole object. You use the safe operator ? between "selectedbank" and ".country_name" to not give error if nothing is selected.