Client-side render some components when using Angular Universal-CodePudding

I am using Angular Universal for most of my website so that I can pre-render the content for SEO. It is meant to be a public facing site.

I would like to be able to make certain components client-side rendered ONLY to avoid bundling content such as email addresses and social media links from being discoverable by web crawlers.

I used the Angular Universal generated application to create my app. Currently, ALL my components are being rendered server-side. I couldn't find any specific clear example where someone used Angular in an elegant manner to achieve this specific goal. My intent is make my contact info and social media links components completely client-side rendered and added to the DOM at runtime to avoid bots and web crawlers from seeing it.

How do others achieve this without doing something hacky?

CodePudding user response：

You can use isPlatformBrowser helper method for Angular and wrap all code in this helper method like below:

import { isPlatformBrowser } from '@angular/common';


export class Component {
   constructor(
     @Inject(PLATFORM_ID) private platformId: string,
   ){}

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


<div *ngIf="isBrowserOnly">
  will be shown only in the browser
</div>


```