CODEWITHSUNDEEP
angulartypescriptangular-material
mightycode Newton
mightycode Newton

Reputation: 3949

How to show data from material dropdownlist if you select the dropdownlist in Angular?

I have a dropdownlist and I want to show the data when you select the dropdownlist.

It works if I put the function in the ngOnInit:

 ngOnInit() {
    this.returnQrCodes$ = this.qrDefinitonService.getDefinitionForSelection().pipe(tap(console.log));
  }

But of Course I dont want to load the data if you didnt selected the dropdownlist. But if I make a function for it:

  getQrCodes() {
    this.returnQrCodes$ = this.qrDefinitonService.getDefinitionForSelection().pipe(tap(console.log));
  }

And the template looks like this:


   <div
      class="search-select searchoptions" *ngIf="selectedSearch && hasOtherOptions(selectedSearch)">
      <mat-select placeholder="Opties" name="option" [(ngModel)] = "selectedValueOptie" >
        <mat-option  *ngFor="let option of returnQrCodes$ | async " value="option.value" >
          {{ option.qrCode }}
        </mat-option>
      </mat-select>
    </div>

And I select the dropdownlist nothing happens.

Thank you

I tried like this:

 <div
        class="search-select searchoptions" *ngIf="selectedSearch && hasOtherOptions(selectedSearch)">
        <mat-select placeholder="Opties" name="option" [(ngModel)] = "getQrCodes"  >
          <mat-option  *ngFor="let option of getOtherOptions(selectedSearch)" [value]="option.apiStatus" >
            {{ option.status }}
          </mat-option>
        </mat-select>
      </div>

I also tried like this:

  <div
        class="search-select searchoptions" *ngIf="selectedSearch && hasOtherOptions(selectedSearch)">
        <mat-select placeholder="Opties" name="option" (selectionChange)="getQrCodes($event.value)"  >
          <mat-option  *ngFor="let option of getOtherOptions(selectedSearch)" [value]="option.apiStatus" >
            {{ option.status }}
          </mat-option>
        </mat-select>
      </div>

I tried like this:

 <div class="search-select searchoptions" *ngIf="selectedSearch && hasOtherOptions(selectedSearch)">
      <mat-select placeholder="Opties" name="option" [(ngModel)] = "selectedValueOptie" (change)="getQrCodes()"  >
        <mat-option  *ngFor="let option of returnQrCodes$ | async " value="option.value" >
          {{ option.qrCode }}
        </mat-option>
      </mat-select>
    </div>

and this is the method:


 getQrCodes() {
    this.returnQrCodes$ = this.qrDefinitonService.getDefinitionForSelection().pipe(tap(console.log));
  }

Upvotes: 0

Views: 64

Answers (1)

Hiras Haris
Hiras Haris

Reputation: 498

seems like you're not calling the "getQrCodes()" function anywhere

Upvotes: 1

Related Questions