{"id":19154,"date":"2022-11-05T15:33:16","date_gmt":"2022-11-05T10:03:16","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-issue-with-showing-a-custom-context-menu\/"},"modified":"2022-11-05T15:33:16","modified_gmt":"2022-11-05T10:03:16","slug":"solved-issue-with-showing-a-custom-context-menu","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-issue-with-showing-a-custom-context-menu\/","title":{"rendered":"[Solved] Issue with showing a custom context menu"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

The problem has to do with the way that the name this<\/code> is resolved. At the moment, when your onContextMenu<\/code> method is called, this<\/code> is not<\/em> resolved to your AppContextMenuComponent<\/code> class (as you might expect). To see this in action, try inserting console.log(this)<\/code> somewhere within that method. Since this<\/code> is not resolved as you might expect, the assignment statement this._isOpen = true<\/code> is not doing what you’d like. One quick fix for this is to explicitly “bind”<\/a> a value that the name this<\/code> should resolve to, by changing your event-listener setup to:<\/p>\n

.addEventListener('contextmenu', this.onContextMenu.bind(this));\n\/\/                                                 ^^^^^^^^^^^\n<\/code><\/pre>\n
However, this may lead to trouble when you wish to later remove this event listener. Others may have better solutions to this, but one option is to use an arrow function in place of your method (note that this relies on the “class fields proposal”<\/a>, which is not part of ES6).<\/p>\n
Here’s what that change looks like:<\/p>\n
private onContextMenu = ($event: MouseEvent): void => {\n  \/\/                  ^                            ^^\n  \/\/ Body remains unchanged\n};\n<\/code><\/pre>\n
Here’s an updated StackBlitz project<\/a> with the change.<\/p>\n<\/p><\/div>\n
<\/div>\n<\/div>\n
            1<\/span> <\/p><\/div>\n<\/div>\n
[ad_2]<\/p>\n
solved Issue with showing a custom context menu <\/p>\n","protected":false},"excerpt":{"rendered":"
[ad_1] The problem has to do with the way that the name this is resolved. At the moment, when your onContextMenu method is called, this is not resolved to your AppContextMenuComponent class (as you might expect). To see this in action, try inserting console.log(this) somewhere within that method. Since this is not resolved as you … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[732,651],"class_list":["post-19154","post","type-post","status-publish","format-standard","hentry","category-solved","tag-angular","tag-typescript"],"yoast_head":"\n[Solved] Issue with showing a custom context menu - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-issue-with-showing-a-custom-context-menu\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] Issue with showing a custom context menu - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] The problem has to do with the way that the name this is resolved. At the moment, when your onContextMenu method is called, this is not resolved to your AppContextMenuComponent class (as you might expect). To see this in action, try inserting console.log(this) somewhere within that method. Since this is not resolved as you ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-issue-with-showing-a-custom-context-menu\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-05T10:03:16+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-issue-with-showing-a-custom-context-menu\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-issue-with-showing-a-custom-context-menu\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] Issue with showing a custom context menu\",\"datePublished\":\"2022-11-05T10:03:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-issue-with-showing-a-custom-context-menu\/\"},\"wordCount\":168,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"angular\",\"typescript\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-issue-with-showing-a-custom-context-menu\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-issue-with-showing-a-custom-context-menu\/\",\"name\":\"[Solved] Issue with showing a custom context menu - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-11-05T10:03:16+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-issue-with-showing-a-custom-context-menu\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-issue-with-showing-a-custom-context-menu\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-issue-with-showing-a-custom-context-menu\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] Issue with showing a custom context menu\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] Issue with showing a custom context menu - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-issue-with-showing-a-custom-context-menu\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] Issue with showing a custom context menu - JassWeb","og_description":"[ad_1] The problem has to do with the way that the name this is resolved. At the moment, when your onContextMenu method is called, this is not resolved to your AppContextMenuComponent class (as you might expect). To see this in action, try inserting console.log(this) somewhere within that method. Since this is not resolved as you ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-issue-with-showing-a-custom-context-menu\/","og_site_name":"JassWeb","article_published_time":"2022-11-05T10:03:16+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-issue-with-showing-a-custom-context-menu\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-issue-with-showing-a-custom-context-menu\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] Issue with showing a custom context menu","datePublished":"2022-11-05T10:03:16+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-issue-with-showing-a-custom-context-menu\/"},"wordCount":168,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["angular","typescript"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-issue-with-showing-a-custom-context-menu\/","url":"https:\/\/jassweb.com\/solved\/solved-issue-with-showing-a-custom-context-menu\/","name":"[Solved] Issue with showing a custom context menu - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-11-05T10:03:16+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-issue-with-showing-a-custom-context-menu\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-issue-with-showing-a-custom-context-menu\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-issue-with-showing-a-custom-context-menu\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] Issue with showing a custom context menu"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/19154","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=19154"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/19154\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=19154"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=19154"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=19154"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}