I am looking to dynamically print countries from an array in my code based on the selected option

Question

I am looking to dynamically print countries from an array in my code based on the selected option

I'm in need of some simple code assistance. I want to display a list of countries that correspond to a selected letter, but I'm struggling to do so dynamically at the moment. For example, if I select the letter A from a dropdown menu, I want the countries related to that letter to be displayed below the dropdown.

<select [(ngModel)]="selectedOption">
        <option *ngFor="let o of options">
          {{o.letter}}
        </option>
      </select>

<p *ngFor="let o of options">Countries are: {{ o.countries }}</p>

export class AppComponent {
  selectedOption: string;

  options = [
    { letter: "A", countries: ["Afghanistan", "Albania", "Argentina"] },
    { letter: "B", countries: ["Bangladesh", "Bahamas", "Bahrain"] }
  ]

}

If A is chosen, then Afghanistan, Albania... should be displayed. If B is chosen, then... If C is chosen, then... I also want to be able to expand the array in the future.

javascript angular typescript

Answer 1

Answer №1

To simplify your code, consider using ngValue instead of relying on ngFor. Take a look at this post for more information. You can view a live example here.

Your updated code should look like this:

<select [(ngModel)]="selectedOption">
  <option *ngFor="let o of options" [ngValue]="o">
    {{o.letter}}
  </option>
</select>

<!-- Just to debug and display selected object -->
{{selectedOption | json}} 

<p>{{selectedOption.countries}}</p>

Answer 2

To simplify your code, consider using ngValue instead of relying on ngFor. Take a look at this post for more information. You can view a live example here.

Your updated code should look like this:

<select [(ngModel)]="selectedOption">
  <option *ngFor="let o of options" [ngValue]="o">
    {{o.letter}}
  </option>
</select>

<!-- Just to debug and display selected object -->
{{selectedOption | json}} 

<p>{{selectedOption.countries}}</p>

Answer 3

Answer №2

Give this a shot

<p *ngFor="let o of choices">
 <label *ngIf="o.letter === chosenOption">The list of countries is: {{ o.countries }}<label>
</p>

Answer 4

Give this a shot

<p *ngFor="let o of choices">
 <label *ngIf="o.letter === chosenOption">The list of countries is: {{ o.countries }}<label>
</p>

I am looking to dynamically print countries from an array in my code based on the selected option

Answer №1

Answer №2

Similar questions

The routing functionality in an Angular Element seems to be malfunctioning when used in a separate Angular project. Instead of displaying the expected routes, only the "<router-outlet></router-outlet>" tags are visible on the website

Adding shadows to a ShaderMaterial in three.js: A step-by-step guide

Do these exports serve the same purpose?

Triggering the creation of an Algolia Index from Firestore operations like updates, deletions, and additions is causing significant delays

Creating a progress bar for file uploads without using jQuery

Achieving success in element-ui vuejs involves validating the state with the :error parameter

Enable the entire button to be clickable without the need for JavaScript by utilizing a Bootstrap 5 button

What is the reason that modifying a textarea causes the AJAX loading of content to be interrupted?

Difficulty encountered when combining create-react-app with typescript and immutable.js

Ways to verify AJAX Response String when data format is specified as JSON

The user model cannot be assigned to the parameter of type Document or null in a mongoose with Typescript environment

Custom input in Angular 2 rc.5: Form control is missing a value accessor for an unspecified name

Using Jquery to generate key value pairs from a form that is submitted dynamically

Could the "IonApp" class found in @ionic/angular (Ionic 4) be considered the updated version of the "App" class in ionic-angular (Ionic 3)?

Generating dynamic text in Angular based on certain conditions

Locate and eliminate all occurrences of "<br />" within a webpage using jQuery

Navigating through Angular2 notifications using router chaining

Create a time of 00:19:59 using JavaScript

Move images horizontally next to the height of an element

The never-ending loading problem at the bottom of the Firefox screen seems