Angular dynamic menu

Question

I have a mat menu below with each of them has each own click value and with own disable properties , is there a way we can cleanly implement this or dynamically implement this without repeating the buttons and click as you see on the current progress below? something like dynamic

#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>

Look directives like ngFor. Just create an object containing all the parameters and info u need and then loop it with the ngFor — Osakr
– Osakr, Commented Sep 15, 2021 at 9:32

Osakr · Accepted Answer · 2021-09-15 09:50:53Z

1

In your component logic there must be an object containing all the parameters and info you will need in order to fill up the mat-menu.

Something like this:

public menuItems: any[]; // Would be nice to create an interface or something to deal with the types

.. code ...

// Inside the ngOnInit():

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

So now that we have an item in the array we will use the ngFor directive to loop over the array and show all the items as we want.

The HTML file:

<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>

Something like this might suit for you

answered Sep 15, 2021 at 9:50

Osakr

1,0561 gold badge14 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ananya Amar Over a year ago

Thank you Sir , appreciated.

Collectives™ on Stack Overflow

Angular dynamic menu

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related