Bind JSON Array of Objects | SELECT dropdownlist in Angular | (change) event | using [(ngModel)]

Topics Covered -
Bind JSON Array of Objects to SELECT dropdownlist in Angular.
Send selected dropdown value from HTML file to Typescript File using [(ngModel)].
How I used (change) event with SELECT dropdownlist in Angular.

Source Code - Comment Box

#BindJSON#dropdown#angular#select

[VijaySingh-mkso]

what is the use of this.filteredBank[0] ? why do we need a 0th element . Can we use without the array ?

[AntoRex-flnx]

Thank you for the useful video. Kind request to remove the background music its really annoying and disturbing lot to hear you clearly.

[targetdevelopers]

*source code -

*HTML file -*

<!-- header -->

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/">Bank Form</a>
</nav>
<!-- labels -->

<label class="ml-4 mt-2">Bank Names</label>
<label class="ml-5 mt-2">Bank Pincodes</label>
<div class="extdiv mt-0" >

<!-- bank dropdown -->
<select [(ngModel)]="selectedBank">
<ng-container *ngFor="let bank of banks">
<option *ngFor="let postoffice of bank.PostOffice">
{{ postoffice.Name }}
</option>
</ng-container>
</select>

<!-- pincode dropdown -->
<select class="ml-3">
<option>
{{ this.filteredBank[0].Pincode }}
</option>
</select>
</div>

<!-- // display information -->
<div class="mt-5 ml-3" *ngIf="isSelected">
<h6>Your Bank is : {{ this.filteredBank[0].Name }} </h6>
<h6>Your Branch is : {{ }} </h6>
</div>

*Typescript file*


@Component({
selector: 'app-select-drop-down',
templateUrl: './select-drop-down.component.html',
styleUrls:
})
export class SelectDropDownComponent implements OnInit {
isSelected: boolean;
filtered: Object[];
selectedBank;
postoffice: any = {};
filteredBank: any = [{}];

// array of json objects
banks = [
{
"PostOffice": [
{
"Name": "Baroda House",
"BranchType": "Sub Post Office",
"Pincode":
},
{
"Name": "Bengali Market",
"BranchType": "Head Post Office",
"Pincode": "110001"
}

]
}
]

constructor() { }
ngOnInit() {
}
onPostOfficeChange() {
this.filtered = => s.Name === this.selectedBank);
this.filteredBank = this.filtered;
this.isSelected = true;
}
}