How to pass event data from drop-down to button angular 2

Question

I have a drop-down list that currently displays objects in arrayed fashion. The JSON data comes from a service which is injected into the component. I filter the data according to iso_id and upon selecting an option from the drop-down, I display the filtered data. I'm trying to display this data only when a button (Array) is clicked after selecting the respective option. Right now, selecting an option from drop down displays the data and clicking on the Array button makes it disappear. How do I pass this data into the button click? Here's some sample code-

HTML

<md-select [(ngModel)]="selectedISO" (ngModelChange)="onSelect(selectedISO)" placeholder="TSO" [(ngModel)]="containerDisplay" >
      <md-option  value="Charge Only"  > Charge Only </md-option>
      <md-option  value="PJM"  >PJM  </md-option>
      <md-option  value="Not in ISO Market"  > Not in ISO Market </mdoption>
      <md-option  value="UCSD"> UCSD </md-option>
    </md-select>

<button md-button (click)="onClickArray(selectedISO)"  [(ngModel)]="containerDisplay" ngDefaultControl> 
             Array  
          </button>

<div class="ui-ivs-container" *ngIf="containerDisplay"  >
            <div class="ui-ivs-resources">
                <div  *ngFor="let resource of isoToShow; let i = index;"   
                [ngClass]="{...}">     
                       //Array of objects gets displayed//
                </div>
            </div>

My TS file looks like this-

    @Component({
      selector: 'app-home',
      templateUrl: './home.component.html',
      styleUrls: ['./home.component.scss']
    })
    export class HomeComponent implements OnInit {
       containerDisplay:boolean;
       selectedISO;
constructor(private service: Service) {
       this.isoToShow=this.isoArray; // gets populated by subscribing to service
                     }

    onSelect(val){
      console.log(val);
      this.onClickArray(val);
    }
    onClickArray(val){
    this.isoToShow=this.isoArray.filter(resource => resource.iso_id===val)
    }
    }

Nehal · Accepted Answer · 2017-08-09 13:58:56Z

1

There are few issues in your code.

In the onSelect() function, you have to set the selectISO value and set the containerDisplay tofalse, since each time the select item changes the data div should be hidden and only shown when the 'Array' button is clicked.
In the onClickArray(), you have to set the containerDisplay totrue.
I am not sure why you need [(ngModel)]="containerDisplay" inside <button>. You can toggle containerDisplay from the component.

I have created this plunker example for demo

Code snippets from the example:

ts:

containerDisplay:boolean;
  selectedISO;

  constructor(private appState: AppState){ }

  ngOnInit(){
    this.getData();
  }

  getData(): void {
    this.appState
        .fetchFilterFields()
        .then(data => {
          // console.log(data)
          this.appState.setData(data);
          this.isoArray = data
        });
  }

  onSelect(val){
    console.log(val);
    this.selectedISO = val;
    this.containerDisplay = false;
  }

  onClickArray(val){
    this.containerDisplay = true;
    if(this.isoArray){
      this.isoToShow = this.isoArray.filter(resource => resource.iso_id === val);
    }

  }

html:

<md-select [(ngModel)]="selectedISO" (ngModelChange)="onSelect($event) placeholder="TSO">
      <md-option  value="Charge Only"  > Charge Only </md-option>
      <md-option  value="PJM"  >PJM  </md-option>
      <md-option  value="Not in ISO Market"> Not in ISO Market </md-option>
      <md-option  value="UCSD"> UCSD </md-option>
</md-select>

<p></p>
<button md-raised-button 
        (click)="onClickArray(selectedISO)"> 
        Array  
</button>

<p></p>

<div class="ui-ivs-container" *ngIf="containerDisplay"  >
    <div class="ui-ivs-resources">
      <div  *ngFor="let resource of isoToShow; let i = index;">     
           {{ resource | json}}
      </div>
    </div>
</div>

answered Aug 9, 2017 at 13:58

Nehal

13.3k4 gold badges48 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Nitz1308 Over a year ago

Perfect!! Exactly what I wanted! Thank you so much :)

Nehal Over a year ago

You can upvote both answers too now, would really appreciate :)

Nitz1308 Over a year ago

Hi, What if I want to pass that same event to 3 different buttons? Array, Map or List and render the display according to the type of view selected?

Nehal Over a year ago

@Nitz1308, Please create a separate question. Asking a question in a comment doesn't help other users.

Nitz1308 Over a year ago

I've created a separate question. Thank you

FAISAL · Accepted Answer · 2017-08-09 07:00:38Z

1

Change your onSelect method to fix this problem.

  onSelect(val) {
      console.log(val);
      this.selectedISO = val; 
  }

answered Aug 9, 2017 at 7:00

FAISAL

34.8k10 gold badges102 silver badges107 bronze badges

1 Comment

Nitz1308 Over a year ago

Hi, What if I want to pass that same event to 3 different buttons? Array, Map or List and render the display according to the type of view selected?

Collectives™ on Stack Overflow

How to pass event data from drop-down to button angular 2

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related