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

Issue

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

Solution

There are few issues in your code.

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

  2. In the onClickArray(), you have to set the containerDisplay totrue.

  3. 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 By – Nehal

Answer Checked By – Pedro (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.