I need to create @ViewChild(CdkMenuTrigger) trigger: CdkMenuTrigger; for menu 2 programmatically but by default it capture menu 1 always, so how we can create object for particular menu programmatically?

So, whenever you try to get a trigger for menu2, you are ending up getting a trigger for menu1. It is what I understood from your comments.

The reason for that is @ViewChild looks for the first element or the directive matching the selector in the view DOM.

The First Approach

You can use @ViewChildren instead.

@ViewChildren return a QueryList object that contains the query results (all the triggers).

To get a particular trigger, you can use get(index) method.

@ViewChildren(MatMenuTrigger) triggers: QueryList<MatMenuTrigger>;


 someMethod() {
    this.triggers.get(1).openMenu();
  }

The Second Approach

If you do not want to use @ViewChildren, you can still keep using @ViewChild but you should distinguish your second trigger.

Among others, below selectors are supported by @ViewChild

• Any class with the @Component or @Directive decorator
• A template reference variable as a string

So,

html template:

<button 
#menuTrigger2="matMenuTrigger"
[cdkMenuTriggerFor]="menu2" 
class="example-standalone-trigger">
   Click me!
</button>

component.ts:

@ViewChild('menuTrigger2') trigger!: MatMenuTrigger;

 someMethod() {
    this.trigger!.openMenu();
  }

Using @ViewChildren(CdkMenuTrigger) triggerMenuContainer!: QueryList; able to get particular menu CdkMenuTrigger object.

e.g. this.triggerMenuContainer.get(1)?.open();

Any better way, please share