I need to print countries based on option selected in array in my code dynamically

Question

I need simple code help. If I choose any particular letter then corresponding countries should be displayed, in my current position I am not able to do it dynamically. For example if i choose letter A then countries pertaining to those should be displayed outside the select.

<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 chosen then Afghanistan Albania .... If B chosen then .... If C chosen then .... I should be able to expand array in future.

score 2 · Accepted Answer · answered Mar 26 '19 at 05:47

You can use ngValue instead of using ngFor. You can refer this answer. Here is the working example.

Your code becomes

<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>

score 0 · Answer 2 · edited Mar 26 '19 at 06:01

0

You can try this

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

edited Mar 26 '19 at 06:01

Bhagwat Tupe

1,905
1
13
28

answered Mar 26 '19 at 05:40

Seba Cherian

1,755
6
18

Template parse errors: Can't have multiple template bindings on one element – R.H Mar 26 '19 at 05:43
I've modified the answer. Could you try that? – Seba Cherian Mar 26 '19 at 05:45

I need to print countries based on option selected in array in my code dynamically

2 Answers2