Dynamic Angular Menu

Is there a cleaner, more dynamic way to implement a mat menu with individual click values and disable properties for each button? I want to avoid repeating code like in the example below. Looking for a more dynamic solution.

#code

<mat-menu #createDealMenu="matMenu" xPosition="before" yPosition="below">
      <button [disabled]="!testID" (click)="createDeal(DEAL_TYPES.AC)" mat-menu-item>Portfolio Management - Approval to Close</button>
      <button [disabled]="!pmRId" (click)="createDeal(DEAL_TYPES.PMT)" mat-menu-item>Portfolio Management - Termination Option</button>
      <button [disabled]="!leaseId" (click)="createDeal(DEAL_TYPES.PMR)" mat-menu-item>{{DEAL_TYPES.PMR}}</button>
    </mat-menu>
angulartypescript

Answer №1

Make sure to have an object in your component logic that includes all the necessary parameters and information needed to populate the mat-menu.

Here is an example:

public menuItems: any[]; // Consider creating an interface for better type handling

.. code ...

// Inside the ngOnInit():

this.menuItems = [
  { disabledCondition: !this.testID, dealType: 'AC', buttonText: 'Portfolio Management - Approval to Close'
]

Now that we have items in the array, utilize the ngFor directive to iterate over the array and display the items accordingly.

The HTML implementation:

<mat-menu #createDealMenu="matMenu" xPosition="before" yPosition="below">
    <button *ngFor="let item of menuItems" 
            [disabled]="item.disableCondition"
            (click)="createDeal(DEAL_TYPES[item.dealType])" mat-menu-item
    > 
      {{ item.buttonText }}

    </button>
</mat-menu>

Consider adapting something similar to this setup for your needs

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

Retrieving Information from FULLCALENDAR events using Angular

Using fullcalendar but unsure how to retrieve complete event data on interaction. Here are the calendar options I'm using: calendarOptions: CalendarOptions = { initialView: 'dayGridMonth', //plugins: [dayGridPlugin, timeGridPlugin, i ...

angularfullcalendar

Utilizing Angular to bind properties conditionally

Can a property be conditionally bound in an Angular template? For instance, if I have an Observable with some data <my-component *ngIf="input$ | async as input" [input1]="input.input1" [overrideValue]="input.ove ...

angular

JavaScript capable of storing vast quantities of data

Currently, I am receiving file chunks in byte format from my server and combining them into one variable on my frontend for downloading later. Unfortunately, I am unable to modify the server setup which sends files sliced into chunks. The issue arises whe ...

javascriptangularstring

Can classes be encapsulated within a NgModule in Angular 2/4?

Looking to organize my classes by creating a module where I can easily import them like a separate package. Take a look at this example: human.ts (my class file) export class Human { private numOfLegs: Number; constructor() { this.numOfLegs = 2 ...

angulartypescriptng-modules

Effectively managing intricate and nested JSON objects within Angular's API service

As I work on creating an API service for a carwash, I am faced with the challenge of handling a large and complex json object (referred to as the Carwash object). Each property within this object is essentially another object that consists of a mix of simp ...

angulartypescriptnestedrxjs

Exploring the world of ng2-translate for translating texts

For the translation of headings and texts in my Angular2 web application, I utilized ng2-translate. However, I am facing a dilemma when it comes to translating texts that are passed from a .ts file. For example, I can easily translate texts in an HTML fi ...

angulartypescriptionic2language-translationng2-translate

The function inside the subscribe block is failing to execute because the navigate function is not functioning properly

Issue with router.navigate not being called in Angular There seems to be an issue with the subscribe function not getting inside the subscribe method. I have properly mapped the http registeruser function in the auth.service file, but when I try to subscr ...

angular

Issue with Angular not rendering data retrieved from HTTP response

In my Service script class, I have defined a HomeApiService with the following code: export class HomeApiService{ apiURL = 'http://localhost:8080/api'; constructor(private http: HttpClient) {} getProfileData():Observable<HomeModelInterface[ ...

javahtmlangulartypescriptspring-boot

Mastering the use of Action.Submit in adaptive cards to simulate user input

I am trying to implement MessageFactory.SuggestedActions within my "welcomeCard" adaptive card. Essentially, in my adaptive card (welcome card), I have several buttons for the user to click on, each with an Action.Submit type. { "type" ...

javascriptnode.jstypescriptbotframeworkadaptive-cards

"Exploring the world of Ionic 2: uncovering its public variables

I'm facing an issue with Ionic 2, specifically with Angular. My concern revolves around a variable called "isConnected". I am unable to access it from an internal function within a function as it gives me an error saying "can't define property of ...

javascriptfunctionangulartypescriptionic2

Incorporating Common Types for Multiple Uses

Is there a way to efficiently store and reuse typings for multiple React components that share the same props? Consider the following: before: import * as React from 'react'; interface AnotherButtonProps { disabled?: boolean; onClick: (ev ...

javascriptreactjstypescript

Exploring the capabilities of using the injectGlobal API from styled-components in a TypeScript

I've been attempting to utilize the simple injectGlobal API, but I am encountering difficulties getting it to work with TypeScript. Here is my setup in theme.tsx: import * as styledComponents from "styled-components"; import { ThemedStyledComponentsM ...

reactjstypescriptstyled-components

Utilizing 'nestjs/jwt' for generating tokens with a unique secret tailored to each individual user

I'm currently in the process of generating a user token based on the user's secret during login. However, instead of utilizing a secret from the environment variables, my goal is to use a secret that is associated with a user object stored within ...

javascriptnode.jstypescriptjwtnestjs

Querying multiple attributes in express-restify-mongoose

Issue: I am attempting to send a query from my Angular2 frontend to my Node.js server using express-restify-mongoose. The goal is to search for data based on multiple attributes, instead of just one. Current Working Solution: let regex = '{"title": ...

node.jsmongodbangularexpressmongoose

Importing modules that export other modules in Typescript

I am facing an issue with two modules and two classes. ModuleA, ModuleB, ClassA, and ClassB are defined as follows: export class ClassA { } export class ClassB { } The modules are structured like this: export * from './ClassA'; export module ...

typescript

Ecommerce Template for Next.js

I am new to the world of web development and I have a project involving customizing a Next.js ecommerce template. Since I'm still learning programming, I would appreciate a simple summary of the steps I need to take in order to achieve this. The speci ...

typescriptnext.js

Exploring Cypress: Iterating over a collection of elements

I have a small code snippet that retrieves an array of checkboxes or checkbox labels using cy.get in my Angular application. When looping through the array to click on each element and check the checkboxes, it works fine if the array contains only one elem ...

typescriptforeachclickelementcypress

Utilize Angular for the front-end user interface and Asp.Net for the backend within the same Azure App

I am facing a challenge with deploying Angular and Asp.Net together on the same app service in Azure. Despite defining the Physical Path for the Angular project, it is not visible on the website and instead shows an error. Interestingly, when I deploy only ...

asp.netangularazuredeployment

Return either a wrapped or base type based on the condition

I am a beginner in TypeScript and I'm struggling to find the right combination of search terms to solve my issue. It seems like using a type condition could be helpful, but I still need to grasp how they function. My goal is to pass a function that p ...

typescript

Angular 6 - The requested resource does not have the necessary 'Access-Control-Allow-Origin' header

I am currently working on an Angular 6 project that includes a service pointing to server.js. Angular is running on port: 4200 and Server.js is running on port: 3000. However, when I try to access the service at http://localhost:3000/api/posts (the locat ...

node.jsangulartypescriptexpressangular6