Dynamic select-option using objects in Angular

Question

I have this object:

0: {year: "2015", period: ["P1"]}
1: {year: "2016", period: ["P1", "P2"]}
2: {year: "2017", period: ["P1", "P2", "P3"]}

And I wanna do 2 select-option:

When I press on 2015 on the first select-option, the values on the second select-option to be P1.

When I press on 2016 on the first select-option, the values on the second select-option to be P1, P2.

When I press on 2017 on the first select-option, the values on the second select-option to be P1, P2, P3.

Something dinamically basically. I tried this:

<select>
  <option disabled value="null">Select year</option>
  <option *ngFor="let item of fps" [value]="item.year">
     {{ item.year }}
  </option>
</select>
&nbsp;
<select>
  <option disabled value="null">Select period</option>
  <option *ngFor="let item of fps" [value]="item.period">
     {{ item.period }}
  </option>
</select>

but this will give me: (same with 2016 and 2017)

How can I modify in order to obtain what I want? Thank you for your time!

Bind the first selection to a variable and use it to manipulate second — MonkeyScript
– MonkeyScript, Commented Jan 9, 2019 at 9:17
@PardeepJain thank you very much! And thank you all for your answers, I upvoted all of them! — Tenzolinho
– Tenzolinho, Commented Jan 9, 2019 at 9:28

Pardeep Jain · Accepted Answer · 2019-01-09 09:32:55Z

You need to bind the selection of your first dropdown value to set another dropdown options, better to call event on every change of your dropdown's value. Use your code like below -

<select (change)='onSelect(val.value)' #val>
  <option disabled value="null">Select year</option>
  <option *ngFor="let item of options" [value]="item.year">
     {{ item.year }}
  </option>
</select>

<select>
  <option disabled value="null">Select period</option>
  <option *ngFor="let item of periodOptions" [value]="item">
     {{ item }}
  </option>
</select>

and Bind in Your method like this -

options = [
    {year: "2015", period: ["P1"]},
    {year: "2016", period: ["P1", "P2"]},
    {year: "2017", period: ["P1", "P2", "P3"]}
  ];
  periodOptions = [];

  onSelect(val) {
    console.log(val);
    if (val) {
      this.periodOptions = [];
      this.options.map(res => {
        if(res.year == val){
          this.periodOptions = res.period;
        }
      });
    }
  }

`Working Example`

MonkeyScript · Accepted Answer · 2019-01-09 09:22:32Z

1

In your TS, use a temporary variable to hold year selection

tempYearSelect : string = ''

HTML :

<select [(ngModel)]="tempYearSelect">
  <option disabled value="null">Select year</option>
  <option *ngFor="let item of fps" [value]="item.year">
     {{ item.year }}
  </option>
</select>
&nbsp;
<select>
  <option disabled value="null">Select period</option>
  <option *ngFor="let item of fps" [value]="item.period" [hidden]="item.year!=tempYearSelect">
     {{ item.period }}
  </option>
</select>

answered Jan 9, 2019 at 9:22

MonkeyScript

5,1611 gold badge14 silver badges28 bronze badges

Comments

Hiren Vaghasiya · Accepted Answer · 2019-01-09 09:26:09Z

Use this way

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template:`
   <select [(ngModel)]="firstSelectValue">
    <option *ngFor="let opt of firstSelectOptions" [value]="opt">
       {{ opt }}
    </option>
   </select> 

   <select *ngIf="firstSelectValue" [(ngModel)]="secondSelectValue" >
    <option *ngFor="let opt of secondSelectOptions" [value]="opt">
      {{ opt }}
    </option>
  </select>


  <div>
    <div>First select value: {{ firstSelectValue }}</div>
    <div>Second select value:  {{ secondSelectValue }}</div>
  </div>
  `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

    private opts = [ 
      {year: "2015", period: ["P1"]},
      {year: "2016", period: ["P1", "P2"]},
      {year: "2017", period: ["P1", "P2", "P3"]}
  ]

  firstSelectValue = '2015';
  secondSelectValue = null;

  get firstSelectOptions() {
    return this.opts.map(({year}) => year);
  }

  get secondSelectOptions() {
    return (this.opts.find(({year}) => year === this.firstSelectValue)).period
  }

}

Link : View Demo

manu · Accepted Answer · 2019-01-09 09:43:29Z

0

Try this.

<select (change)="changeValue($event.target.value)">
<option disabled value="null">Select year</option>
<option *ngFor="let item of fps" [value]="item.year" (change)="changeValue(item.year)">
   {{ item.year }}
</option>
</select>
&nbsp;
<select>
<option disabled value="null">Select period</option>
<option *ngFor="let item of fps1" [value]="item">
   {{ item }}
</option>
</select>

TS code

 changeValue(year){
this.fps.forEach(element => {
  if(element.year==year){
    this.fps1=element.period;
  }
});
}

answered Jan 9, 2019 at 9:43

manu

991 gold badge3 silver badges9 bronze badges

Comments

Eliseo · Accepted Answer · 2019-01-09 11:10:31Z

"My Angular way" when we have a few relationals options is using ngValue. The disapoint it's that in "year" we have an object, not a number, but the advantage is a clear .ts

<select [(ngModel)]="year" #val>
  <option disabled value="null">Select year</option>
  <option *ngFor="let item of options" [ngValue]="item">
     {{ item.year }}
  </option>
</select>
&nbsp;
<select [(ngModel)]="periodo">
  <option disabled value="null">Select period</option>
  <option *ngFor="let item of year?.period" [value]="item">
     {{ item }}
  </option>
</select>
{{year?.year}}{{periodo}}

The .ts only need two variables year )that will be an object, but we can obtain the year by year.year) and periodo

See stactblitz

export class AppComponent  {
  options = [
    {year: "2015", period: ["P1"]},
    {year: "2016", period: ["P1", "P2"]},
    {year: "2017", period: ["P1", "P2", "P3"]}
  ];
  year:any=null;
  period:any;
}

Collectives™ on Stack Overflow

Dynamic select-option using objects in Angular

5 Answers 5

`Working Example`

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related