Angular 4 populate the dropdown only matched values

Question

I want to access array inside objects which is coming from my json file to populate my dropdown values and want to show values on second dropdown only from previous selected dropdown.

here is my ts:

 companySites = false;
  siteSelected = false;
  alldata: any = [];
getCustomerData() {
    this.maintenanceServices.getAllCustomers().subscribe(
      data => {
        if (data) {
          this.alldata = data;
          console.log(this.alldata);
        }
      },
      error => {
        console.log(error);
      }
    );
  }

  onCustomerChange(): void {
    this.companySites = true;
  }

  onSitecChange(): void {
    this.siteSelected = true;
  }

.html:

<mat-grid-tile>
      <div>
        <p>Select a company</p>
        <mat-form-field>
          <mat-select placeholder="Company" (selectionChange)="onCustomerChange($event)" value="company">
            <mat-option *ngFor="let company of alldata">
              {{ company.customer.customerName }}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </div>
    </mat-grid-tile>
    <mat-grid-tile *ngIf="companySites">
      <div>
        <p>Select site</p>
        <mat-form-field>
          <mat-select placeholder="Sites" (selectionChange)="onSitecChange($event)" value="site">
            <mat-option *ngFor="let site of alldata.sites; index as i">
              {{ site.buildingName }}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </div>
    </mat-grid-tile>
  </mat-grid-list>

and json:

"customer": {
"customerName": "ABC",
"customerAddress": "NYC",
"BillingAddress": "ABC",
"ProductInstallation": "drive A",
"sites": [
{
"_id": "5c5be1f2b73bc81dd404ac00",
"buildingName": "Main Building",
"requestDate": "12/02/2019",
"buildingAddress": "123 Street",
"numberofDrives": "3"
},
{
"_id": "5c5be1f2b73bc81dd404abff",
"buildingName": "second Building",
"requestDate": "12/02/2019",
"buildingAddress": "123 Street",
"numberofDrives": "2"
}
]
},
"_id": "5c5be1f2b73bc81dd404abfe",

now my json has hundreds of customers with multiple sites. I want to select company and then on second dropdown I want to show sites for selected sites

I have tried:

Object.values but that didn't work either

[See here how to render using condition](https://stackoverflow.com/questions/42931735/apply-a-condition-using-ngfor-and-ngif-in-angular-2) — Rowf Abd, Feb 07 '19 at 08:47

score 1 · Answer 1 · answered Feb 07 '19 at 09:06

So what you can do is use the first dropdown to filter the list of objects and display the second dropdown only when a value has been selected by the user, this is done through *ngIf and the corresponding sites are shown for the same, please refer the below stackblitz.

<mat-grid-list cols="1">
    <mat-grid-tile>
        <div>
            <p>Select a company</p>
            <mat-form-field>
                <mat-select placeholder="Company" [(value)]="company">
                    <mat-option *ngFor="let company of alldata" [value]="company.customer">
                        {{ company.customer.customerName }}
                    </mat-option>
                </mat-select>
            </mat-form-field>
        </div>
    </mat-grid-tile>
    <mat-grid-tile *ngIf="company">
        <div>
            <p>Select site</p>
            <mat-form-field>
                <mat-select placeholder="Sites" [(value)]="site">
                    <mat-option *ngFor="let site of company.sites; index as i" [value]="site">
                        {{ site.buildingName }}
                    </mat-option>
                </mat-select>
            </mat-form-field>
        </div>
    <div>{{site | json}}</div>
    </mat-grid-tile>
</mat-grid-list>

StackBlitz

@MuhammadAli does this answer solve your question, can it be closed? — Naren Murali, Aug 21 '22 at 03:15

score 0 · Answer 2 · answered Feb 07 '19 at 08:51

0

just use *ngIf for that

      <mat-select placeholder="Sites" (selectionChange)="onSitecChange($event)" value="site">
        <ng-container *ngFor="let site of alldata.sites; index as i">
           <mat-option *ngIf="whatever site should be">
              {{ site.buildingName }}
           </mat-option>
        </ng-container>
      </mat-select>
    </mat-form-field>

answered Feb 07 '19 at 08:51

Antoniossss

31,590
6
57
99

can you explain what do you mean by *whatever site should be* – Muhammad Ali Feb 07 '19 at 08:53
put there condition that will decide if gives site should be rendered or not. That is simple IF statement. – Antoniossss Feb 07 '19 at 08:54
@MuhammadAli this is the best that can be explained with the give json data. give details of alldata to give further info – Dhananjai Pai Feb 07 '19 at 08:56
alldata: any = []; is just an array to append values from data coming from json... you can check my ts file – Muhammad Ali Feb 07 '19 at 08:57
@Antoniossss can you please update your answer? i still dont understand and I tried to use *ngIf="sites.buildingName" but it didnt work either – Muhammad Ali Feb 07 '19 at 08:58
Create stackblitz for that as your datamodel shown is a mess IMHO. https://stackblitz.com/ – Antoniossss Feb 07 '19 at 08:59
Why would you even want to do that `*ngIf="sites.buildingName"` Do you know what `*igIf` is for and how it works? – Antoniossss Feb 07 '19 at 09:02

Angular 4 populate the dropdown only matched values

2 Answers2