Angular menu with nested dropdowns

Is it possible to create a nested select menu similar to the example select screenshot menu below, using my mat-select? When a user selects an item from the REPM mat select, it should display the Master Broker Company menu on the right side. Thanks.

#example select

https://i.sstatic.net/oZbi1.png

#html code

<div style="margin-top: 8px;margin-left:8px;">  
    <mat-form-field appearance="fill" class="transaction-control-filter">
        <mat-label class="transaction-detail-header-label">REPM</mat-label>
        <mat-select #rempselect multiple (openedChange)="changeREMPFilter($event)">
            <div  class="select-all-property-transaction-list">
                <mat-checkbox color="primary" [(ngModel)]="allSelectedREMP" [ngModelOptions]="{standalone: true}"
                    (change)="toggleAllSelectionREMP()">Select All</mat-checkbox>
            </div>
            <mat-option (click)="optionClickREMP()" *ngFor="let remp of repmList" [value]="remp.display">
                {{remp.display}}
            </mat-option>
        </mat-select> 
    </mat-form-field>
</div>

<div style="margin-top: 8px;margin-left:8px;">  
    <mat-form-field appearance="fill" class="transaction-control-filter">
        <mat-label class="transaction-detail-header-label">Master Broker Company</mat-label>
        <mat-select #companyselect multiple (openedChange)="changeCompanyFilter($event)">
            <div class="select-all-property-transaction-list">
                <mat-checkbox color="primary" [(ngModel)]="allSelectedMasterBrokerCompany" [ngModelOptions]="{standalone: true}"
                    (change)="toggleAllSelectionCompany()">Select All</mat-checkbox>
            </div>
            <mat-option (click)="optionClickMasterBroker()" *ngFor="let masterbroker of transactionMasterBrokerCompany" [value]="masterbroker.display">
                {{masterbroker.display}}
            </mat-option>
        </mat-select> 
    </mat-form-field>
</div>

#this is my existing mat select

https://i.sstatic.net/pc5dk.png

javascriptangulartypescriptangular-material

Answer №1

If you're interested, consider exploring the functionality of mat-menu with checkboxes. The user can select an item from REPM by checking a checkbox, triggering a function that updates potential selections in Master Broker Company. For instance, in my demonstration, only items from Master corresponding to those in REPM can be selected. I used mock data represented by cards/users to emphasize this concept.

<button #matMenuTrigger mat-raised-button color="primary"[matMenuTriggerFor]="repm" 
(menuOpened)="onMenuOpened()"
(menuClosed)="onMenuClosed()">REPM</button>
‎‎‎      ‎ ‎‎‎ ‎‎ 
<button #matMenuTrigger mat-raised-button color="primary"[matMenuTriggerFor]="master" 
(menuOpened)="onMenuOpened()"
(menuClosed)="onMenuClosed()">Master Broker Company</button>

<mat-menu #repm="matMenu">
  <mat-checkbox #menuItems
    *ngFor="let item of premiumAutomobilesList; let i = index;"
    [(ngModel)]="item.activated"
    (click)="$event.stopPropagation()"
    (change)="onVehicleSelect()"
    (keydown)="onMenuKeyDown($event, i)"
    >{{ item.title }}</mat-checkbox
  >
</mat-menu>

<mat-menu #master="matMenu">
  <ng-container *ngFor="let item of users; let i = index;">
  <mat-checkbox #menuItems *ngIf="selectedVehicles.includes(item.car) "
    (click)="$event.stopPropagation()"
    (change)="onSelectUsername(item)"
    >{{ item.name }}</mat-checkbox
  >
</ng-container>
</mat-menu>

<p>{{ formattedSelectedVehicles }}</p>

  public onVehicleSelect() {
    this.selectedVehicles = this.premiumAutomobilesList
      .filter(menuitem => menuitem.activated)
      .map(menuitem => menuitem.title);
      console.log(this.selectedVehicles)
  }

  onSelectUsername(item: any) {
    console.log(item)
  }

For a live example of mat-menu with checkboxes, you can visit: https://stackblitz.com/edit/matmenu-with-checkboxes-demo-ohada6?file=src%2Fapp%2Fmatmenu-with-checkboxes.ts

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

Guide on connecting ngrx/store to an angular router guard

As someone who is new to ngrx/store, I am embarking on my initial project utilizing this tool. After successfully setting up my angular project with ngrx/store, I discovered how to dispatch a load action following the initialization of my main component: ...

angularangular2-routingngrxngrx-effects

Controls that shift a DIV in either direction

I've been working on making a div scroll left or right with either a mouseover effect or click, but I can't seem to figure out what's going wrong. My initial attempt was straightforward: <body> <div id="innerscroll"></div> ...

javascriptjqueryanimation

What is the importance of using getters for functions involving Moment.js in vueJS and typescript?

