{"id":3019,"date":"2021-04-19T10:00:00","date_gmt":"2021-04-19T14:00:00","guid":{"rendered":"https:\/\/www.mymiller.name\/wordpress\/?p=3019"},"modified":"2021-04-04T19:01:02","modified_gmt":"2021-04-04T23:01:02","slug":"angular-full-screen-mode","status":"publish","type":"post","link":"https:\/\/www.mymiller.name\/wordpress\/angular\/angular-full-screen-mode\/","title":{"rendered":"Angular Full-Screen Mode"},"content":{"rendered":"\n<p>Maybe you want to enable your users to switch to full-screen mode in their browser with your angular application.  This is a nice little bonus feature you can add in, without adding to the size of your applicaiton. So first thing first, create a property:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>fullScreen: boolean = false;<\/code><\/pre>\n\n\n\n<p>Set it to false to begin with.  Now in your HTML\/Template add the following:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;a (click)=\"goFullScreen(!fullScreen)\">\n    &lt;mat-icon <em>*ngIf<\/em>=\"fullScreen\">fullscreen_exit&lt;\/mat-icon>\n    &lt;mat-icon <em>*ngIf<\/em>=\"!fullScreen\">fullscreen&lt;\/mat-icon>\n    &lt;span class=\"icon_space\" <em>*ngIf<\/em>=\"fullScreen\">Exit Full Screen&lt;\/span>\n    &lt;span class=\"icon_space\" <em>*ngIf<\/em>=\"!fullScreen\">Full Screen&lt;\/span>\n&lt;\/a><\/pre>\n\n\n\n<p>This will switch you between the Full Screen and Exit Full Screen modes. Now because browsers are different and we do not have a consistent interface for doing this, we have to plan for our browser:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>goFullScreen(fullScreen:boolean) {\n        if(fullScreen) {\r\n            this.openFullscreen();\r\n        } else {\r\n            this.closeFullscreen();\r\n        }\r\n    }\r\n\r\n    openFullscreen() {\r\n        if (this.elem.requestFullscreen) {\r\n            this.elem.requestFullscreen();\r\n        } else if (this.elem.mozRequestFullScreen) {\r\n            \/* Firefox *\/\r\n            this.elem.mozRequestFullScreen();\r\n        } else if (this.elem.webkitRequestFullscreen) {\r\n            \/* Chrome, Safari and Opera *\/\r\n            this.elem.webkitRequestFullscreen();\r\n        } else if (this.elem.msRequestFullscreen) {\r\n            \/* IE\/Edge *\/\r\n            this.elem.msRequestFullscreen();\r\n        }\r\n    }\r\n\r\n    \/* Close fullscreen *\/\r\n    closeFullscreen() {\r\n        if (this.document.exitFullscreen) {\r\n            this.document.exitFullscreen();\r\n        } else if (this.document.mozCancelFullScreen) {\r\n            \/* Firefox *\/\r\n            this.document.mozCancelFullScreen();\r\n        } else if (this.document.webkitExitFullscreen) {\r\n            \/* Chrome, Safari and Opera *\/\r\n            this.document.webkitExitFullscreen();\r\n        } else if (this.document.msExitFullscreen) {\r\n            \/* IE\/Edge *\/\r\n            this.document.msExitFullscreen();\r\n        }\r\n    }<\/code><\/pre>\n\n\n\n<p>Special Thanks to you Stavm with https:\/\/stackoverflow.com\/a\/51998854\/3602840.  His solution was golden for dealing with the different browsers. Notice I didn&#8217;t change my this.fullScreen boolean in this code.  I do that in the case if something fails.  Instead I list and adjust it when the event indicates it actually takes place.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@HostListener('document:fullscreenchange', &#91;'$event'])\r\n    @HostListener('document:webkitfullscreenchange', &#91;'$event'])\r\n    @HostListener('document:mozfullscreenchange', &#91;'$event'])\r\n    @HostListener('document:MSFullscreenChange', &#91;'$event'])\r\n    fullScreenChange() {\r\n        console.log(\"Recieved\");\r\n        this.fullScreen = !this.fullScreen;\r\n    }<\/code><\/pre>\n\n\n\n<p>Again all the broswers are different so I list for them all. <\/p>\n\n\n\n<div class=\"wp-block-coblocks-alert\"><p class=\"wp-block-coblocks-alert__title\">F11 and Manual Full Screen change size is not detected here.<\/p><p class=\"wp-block-coblocks-alert__text\">If your user changes to Full Screen size by pressing the F11 key on Chrome, or the equivalent on other browsers this will not trigger an event to be picked up by Angular.<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Maybe you want to enable your users to switch to full-screen mode in their browser with your angular application. This is a nice little bonus feature you can add in, without adding to the size of your applicaiton. So first thing first, create a property: Set it to false to begin with. Now in your [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3020,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[281],"tags":[269],"series":[],"class_list":["post-3019","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","tag-angular"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2021\/04\/web-401497_640.jpg?fit=640%2C452&ssl=1","jetpack-related-posts":[{"id":2943,"url":"https:\/\/www.mymiller.name\/wordpress\/angular\/angular-material-string-component\/","url_meta":{"origin":3019,"position":0},"title":"Angular Material String Component","author":"Jeffery Miller","date":"January 4, 2021","format":false,"excerpt":"Create a compnent for Display\/Edit\/Delete of a string using Angular Material mat-form-field.","rel":"","context":"In &quot;Angular&quot;","block_context":{"text":"Angular","link":"https:\/\/www.mymiller.name\/wordpress\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2020\/12\/application-1883453_640.jpg?fit=640%2C426&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2020\/12\/application-1883453_640.jpg?fit=640%2C426&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2020\/12\/application-1883453_640.jpg?fit=640%2C426&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":2946,"url":"https:\/\/www.mymiller.name\/wordpress\/angular\/angular-material-checkbox\/","url_meta":{"origin":3019,"position":1},"title":"Angular Material Checkbox","author":"Jeffery Miller","date":"January 11, 2021","format":false,"excerpt":"Create a compnent for Display\/Edit of a checkbox using Angular Material mat-form-field.","rel":"","context":"In &quot;Angular&quot;","block_context":{"text":"Angular","link":"https:\/\/www.mymiller.name\/wordpress\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2020\/12\/checklist-2549229_640.jpg?fit=640%2C426&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2020\/12\/checklist-2549229_640.jpg?fit=640%2C426&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2020\/12\/checklist-2549229_640.jpg?fit=640%2C426&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":2951,"url":"https:\/\/www.mymiller.name\/wordpress\/angular\/angular-material-search-field\/","url_meta":{"origin":3019,"position":2},"title":"Angular Material Search Field","author":"Jeffery Miller","date":"January 25, 2021","format":false,"excerpt":"Angular Material Search Field component using mat-form-field to create a reusable component for searching.","rel":"","context":"In &quot;Angular&quot;","block_context":{"text":"Angular","link":"https:\/\/www.mymiller.name\/wordpress\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2020\/12\/search-bar-4999181_640.jpg?fit=640%2C225&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2020\/12\/search-bar-4999181_640.jpg?fit=640%2C225&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2020\/12\/search-bar-4999181_640.jpg?fit=640%2C225&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":2988,"url":"https:\/\/www.mymiller.name\/wordpress\/angular\/angular-structural-directive-onsize\/","url_meta":{"origin":3019,"position":3},"title":"Angular Structural Directive onSize","author":"Jeffery Miller","date":"January 18, 2021","format":false,"excerpt":"Creating an angular structural directive to operate on screen resolution.","rel":"","context":"In &quot;Angular&quot;","block_context":{"text":"Angular","link":"https:\/\/www.mymiller.name\/wordpress\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2021\/01\/plan-2092499_640.jpg?fit=640%2C435&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2021\/01\/plan-2092499_640.jpg?fit=640%2C435&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2021\/01\/plan-2092499_640.jpg?fit=640%2C435&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":2023,"url":"https:\/\/www.mymiller.name\/wordpress\/java\/simplifying-javafx-display-management-with-displaymanager\/","url_meta":{"origin":3019,"position":4},"title":"Simplifying JavaFX Display Management with DisplayManager","author":"Jeffery Miller","date":"April 20, 2026","format":false,"excerpt":"JavaFX provides a powerful platform for creating rich graphical user interfaces (GUIs) in Java applications. However, managing multiple displays and screens within a JavaFX application can be a complex task. To simplify this process and provide a flexible solution, we've developed the DisplayManager framework. In this article, we'll explore how\u2026","rel":"","context":"In &quot;JAVA&quot;","block_context":{"text":"JAVA","link":"https:\/\/www.mymiller.name\/wordpress\/category\/java\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2016\/12\/board-1364650_640.jpg?fit=640%2C452&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2016\/12\/board-1364650_640.jpg?fit=640%2C452&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2016\/12\/board-1364650_640.jpg?fit=640%2C452&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":3004,"url":"https:\/\/www.mymiller.name\/wordpress\/angular\/angular-material-calendar\/","url_meta":{"origin":3019,"position":5},"title":"Angular Material Calendar","author":"Jeffery Miller","date":"March 29, 2021","format":false,"excerpt":"Sometimes you need to have a calendar for showing information in your web application. After looking around at different implementations and finding none that work. I decided to create my own. This Calendar is not mobile optimized, For that, I created an Agenda that shows a single day at a\u2026","rel":"","context":"In &quot;Angular&quot;","block_context":{"text":"Angular","link":"https:\/\/www.mymiller.name\/wordpress\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2021\/03\/january-2290045_640.jpg?fit=640%2C396&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2021\/03\/january-2290045_640.jpg?fit=640%2C396&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2021\/03\/january-2290045_640.jpg?fit=640%2C396&ssl=1&resize=525%2C300 1.5x"},"classes":[]}],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/posts\/3019","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/comments?post=3019"}],"version-history":[{"count":1,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/posts\/3019\/revisions"}],"predecessor-version":[{"id":3021,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/posts\/3019\/revisions\/3021"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/media\/3020"}],"wp:attachment":[{"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/media?parent=3019"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/categories?post=3019"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/tags?post=3019"},{"taxonomy":"series","embeddable":true,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/series?post=3019"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}