How can I exhibit JSON object information in an Angular 2 dropdown menu?

CSS

              <!-- Custom CSS Styling for Dropdown -->
                  <div class="row no-overflow">
                    <div class="col-md-1 window-pad-height no-overflow">
                      <mat-label> Dropdown Style: </mat-label>
                    </div>
                    <div class="col-md-2 no-overflow">
                      <mat-form-field class="no-overflow">
                        <mat-select placeholder="select" [(ngModel)]="selectedStyle">
                          <mat-option *ngFor="" [value]="option">
                          
                        
                        </mat-option>
                        </mat-select>
                      </mat-form-field>
                    </div>
                  </div>

                  <!-- Responsive Design Styling -->
                  <div class="row no-overflow">
                    <div class="col-md-1  no-overflow">
                      <mat-label> Responsive Design: </mat-label>
                    </div>
                    <div class="col-md-2 no-overflow">
                      <mat-form-field class="no-overflow">
                        <mat-select placeholder="select" [(ngModel)]="selectedResponsive">
                          <mat-option *ngFor="" [value]="option">
                            
                          </mat-option>
                        </mat-select>
                      </mat-form-field>
                    </div>
                  </div>

                  <!-- Browser Support Styling -->
                  <div class="row no-overflow">
                    <div class="col-md-1 no-overflow">
                      <mat-label> Browser Compatibility: </mat-label>
                    </div>
                    <div class="col-md-2 no-overflow">
                      <mat-form-field class="no-overflow">
                        <mat-select placeholder="select" [(ngModel)]="selectedBrowser">
                          <mat-option *ngFor="" [value]="browser">
                            
                          </mat-option>
                        </mat-select>
                      </mat-form-field>
                    </div>
                  </div>

JavaScript

