stackblitz<\/a>. Here is my take:<\/p>\n\n\n\nimport {Injectable, TemplateRef, ViewContainerRef} from '@angular\/core';\r\nimport {Overlay, OverlayRef, PositionStrategy} from \"@angular\/cdk\/overlay\";\r\nimport {TemplatePortal} from \"@angular\/cdk\/portal\";\r\n\r\n@Injectable({\r\n providedIn: 'root'\r\n})\r\nexport class OverlayService {\r\n constructor(\r\n private overlay: Overlay\r\n ) { }\r\n createOverlay(config: any): OverlayRef {\r\n return this.overlay.create(config);\r\n }\r\n attachTemplatePortal(overlay: OverlayRef, template: TemplateRef<any>, view: ViewContainerRef) {\r\n let templatePortal = new TemplatePortal(template, view);\r\n overlay.attach(templatePortal);\r\n }\r\n\r\n positionGloballyCenter(): PositionStrategy {\r\n return this.overlay.position()\r\n .global()\r\n .centerHorizontally()\r\n .centerVertically();\r\n }\r\n}<\/code><\/pre>\n\n\n\nMy OverlayService, with not real significant changes. Three methods used to setup the overlay.<\/p>\n\n\n\n
import {Component, DoCheck, Input, OnInit, TemplateRef, ViewChild, ViewContainerRef} from '@angular\/core';\r\nimport {OverlayService} from \"..\/..\/services\/overlay.service\";\r\nimport {OverlayRef} from \"@angular\/cdk\/overlay\";\r\n\r\n@Component({\r\n selector: 'app-loading-spinner',\r\n templateUrl: '.\/loading-spinner.component.html',\r\n styleUrls: ['.\/loading-spinner.component.scss']\r\n})\r\nexport class LoadingSpinnerComponent implements OnInit,DoCheck {\r\n @Input(\"loading\") loading: boolean = true;\r\n @Input(\"message\") message: string = '';\r\n @ViewChild('spinnerRef') private spinnerRef: TemplateRef<any>;\r\n\r\n config:any ={};\r\n private overlay: OverlayRef;\r\n\r\n constructor(private vcRef: ViewContainerRef, private overlayService: OverlayService) { }\r\n\r\n ngOnInit(): void {\r\n this.config = {\r\n hasBackdrop: true,\r\n positionStrategy: this.overlayService.positionGloballyCenter()\r\n };\r\n\r\n this.overlay = this.overlayService.createOverlay(this.config);\r\n }\r\n\r\n ngDoCheck(): void {\r\n if (this.loading && !this.overlay.hasAttached() && this.spinnerRef != undefined) {\r\n this.overlayService.attachTemplatePortal(this.overlay, this.spinnerRef, this.vcRef);\r\n } else if (!this.loading && this.overlay.hasAttached()) {\r\n this.overlay.detach();\r\n }\r\n }\n}\r\n<\/code><\/pre>\n\n\n\nHere is my code for my component. Now I removed many of the inputs, and broke this down to just what I needed. An input to indicate if we are still loading, and the message to indicate what we are doing.<\/p>\n\n\n\n
.center-content {\r\n display:flex;\r\n justify-content:center;\r\n align-items:center;\r\n}<\/code><\/pre>\n\n\n\nThis is my scss to center the content in my HTML. <\/p>\n\n\n\n
<ng-template #spinnerRef>\r\n <mat-card>\r\n <mat-card-header>\r\n <mat-card-title>\r\n {{message}}\r\n <\/mat-card-title>\r\n <\/mat-card-header>\r\n <mat-card-content class=\"center-content\">\r\n <mat-spinner [color]=\"'warn'\">\r\n <\/mat-spinner>\r\n <\/mat-card-content>\r\n <\/mat-card>\r\n<\/ng-template>\r\n\r\n<ng-content><\/ng-content><\/code><\/pre>\n\n\n\nThis will allow the user to see the page as it is built, but keep them from interacting with it until it has completed loading, while showing a nicely formatted mat-card with a spinner that the application is loading.<\/p>\n\n\n\n
<app-loading-spinner [loading]=\"true\" message=\"Loading Data\">\n <p>Waiting for data to load<\/p>\n<\/app-loading-spinner><\/code><\/pre>\n\n\n\nSimple usage your wrapped HTML will be loaded, and a Spinner with message “Loading Data”<\/p>\n","protected":false},"excerpt":{"rendered":"
Just about every project I need to have at least one loading spinner to indicate to the user that data is being loaded and to wait. My recent project I found that to be no exception. I wanted to come up with something that I thought was a little nicer than what I have used […]<\/p>\n","protected":false},"author":1,"featured_media":3031,"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,270],"series":[],"class_list":["post-3029","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","tag-angular","tag-material"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2021\/04\/download-1600351_640.png?fit=640%2C190&ssl=1","jetpack-related-posts":[{"id":2511,"url":"https:\/\/www.mymiller.name\/wordpress\/angular\/angular-environment\/","url_meta":{"origin":3029,"position":0},"title":"Angular Environment","author":"Jeffery Miller","date":"March 11, 2019","format":false,"excerpt":"Building a website for today and tomorrow begins with Angular. Yes I am a proponent of Angular over many other client frameworks. Let's look over the goals of this post to help you get started. Node.jsAngular-CliAngular Workspace Angular Material Installing Node.js First step you need to do is to install\u2026","rel":"","context":"In "Angular"","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\/2019\/03\/geometry-1023846_640.jpg?fit=640%2C359&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2019\/03\/geometry-1023846_640.jpg?fit=640%2C359&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2019\/03\/geometry-1023846_640.jpg?fit=640%2C359&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":2657,"url":"https:\/\/www.mymiller.name\/wordpress\/angular\/angular-material-grid-layout-responsive\/","url_meta":{"origin":3029,"position":1},"title":"Angular Material Grid Layout Responsive","author":"Jeffery Miller","date":"December 16, 2019","format":false,"excerpt":"Angular Material is a powerful extension onto Angular for UI design. I personally fell in love with it before I ever used it. When I started using it I knew I would find things I would want to improve. Material Grid List is so handy to use and makes layouts\u2026","rel":"","context":"In "Angular"","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\/2019\/12\/grid-684983_640.jpg?fit=640%2C480&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2019\/12\/grid-684983_640.jpg?fit=640%2C480&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2019\/12\/grid-684983_640.jpg?fit=640%2C480&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":2940,"url":"https:\/\/www.mymiller.name\/wordpress\/angular\/tips-tricks-for-an-angular-material-library\/","url_meta":{"origin":3029,"position":2},"title":"Tips\/Tricks for an Angular Library","author":"Jeffery Miller","date":"December 21, 2020","format":false,"excerpt":"Tips and tricks for building an Angular Material Library.","rel":"","context":"In "Angular"","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\/start-2465624_640.jpg?fit=640%2C425&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2020\/12\/start-2465624_640.jpg?fit=640%2C425&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2020\/12\/start-2465624_640.jpg?fit=640%2C425&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":2988,"url":"https:\/\/www.mymiller.name\/wordpress\/angular\/angular-structural-directive-onsize\/","url_meta":{"origin":3029,"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 "Angular"","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":2967,"url":"https:\/\/www.mymiller.name\/wordpress\/angular\/translations-in-a-angular-library\/","url_meta":{"origin":3029,"position":4},"title":"Translations in a Angular Library","author":"Jeffery Miller","date":"January 1, 2021","format":false,"excerpt":"Developing a UI library for Angular, I had strings that needed be hardcoded. The question became how do I deal with them. I did not want to embed in ngx-translate into the library. I wanted the user to have the ability to modify the strings as well. So I created\u2026","rel":"","context":"In "Angular"","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\/globe-110775_640.jpg?fit=640%2C341&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2021\/01\/globe-110775_640.jpg?fit=640%2C341&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2021\/01\/globe-110775_640.jpg?fit=640%2C341&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":2847,"url":"https:\/\/www.mymiller.name\/wordpress\/angular\/angular-dymo-label-printer\/","url_meta":{"origin":3029,"position":5},"title":"Angular & DYMO Label Printer","author":"Jeffery Miller","date":"September 14, 2020","format":false,"excerpt":"You can download the DYMO SDK. Now first thing you need to know is that at least at the time of this writing the the dymo.label.framework.js provided in the SDK does not work. Find the Internet Shortcut under the DYMO Label Framework > Samples > Javascript click on any of\u2026","rel":"","context":"In "Angular"","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\/09\/geometry-1023846_640.jpg?fit=640%2C359&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2020\/09\/geometry-1023846_640.jpg?fit=640%2C359&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2020\/09\/geometry-1023846_640.jpg?fit=640%2C359&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\/3029","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=3029"}],"version-history":[{"count":1,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/posts\/3029\/revisions"}],"predecessor-version":[{"id":3032,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/posts\/3029\/revisions\/3032"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/media\/3031"}],"wp:attachment":[{"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/media?parent=3029"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/categories?post=3029"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/tags?post=3029"},{"taxonomy":"series","embeddable":true,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/series?post=3029"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}