In Angular 17 SSR, initial load displays slides stacked in a column even when the numbers of items per breakpoint is 1.

[devKwenda]

[Syamhere]

Fix the carousel rendering issue in Angular 17 SSR by adding a platform check

Added a condition to wrap the carousel in an *ngIf="isBrowser" directive to ensure it only renders on the client side. This prevents the carousel from stacking items on the initial load due to server-side rendering (SSR) rendering the same content, ensuring proper display in the browser.

constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

ngOnInit() {
  this.isBrowser = isPlatformBrowser(this.platformId);
}

[CedBadarou]

Fix the carousel rendering issue in Angular 17 SSR by adding a platform check

Added a condition to wrap the carousel in an *ngIf="isBrowser" directive to ensure it only renders on the client side. This prevents the carousel from stacking items on the initial load due to server-side rendering (SSR) rendering the same content, ensuring proper display in the browser.

constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

ngOnInit() {
  this.isBrowser = isPlatformBrowser(this.platformId);
}

This means that the carousel won't be in the HTML sent by the server ? Isn't it a problem, SEO wise ?