DropdownOptions: any= 
      {
        "dropdownStyle": [{
                "styleName": "Minimalistic",
                "responsiveDesign": [ {
                        "designType": "adaptive",
                        "browserSupport": [ {
                                "browserType": "Chrome",
                                "version": [
                                    "95",
                                    "96",
                                    "97"
                                ]
                            }, {
                                "browserType": "Firefox",
                                "version": [
                                    "92",
                                    "93",
                                    "94"
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    }

styleName to be displayed in dropdown for style selection

designType to be displayed in dropdown for design type selection

browserType to be displayed in dropdown for browser selection

Selecting a style should change the available options in the design type dropdown, and selecting a design type should update the browser options accordingly. This data is retrieved from an API source.

View my example on StackBlitz here: https://stackblitz.com/edit/angular-cztf8k

Thank you for your help!

angulartypescriptangular-materialangular5

Answer №1

To implement this, simply utilize LevelValue.level1 in the first *ngFor, followed by using the [(ngModel)] property in the subsequent *ngFor. Additionally, ensure to set the [value] to level for each mat-option

Consider the following example:

<!-- Level 1 Dropdown Selection -->
<div class="row no-overflow">
  <div class="col-md-1 window-pad-height no-overflow">
    <mat-label> Level 1: </mat-label>
  </div>
  <div class="col-md-2 no-overflow">
    <mat-form-field class="no-overflow">
      <mat-select placeholder="select" [(ngModel)]="selectedOfferOne">
        <mat-option *ngFor="let level of LevelValue.level1" [value]="level">
          {{level.level1Name}}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>
</div>

<!-- Level 2 Dropdown Selection -->
<div class="row no-overflow">
  <div class="col-md-1  no-overflow">
    <mat-label> Level 2: </mat-label>
  </div>
  <div class="col-md-2 no-overflow">
    <mat-form-field class="no-overflow">
      <mat-select placeholder="select" [(ngModel)]="selectedOfferTwo">
        <mat-option *ngFor="let level of selectedOfferOne.level2" [value]="level">
          {{level.level2Name}}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>
</div>

<!-- Level 3 Dropdown Selection -->
<div class="row no-overflow">
  <div class="col-md-1 no-overflow">
    <mat-label> Level 3: </mat-label>
  </div>
  <div class="col-md-2 no-overflow">
    <mat-form-field class="no-overflow">
      <mat-select placeholder="select" [(ngModel)]="selectedOfferThree">
        <mat-option *ngFor="let level of selectedOfferTwo.level3" [value]="level">
          {{level.level3Name}}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>
</div>

<!-- Level 4 Dropdown Selection -->
<div class="row no-overflow">
  <div class="col-md-1 no-overflow">
    <mat-label> Level 4: </mat-label>
  </div>
  <div class="col-md-2 no-overflow">
    <mat-form-field class="no-overflow">
      <mat-select placeholder="select" [(ngModel)]="selectedOfferFour">
        <mat-option *ngFor="let level of selectedOfferThree.level4" [value]="level">
          {{level.level4Name}}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>
</div>

<!-- Level 5 Dropdown Selection -->
<div class="row no-overflow">
  <div class="col-md-1 no-overflow">
    <mat-label> Level 5: </mat-label>
  </div>
  <div class="col-md-2 no-overflow">
    <mat-form-field class="no-overflow">
      <mat-select placeholder="select" [(ngModel)]="selectedOfferFive">
        <mat-option *ngFor="let level of selectedOfferFour.level5" [value]="level">
          {{ level }}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>
</div>

Check out this Working Sample on StackBlitz for reference.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using an image instead of a checkbox when it is selected (Angular 4/Ionic 3)

Is there a way to swap out the checkbox for an image? I want this image to change dynamically based on whether the checkbox is checked or not. Unfortunately, adding a class doesn't seem to do the trick as it modifies all icons in the same column. The ...

javascriptcssangularionic-frameworkionic2

Tips on accessing the JS file api within an angular component.ts file

I've got a function in my JS file located at src/server/js/controller.js, and I'm trying to use that API within a component's ts file. I attempted the following code to achieve this but it doesn't seem to be working properly. controlle ...

javascriptangular

Is there a way to specifically identify modified values in Angular forms?

When working with Angular forms, what is the best method to detect fields that have been changed and no longer contain their original values? ...

angularformbuilder

Managing multiple subscriptions in Angular observables

Upon initializing my component, the ComProductService is responsible for retrieving and processing the third level of product categories and storing them in proCatThird within the service. However, when attempting to access the proCatThird value in my fill ...

angularobservablesubscribe

Implementing debounce in Subject within rxjs/Angular2

I am currently building an events service, and here is the code snippet I am using: import { Injectable } from '@angular/core'; import { Observable } from 'rxjs/Observable'; import { Subject } from 'rxjs/Subject'; export int ...

angulartypescriptrxjs

Guide on incorporating arrow buttons for navigation on the left and right sides within a Primeng tab view component in Angular 8

Looking to enhance navigation tabs with left and right arrows for better support of larger tab sizes in the nav menu. I attempted using Primeng since my Angular 8 application already utilizes this library. Are there any other libraries besides Angular Ma ...

angulartypescriptprimengnav

Converting input tag to a method in component with uppercase transformation

Currently, this code resides within the <input tag I am looking to convert this code into a method in my component. Any ideas on how to do this? oninput="let p=this.selectionStart; this.value=this.value.toUpperCase(); this.setSelectionRange(p,p) ...

angularmethodscomponentsuppercase

Revise regular expression for verifying addresses

In my angular app, I have created a regular expression for validating postal addresses. const regx = '\\b([p]*(ost)*\\.*\\s*[o|0]*(ffice)*\\.*\\s*b[o|0]x)\\b' I specifically want this ...

angularregex

Overlap occurs when Angular Material 2 cards are used in conjunction with flex-layout

I'm currently working on implementing Angular Material 2 cards with flex-layout to dynamically change the number of columns displayed as the browser is resized. My goal is to achieve a layout similar to how Google Keep works. <div *ngIf="condition ...

angularangular-material2angular-flex-layout

Tips for adjusting the zIndex of the temporary drawer component in TypeScript

Currently, I am working on incorporating a "temporary" drawer that is clipped under the app bar. Please note that the drawer variant is set to 'temporary' and it needs to be clipped under the app bar. If you need more information, refer to my pr ...

reactjstypescriptmaterial-ui

Enhancing Angular2 authentication with Auth0 for enabling Cross-Origin Resource Sharing

I have been working on implementing user authentication through Auth0. I followed the instructions provided on their website, but I am encountering authentication issues. Whenever I try to authenticate, an error message appears in the console stating that ...

angulartypescripthttp-headerscross-domainauth0

Prevent Angular from performing change detection on specific @Input properties

Within my Angular component, there are extensive calculations that take place when changes are detected. @Component ( selector: 'my-table', ... 400+ lines of angular template ... ) class MyTable implements OnDestroy, AfterContentInit, On ...

angulardartangular-dart

The highcharts-angular version of the stock-tools-gui demo is lacking a graphical user interface (GUI)

Attempting to create an Angular version of this impressive demo: https://www.highcharts.com/stock/demo/stock-tools-gui . Utilizing the highcharts-angular wrapper in this project: https://codesandbox.io/s/pjkqwwmkr7 - everything is functional except for t ...

angularhighcharts

What are the distinctions between generic and discriminated types?

Hi there, I've been thinking of an idea but I'm not sure how to implement it or if it's even possible. Is there a way to create a type SomeType where the first property can be any value from the set T, but the second property cannot be the ...

typescript

Angular's AsyncValidatorFn is triggered by the onblur event and does not work with keypress events

I'm currently working with the latest version of Angular and I'm attempting to implement a custom validation for checking a code through a RestAPI. The example below is functional, but it doesn't trigger on keypress events; it only activates ...

angulartypescript

Leverage JSON to produce an output with EventEmitter

The title captures the essence of my query perfectly. I am curious if there is a method to produce an output eventemitter through JSON in Angular, allowing me to receive specific events and perform additional tasks externally. ...

angular

Is it possible to modify the default behavior of a sensitive region within a button?

I created a calculator application in React and overall, it's working fine, however... I've noticed that when I hold a click longer, it only registers as a click if the mouse was pressed down and released on the button itself. Although I unders ...

javascriptcssreactjstypescript

Eliminate unnecessary spacing from the sticky container

Trying to implement a sticky menu in an angular 14 project using angular material 14 has been quite challenging for me. Initially, I attempted to use the 'fixed' position, but encountered issues where the menu would consistently return to the to ...

htmlcssangularangular-material

The function Sync in the cp method of fs.default is not a valid function

When attempting to install TurboRepo, I encountered an issue after selecting npm. >>> TURBOREPO >>> Welcome to Turborepo! Let's get you set up with a new codebase. ? Where would you like to create your turborepo? ./my-turborepo ...

javascripttypescriptnext.jsturborepo

Guide on integrating the plyr npm module for creating a video player in Angular2

Looking to implement the Plyr npm package in an Angular 6 application to create a versatile video player capable of streaming m3u8 and Youtube videos. The demos on their npm page are written in plain JavaScript, so I need guidance on how to integrate it in ...

angulartypescriptangular6plyr.js