Routing transfer to placeholders in the JSS Angular sample app

Placeholders are vital components in any application built with Sitecore JSS. To provide examples, this topic uses the Sitecore JSS Angular sample application.

The JSS Angular sample application comes with a root placeholder. The root placeholder is defined in src/app/routing/layout/layout.component.html.

The sc-placeholder component is imported from Sitecore JSS for Angular, @sitecore-jss/sitecore-jss-angular.

<sc-placeholder name="jss-main" [rendering]="route" (loaded)="onPlaceholderLoaded($event)"></sc-placeholder><sc-placeholder name="jss-main" [rendering]="route"></sc-placeholder>

This root placeholder handles rendering route data from the router.

The Angular sc-placeholder component has a name attribute with the value jss-main, indicating that it represents the Sitecore placeholder named jss-main. The placeholder renders one or more components based on route data, as indicated by the data bound to the [rendering] input of the placeholder component:

[rendering]="route"

You can trace where route data comes from and see in the src/app/routing/layout/layout.component.ts file that you get a route reference injected:

export class LayoutComponent implements OnInit, OnDestroy {
  route: RouteData;
  state: LayoutState;
  LayoutState = LayoutState;
  subscription: Subscription;
  errorContextData: LayoutServiceContextData;

  constructor(
    private activatedRoute: ActivatedRoute,
    private readonly meta: MetaService,
  ) { }
...
}

This route reference contains the data observable that you can subscribe to and receive current route data during route changes:

route: RouteData;

ngOnInit() {
  this.subscription = this.activatedRoute.data.subscribe((data: { jssState: JssState }) => {
    this.route = data.jssState.sitecore.route;
  }
}

Because it has access to the placeholder object within the route property, the sc-placeholder component handles finding the matching placeholder by name and rendering the array of components defined for the placeholder in the route data. The following is an example of a component implementation. The sc-placeholder sets the rendering input automatically:

import { Component, Input } from '@angular/core';
import { ComponentRendering } from '@sitecore-jss/sitecore-jss-angular';

@Component({
  selector: 'app-welcome',
  templateUrl: './welcome.component.html',
})
export class WelcomeComponent {
  @Input() rendering: ComponentRendering;
}

The rendering property includes all the information available to the component, including data fields:

{
  componentName: 'Welcome',
  fields: {
    title: {
      value: 'Sitecore Experience Platform + JSS',
    },
    text: {
      value: '<p>...</p>',
    },
    logoImage: {
      value: {
        src: '/sitecore/assets/sc_logo.png',
        alt: 'Logo'
      },
    },
  }
}