Create a dynamic context menu without the contextMenuActions object?

[meiuqer]

Is this possible? For example:

    <context-menu #headerMenu>
        <ng-template *ngFor="let column of libraryColumns">
            <checkbox [value]="column.hidden"></checkbox>
            <p>{{column.headerLabel}}</p>
        </ng-template>
    </context-menu>

I'm trying to replicate this context menu:

Which means that I want to use the libraryColumns array and generate context menu items based on the amount of library columns in my detail view. I tried the above example but that doesn't work. Is there maybe an other way to make this work?

I also tried this:

        for (const column of this.libraryColumns) {
            const placeholderAction = {
                html: (item) => 'hi!',
                click: (item) => console.log(item)
            }
            this.contextMenuActions.push(placeholderAction);
        }

And then follow the example of creating a dynamic context menu. But that gives the same results: nothing shows.

Also maybe there is a mistake in your code, or in any case redundant code? You make a template reference here:

<context-menu #myContextMenu>

Which you never use? And in the typescript code you do this:

@ViewChild(ContextMenuComponent) public contextMenu: ContextMenuComponent;

Which you also don't use? Do correct me if i'm wrong though.

[isaacplmann]

You're missing the contextMenuItem directive on your templates.

    <context-menu #headerMenu>
        <ng-template contextMenuItem *ngFor="let column of libraryColumns">
            <checkbox [value]="column.hidden"></checkbox>
            <p>{{column.headerLabel}}</p>
        </ng-template>
    </context-menu>

[meiuqer]

Urgh thanks man! Works perfectly now!