weekOfMonth() calculates the current month and week within that month. <template> <h3>{{ weekOfMonth }}</h3> </template> <script lang="ts"> export default class HomeView extends Vue { const moment = require(& ...

typescriptvue.jsmomentjs

I am looking to include an image URL in the JSON data of my Angular form and then send it to the server. The image URL will be retrieved from the server response

How can I upload an image URL to my Angular form as JSON data and send it to the server? The server needs to respond with the image URL after renaming the image. I need to retrieve the new image URL from the server, update my form with it, and then submit ...

node.jsangularmongooseangular6httpclient

Issue with Safe Navigation Operator in Angular 2 not functioning properly when used in template property binding

Ng: 13.3.11 TS: 4.6.4 When using the safe navigator in an Ng template, an error is encountered in IntelliJ Idea with the following expression: [innerHTML]="foo.bar.baz[v1].foobar[v2]?[v3]?[v4]?[v5]" error: Parser Error: Conditional expression. ...

angularexpressionsafe-navigation-operator

Prevent duplicate key errors when performing bulk insert operations with MongoDB

Is there a way to perform a bulk insert and proceed even if a duplicate key error occurs? I have a collection with a unique index on the id field (not _id) and some existing data. I need to add new data to the collection while skipping any documents that ...

javascriptnode.jsmongodbnpmbulkinsert

Is there a plethora of new content waiting to be discovered as you scroll through the old using Vue and

I have been working on a code that looks like this: <template> <div class='sights-list'> <div v-for='(sight, index) in sights'> <p>{{ sight.name }}</p> </div> < ...

javascriptvue.jsvuejs2axios

Switch on/off the active class for menu items in a list using VueJS

When I click on a menu item, I want the active class to be triggered only for that specific item and removed for the others. So far, I have written this code: <template> <nav class="navbar"> <div class="navbar__brand"> <ro ...

javascriptvue.js

The parameter type 'Object' cannot be assigned to the parameter type 'string'

Everything seems to be working fine in my application, but I am encountering the following error message: The argument of type 'Object' is causing an issue and cannot be assigned to a parameter of type 'string' Here is the code snip ...

angulartypescriptangular7

Is there a method available to minimize the size of a local storage list containing strings?

Hey there, I am trying to load a large 2.5MB json file in my browser so that I can use it for some typeAhead functions. Unfortunately, I'm facing an issue with my local storage being constantly full. When using Firefox, I receive the following error ...

javascriptjsonlocal-storagetypeahead

jQuery file uploader only transmitting a single chunk

Currently, I am integrating the jQuery file uploader into my Django application. I am encountering an issue where Django is only receiving one chunk of my large file. Initially, I suspected a problem with my UploadFileHandler; however, upon logging the ch ...

javascriptjquerydjangofile-uploadjquery-file-upload

Controllers within controllers that fail to choose an option in a select tag dropdown will result in the hiding of another input element

My application utilizes nested controllers following John Papa's style guide, with a controller as approach. One of the controllers manages the form for client validation and submission, while the other is responsible for handling location-related fun ...

javascriptangularjs

Issue with popup display in React Big Calendar

I'm currently working on a calendar project using React-Big-Calendar, but I've run into an issue with the popup feature not functioning properly. <div className={styles.calendarContainer} style={{ height: "700px" }}> <C ...

javascriptreactjsnext.jsreact-big-calendar

When pressing the next or previous button on the slider, an error message pops up saying "$curr[action] is not a

I found this interesting Js fiddle that I am currently following: http://jsfiddle.net/ryt3nu1v/10/ This is my current result: https://i.sstatic.net/VygSy.png My project involves creating a slider to display different ages from an array, such as 15, 25, ...

javascripthtmljquerycssbootstrap-4

Creating a personalized progress bar that reflects real-time data from an external API

I have developed an API that sends scores if someone solves math, chemistry, or physics problems correctly. The API responds with a JSON object like this: { "scores": { "maths": 28, "chemistry": 9, "physics": 26, } } When a person complet ...

javascriptreactjs

Adding Data Definition Language (DDL) statements while making an AJAX call

Is there a way to automatically update the value of a drop-down list whenever a partial view is loaded via an AJAX call? Currently, the AJAX call successfully retrieves the necessary information, but the user still needs to manually change the location val ...

javascriptjqueryajaxasp.net-mvc

Adding content to the parent element immediately after it is generated using jQuery

Is there a way to trigger $(e).append() as soon as the element e is created without using setTimeout()? I find that method inefficient. Are there any DOM events that can detect changes in a subtree of a DOM element? Usually, I would just add the code to t ...

javascriptjquerydomevent-handling

utilizing javascript function in Icefaces applications

I'm facing an issue. Here's the situation: I'm working on a quiz game where I need to implement a timer using JavaScript (jquery.timer.js). I have created a JavaScript file (question.js) with a method called startTimer, which utilizes the jq ...

javascripticefaces

Can we verify if strings can serve as valid property names for interfaces?

Let's consider an interface presented below: interface User { id: string; name: string; age: number; } We also have a method defined as follows: function getUserValues(properties:string[]):void { Ajax.fetch("user", properties).then( ...

typescript

Include a quantity dropdown menu on the cart page of your Shopify store's debut theme

Hey there! I'm currently customizing the Shopify Debut theme and I'm trying to incorporate a quantity selector as a dropdown on the cart page. Unfortunately, I'm encountering some issues with this implementation. I've managed to succes ...

javascriptjqueryajaxshopify