{"action":"created","issue":{"url":"https://api.github.com/repos/isaacplmann/ngx-contextmenu/issues/95","repository_url":"https://api.github.com/repos/isaacplmann/ngx-contextmenu","labels_url":"https://api.github.com/repos/isaacplmann/ngx-contextmenu/issues/95/labels{/name}","comments_url":"https://api.github.com/repos/isaacplmann/ngx-contextmenu/issues/95/comments","events_url":"https://api.github.com/repos/isaacplmann/ngx-contextmenu/issues/95/events","html_url":"https://github.com/isaacplmann/ngx-contextmenu/issues/95","id":304436408,"number":95,"title":"Dynamic context menu open issue","user":{"login":"sherlock1982","id":20403307,"avatar_url":"https://avatars3.githubusercontent.com/u/20403307?v=4","gravatar_id":"","url":"https://api.github.com/users/sherlock1982","html_url":"https://github.com/sherlock1982","followers_url":"https://api.github.com/users/sherlock1982/followers","following_url":"https://api.github.com/users/sherlock1982/following{/other_user}","gists_url":"https://api.github.com/users/sherlock1982/gists{/gist_id}","starred_url":"https://api.github.com/users/sherlock1982/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sherlock1982/subscriptions","organizations_url":"https://api.github.com/users/sherlock1982/orgs","repos_url":"https://api.github.com/users/sherlock1982/repos","events_url":"https://api.github.com/users/sherlock1982/events{/privacy}","received_events_url":"https://api.github.com/users/sherlock1982/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-03-12T16:06:58Z","updated_at":"2018-03-19T13:03:09Z","closed_at":null,"author_association":"NONE","body":"Currently I need to use dynamic context menu like this (approximately):\r\n```\r\n\r\n    public onContextMenu($event: MouseEvent, contact: Contact): void {\r\n\r\n        $event.preventDefault();\r\n        $event.stopPropagation();\r\n\r\n        this.getContextMenuAction(contact).subscribe( (actions: ContextMenuAction[]) => {\r\n            this.contextMenuActions = actions;\r\n            setTimeout(() => {\r\n                this.contextMenuService.show.next({\r\n                    // Optional - if unspecified, all context menu components will open\r\n                    contextMenu: this.basicMenu,\r\n                    event: $event,\r\n                    item: contact,\r\n                });\r\n            });\r\n        })\r\n    }\r\n\r\n```\r\n\r\nonContextMenu by itself is a click event somewhere on a button.\r\n\r\n```\r\n<context-menu #basicMenu>\r\n    <ng-template *ngFor=\"let action of contextMenuActions\" contextMenuItem (execute)=\"action.execute()\">\r\n        <i class=\"{{action.icon}}\"></i><span>{{action.translationTag | translate:action.translationArgs}}</span>\r\n    </ng-template>\r\n</context-menu>\r\n\r\n```\r\n\r\nThough if I remove setTimeout two issues appear:\r\n\r\n1. First time context menu is shown without items.\r\n2. execute is not fired though menu is closed on click\r\n\r\nIs there a reason for setTimeout call or am I doing something wrong?"},"comment":{"url":"https://api.github.com/repos/isaacplmann/ngx-contextmenu/issues/comments/374203858","html_url":"https://github.com/isaacplmann/ngx-contextmenu/issues/95#issuecomment-374203858","issue_url":"https://api.github.com/repos/isaacplmann/ngx-contextmenu/issues/95","id":374203858,"user":{"login":"isaacplmann","id":861504,"avatar_url":"https://avatars0.githubusercontent.com/u/861504?v=4","gravatar_id":"","url":"https://api.github.com/users/isaacplmann","html_url":"https://github.com/isaacplmann","followers_url":"https://api.github.com/users/isaacplmann/followers","following_url":"https://api.github.com/users/isaacplmann/following{/other_user}","gists_url":"https://api.github.com/users/isaacplmann/gists{/gist_id}","starred_url":"https://api.github.com/users/isaacplmann/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/isaacplmann/subscriptions","organizations_url":"https://api.github.com/users/isaacplmann/orgs","repos_url":"https://api.github.com/users/isaacplmann/repos","events_url":"https://api.github.com/users/isaacplmann/events{/privacy}","received_events_url":"https://api.github.com/users/isaacplmann/received_events","type":"User","site_admin":false},"created_at":"2018-03-19T13:03:09Z","updated_at":"2018-03-19T13:03:09Z","author_association":"OWNER","body":"Short answer: Yes, you need the setTimeout.\r\n\r\nLong answer:\r\nI haven't seen anyone try to do something like this, but here's what I'm guessing is happening.\r\n\r\nWithout the setTimeout:\r\n1. this.contextMenuAction is initially undefined (or `[]` if you set it to that)\r\n2. `<context-menu>` sees no `contextMenuItem`s\r\n3. Setting `this.contextMenuActions` does not immediately trigger change detection on the `<context-menu>` so it uses the old values.\r\n4. The first click shows no items.\r\n\r\nWith the setTimeout:\r\n1. and 2. same.\r\n3. Having setTimeout allows a change detection cycle to run in the `<context-menu>` component so that it picks up the new `<ng-template contextMenuItem>`s.\r\n4. The first click shows the new items.\r\n\r\nI have no good explanation for why the execute isn't fired."}}
{"actor":{"display_login":"isaacplmann"}}