Server/Client side only - Angular Directive

server-client-side-only.directive.ts

import { Directive, Inject, NgModule, OnInit, PLATFORM_ID, TemplateRef, ViewContainerRef } from '@angular/core';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';

/**
 * Add the template content to the DOM based on platform
 */

@Directive({ selector: '[serverSideOnly]' })
export class ServerSideOnlyDirective implements OnInit {

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

  ngOnInit(): void {
    if (isPlatformServer(this.platformId)) {
      this.vcr.createEmbeddedView(this.templateRef);
    } else {
      this.vcr.clear();
    }
  }

}


@Directive({ selector: '[clientSideOnly]' })
export class ClientSideOnlyDirective implements OnInit {

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

  ngOnInit(): void {
    if (isPlatformBrowser(this.platformId)) {
      this.vcr.createEmbeddedView(this.templateRef);
    } else {
      this.vcr.clear();
    }
  }

}


@NgModule({
  declarations: [ ServerSideOnlyDirective, ClientSideOnlyDirective ],
  exports: [ ServerSideOnlyDirective, ClientSideOnlyDirective ]
})
export class ServerClientSideOnlyModule { }

Usage:

Show only on server-side:

<ng-container *serverSideOnly>
  Shown only on server (node server)
</ng-container>

Show only on client-side:

<ng-container *clientSideOnly>
  Shown only on client (web browser)
</ng-container>