Angular Universal In Depth

Author: Your Name

src/app/app.component.html

@@ -33,6 +33,12 @@
     </button>
   </mat-toolbar>
 
+   <div class="spinner-container" *appShellRender>
+
+    <mat-spinner></mat-spinner>
+
+</div>
+
 
   <router-outlet></router-outlet>
 

src/app/app.module.ts

@@ -29,6 +29,7 @@ import { CourseDialogComponent } from './course-dialog/course-dialog.component';
 import {ReactiveFormsModule} from "@angular/forms";
 import { HttpClientModule} from '@angular/common/http';
 import {AboutComponent} from './about/about.component';
+import {AppShellRenderDirective} from "./directives/app-shell-render.directive";
 
 
 
@@ -41,7 +42,8 @@ import {AboutComponent} from './about/about.component';
     CourseComponent,
     CoursesCardListComponent,
     CourseDialogComponent,
-    AboutComponent
+    AboutComponent,
+    AppShellRenderDirective
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'serverApp' }),

src/app/directives/app-shell-render.directive.ts

@@ -0,0 +1,28 @@
+import {
+    Directive, Inject, OnInit, PLATFORM_ID,
+    TemplateRef, ViewContainerRef
+} from "@angular/core";
+import {isPlatformServer} from "@angular/common";
+
+@Directive({
+    selector: "[appShellRender]"
+})
+export class AppShellRenderDirective implements OnInit {
+
+    constructor(@Inject(PLATFORM_ID) private platformId,
+                private templateRef: TemplateRef<any>,
+                private viewContainer: ViewContainerRef) {
+
+    }
+
+    ngOnInit() {
+        if (isPlatformServer(this.platformId)) {
+            this.viewContainer.createEmbeddedView(this.templateRef);
+        }
+        else {
+            this.viewContainer.clear();
+        }
+
+    }
+
+}