How can I retrieve values that match on ID with another imported table? My goal is to import bank details from another table using the ID and display it alongside the companyName that shares the same ID with the bank details.
I've attempted several options but none have worked so far.
Thank you, and please keep it simple as I'm still in the learning process :)
Interfaces:
export interface Company {
id: number;
companyName: string;
address: string;
estimatedRevenue: number;
}
export interface Bank {
id: number;
bankName: string;
bankAccountNumber: string;
}
Component:
import { Component, OnInit } from '@angular/core';
import { Company } from '../_models/company';
import { AlertifyService } from '../_services/alertify.service';
import { CompanyService } from '../_services/company.service';
import { timer } from 'rxjs';
import { AddCompanyComponent } from '../add-company/add-company.component';
import { Bank } from '../_models/bank';
import { BankService } from '../_services/bank.service';
@Component({
selector: 'app-company',
templateUrl: './companies.component.html',
styleUrls: ['./companies.component.css'],
})
export class CompaniesComponent implements OnInit {
selectedCompany: Company;
companies: Company[];
banks: any;
selectedCompanyBank: Bank[];
bankvalueid: number;
bankNameany;
bankName: string;
constructor(
private companyService: CompanyService,
private alertify: AlertifyService,
private bankService: BankService,
) {}
ngOnInit() {
this.loadCompanies();
}
async loadCompanies() {
this.companyService.getCompanies().subscribe(
(companies: Company[]) => {
this.companies = companies;
},
error => {
this.alertify.error(error);
},
);
}
async loadBanks() {
this.bankService.getBanks().subscribe(
(banks: Bank[]) => {
this.banks = banks;
},
error => {
this.alertify.error(error);
},
);
}
// companyChange() {
// this.bankName = this.banks.find((bank) => bank.id ===
// this.selectedCompany.id).bankName;
// }
}
HTML:
<div id="selectCompanyDiv">
<ng-container *ngIf="companies">
<div class="col-12 col-md-3 col-xl-2 mt-5 bd-sidebar">
<label for="">Select Company</label>
<!-- <select class="form-control" [(ngModel)]="bankvalueid" [(ngModel)]="selectedCompany"> -->
<select class="form-control" [(ngModel)]="selectedCompany">
<option *ngFor="let each of companies" [ngValue]="each">{{
each.companyName
}}</option>
</select>
</div>
</ng-container>
<br />
<br />
<ul *ngIf="selectedCompany" class="list-group list-group-flush">
<li class="list-group-item">Company name: {{ selectedCompany.name }}</li>
<li class="list-group-item">
Company address: {{ selectedCompany.address }}
</li>
<li class="list-group-item">
Company Estimated revenue: {{ selectedCompany.estimatedRevenue }}₪
</li>
<button>Show more information</button>
</ul>
</div>
<div *ngIf="selectedCompany" class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">{{ selectedCompany.companyName }} {{ bankName }}</h5>
<h6 class="card-subtitle mb-2">Location: {{ selectedCompany.address }}</h6>
<br />
<h6 class="card-subtitle mb-2">
Estimated revenue: {{ selectedCompany.estimatedRevenue }}₪
</h6>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of
the card's content.
</p>
<a href="#" class="card-link">Edit Information</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
<!--
<h4>Basic native select</h4>
<mat-form-field>
<mat-label>Select Company</mat-label>
<select matNativeControl [(ngModel)]="selectedCompany">
<option value="" disabled selected>Select</option>
<option *ngFor="let value of companies" [ngValue="value"]{{value.name}}></option>
</select>
</mat-form-field>
-->