After much consideration, I have made the decision to develop my own dropdown feature. Below are the codes that outline the basic method, which can easily be copied and pasted into your angular application. I plan to release a package for this in the near future.
In order to separate the data from the main code, I have created a new file.
Create a new .ts file anywhere you prefer, ideally in src/app/shared/model/
Create Country.model.ts
export interface Countries {
code: string
code3: string
name: string
number: string
}
Now, create another .ts file to store the data. I recommend placing it in src/app/shared/components/store/
Create country-data-store.ts
import { Countries } from 'src/app/shared/models/country.model';
export var countries: Countries [] = [
// List of country data goes here...
];
With the data store successfully created, the next step is to fetch it in the desired component. To do so, we need to import the variable.
In your-component.ts
export class YourComponent implements OnInit {
public countries: any = countries;
constructor(){}
ngOnInit(): void {
}
}
In your-component.html
<select class="form-control" name="country" id="country">
<option value="" disabled selected>Select Country</option>
<option *ngFor="let country of countries" [value]="country.name">{{country.name}}</option>
</select>
I am currently working on a simplified package to automate this process. Stay tuned for updates!
Thank you for your attention!