[Angular][XMC] Ensure context is available at the time of placeholder rendering

CHANGELOG.md

@@ -19,6 +19,7 @@ Our versioning strategy is as follows:
 * `[sitecore-jss-nextjs]` `[sitecore-jss]` Resolved an issue with Netlify where URL query parameters were being sorted, causing redirect failures. Added a method to generate all possible permutations of query parameters, ensuring proper matching with URL patterns regardless of their order. ([#1935](https://github.com/Sitecore/jss/pull/1935))
 * `[sitecore-jss-angular]` Fix default empty field components to not render the unwanted wrapping tags ([#1937](https://github.com/Sitecore/jss/pull/1937)) ([#1940](https://github.com/Sitecore/jss/pull/1940))
 * `[sitecore-jss-angular]` Fix image field style property not rendered properly ([#1944](https://github.com/Sitecore/jss/pull/1944))
+* `[sitecore-jss-angular]` Fix nested dynamic placeholders not being displayed in Pages ([#1947](https://github.com/Sitecore/jss/pull/1947))
 
 ### 🎉 New Features & Improvements
 

packages/sitecore-jss-angular/src/components/placeholder.component.spec.ts

@@ -1269,4 +1269,20 @@ describe('Placeholder Metadata: dynamic placeholder:', () => {
       expect(cleanedRenderedHTML).toEqual(expectedHTML);
     })
   );
+
+  fit(
+    'should retain correct name of dynamic placeholder',
+    waitForAsync(async () => {
+      const layoutData = layoutDataForNestedDynamicPlaceholder('container-{*}');
+      const component = layoutData.sitecore.route;
+      const phKey = 'container-2';
+      comp.name = phKey;
+      comp.rendering = (component as unknown) as ComponentRendering;
+
+      fixture.detectChanges();
+      await fixture.whenStable();
+      const placeholder = de.query(By.css('sc-placeholder')).componentInstance;
+      expect(Object.keys(placeholder?.rendering?.placeholders || [])).toEqual(['container-{*}']);
+    })
+  );
 });

packages/sitecore-jss-angular/src/components/placeholder.component.ts

@@ -127,7 +127,6 @@ export class PlaceholderComponent implements OnInit, OnChanges, DoCheck, OnDestr
   private placeholderData?: (ComponentRendering<ComponentFields> | HtmlElementRendering)[];
   private destroyed = false;
   private parentStyleAttribute = '';
-  private editMode?: EditMode = undefined;
   private contextSubscription: Subscription;
 
   constructor(
@@ -145,7 +144,11 @@ export class PlaceholderComponent implements OnInit, OnChanges, DoCheck, OnDestr
     // eslint-disable-next-line @typescript-eslint/ban-types
     @Inject(PLATFORM_ID) private platformId: Object,
     private jssState: JssStateService
-  ) {}
+  ) {
+    this.contextSubscription = this.jssState.state.subscribe(({ sitecore }) => {
+      this.metadataMode = sitecore?.context.editMode === EditMode.Metadata;
+    });
+  }
 
   @Input()
   set inputs(value: { [key: string]: unknown }) {
@@ -170,10 +173,6 @@ export class PlaceholderComponent implements OnInit, OnChanges, DoCheck, OnDestr
       }
     }
     this.placeholderData = this.renderings || this.getPlaceholder() || [];
-    this.contextSubscription = this.jssState.state.subscribe(({ sitecore }) => {
-      this.editMode = sitecore?.context.editMode;
-      this.metadataMode = this.editMode === EditMode.Metadata;
-    });
   }
 
   ngOnDestroy() {
@@ -267,7 +266,7 @@ export class PlaceholderComponent implements OnInit, OnChanges, DoCheck, OnDestr
           ? getDynamicPlaceholderPattern(placeholder)
           : null;
         if (patternPlaceholder && patternPlaceholder.test(phName)) {
-          if (this.editMode === EditMode.Metadata) {
+          if (this.metadataMode) {
             phName = placeholder;
           } else {
             this.rendering.placeholders![phName] = this.rendering.placeholders![placeholder];