SEO-SPA: If Platform Directive

if-platform.directive.ts

import { Directive, Input, TemplateRef, ViewContainerRef, PLATFORM_ID, Inject } from '@angular/core';
import { isPlatformServer, isPlatformBrowser } from '@angular/common';
/**
 * Adds the template content to the DOM only if the platform is the requested platform
 * 
 * Usage to make a component only visible on client renders:
 * <div *ifPlatform="'browser'">....</div>
 * 
 * Usage to make a component only visible on server renders:
 * <div *ifPlatform="'server'">...</div>
 */
@Directive({ 
    selector: '[ifPlatform]'
})
export class IfPlatformDirective {
  private hasView = false;

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef,
    @Inject(PLATFORM_ID) private platformId: Object,
  ) { }

  @Input() set ifPlatform(platform: 'browser' | 'server') {

    let satisfied = (platform == 'browser' && this.isBrowserMode)
    || (platform == 'server' && this.isServerMode);
    if (satisfied && !this._hasView) {
      this.viewContainer.createEmbeddedView(this.templateRef);
      this.hasView = true;
    } else if (!satisfied && this.hasView) {
      this.viewContainer.clear();
      this.hasView = false;
    }
  }

  get isServerMode(): boolean {
    return isPlatformServer(this.platformId);
  }

  get isBrowserMode(): boolean {
    return isPlatformBrowser(this.platformId);
  }
}