From d1233ebfa8742fdb5a1a2d4e938d9d0fb59998f9 Mon Sep 17 00:00:00 2001
From: Matthieu Riegler <kyro38@gmail.com>
Date: Sat, 1 Mar 2025 00:52:17 +0100
Subject: [PATCH] docs(docs-infra): wait for the DOM to be rendered (#60163)

the code inside `renderExample` is explicitly querying the DOM. We need to wait for it to be rendered for those functions to work.

PR Close #60163
---
 .../docs-viewer/docs-viewer.component.ts      |  4 +-
 .../example-viewer.component.ts               | 42 +++++++++++--------
 2 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/adev/shared-docs/components/viewers/docs-viewer/docs-viewer.component.ts b/adev/shared-docs/components/viewers/docs-viewer/docs-viewer.component.ts
index 098bad86459..4c17dd08b5e 100644
--- a/adev/shared-docs/components/viewers/docs-viewer/docs-viewer.component.ts
+++ b/adev/shared-docs/components/viewers/docs-viewer/docs-viewer.component.ts
@@ -196,13 +196,13 @@ export class DocViewer implements OnChanges {
     const exampleRef = this.viewContainer.createComponent(ExampleViewer);
 
     this.countOfExamples++;
-    exampleRef.instance.metadata = {
+    exampleRef.setInput('metadata', {
       title: title ?? firstCodeSnippetTitle,
       path,
       files: snippets,
       preview,
       id: this.countOfExamples,
-    };
+    });
 
     exampleRef.instance.githubUrl = `${GITHUB_CONTENT_URL}/${snippets[0].name}`;
     exampleRef.instance.stackblitzUrl = `${ASSETS_EXAMPLES_PATH}/${snippets[0].name}.html`;
diff --git a/adev/shared-docs/components/viewers/example-viewer/example-viewer.component.ts b/adev/shared-docs/components/viewers/example-viewer/example-viewer.component.ts
index dbca1f0363a..226b3cd52c2 100644
--- a/adev/shared-docs/components/viewers/example-viewer/example-viewer.component.ts
+++ b/adev/shared-docs/components/viewers/example-viewer/example-viewer.component.ts
@@ -7,6 +7,7 @@
  */
 
 import {
+  afterNextRender,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
@@ -15,6 +16,8 @@ import {
   ElementRef,
   forwardRef,
   inject,
+  Injector,
+  input,
   Input,
   signal,
   Type,
@@ -47,10 +50,7 @@ export const HIDDEN_CLASS_NAME = 'hidden';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ExampleViewer {
-  // TODO: replace by signal-based input when it'll be available
-  @Input({required: true}) set metadata(value: ExampleMetadata) {
-    this.exampleMetadata.set(value);
-  }
+  exampleMetadata = input.required<ExampleMetadata>({alias: 'metadata'});
 
   @Input() githubUrl: string | null = null;
   @Input() stackblitzUrl: string | null = null;
@@ -60,6 +60,7 @@ export class ExampleViewer {
   private readonly clipboard = inject(Clipboard);
   private readonly destroyRef = inject(DestroyRef);
   private readonly document = inject(DOCUMENT);
+  private readonly injector = inject(Injector);
   private readonly elementRef = inject(ElementRef<HTMLElement>);
   private readonly exampleViewerContentLoader = inject(EXAMPLE_VIEWER_CONTENT_LOADER);
 
@@ -76,7 +77,6 @@ export class ExampleViewer {
 
   expandable = signal<boolean>(false);
   expanded = signal<boolean>(false);
-  exampleMetadata = signal<ExampleMetadata | null>(null);
   snippetCode = signal<Snippet | undefined>(undefined);
   tabs = computed(() =>
     this.exampleMetadata()?.files.map((file) => ({
@@ -101,21 +101,27 @@ export class ExampleViewer {
 
     this.snippetCode.set(this.exampleMetadata()?.files[0]);
 
-    this.setCodeLinesVisibility();
+    afterNextRender(
+      () => {
+        // Several function below query the DOM directly, we need to wait until the DOM is rendered.
+        this.setCodeLinesVisibility();
 
-    this.elementRef.nativeElement.setAttribute(
-      'id',
-      `example-${this.exampleMetadata()?.id.toString()!}`,
+        this.elementRef.nativeElement.setAttribute(
+          'id',
+          `example-${this.exampleMetadata()?.id.toString()!}`,
+        );
+
+        this.matTabGroup?.realignInkBar();
+
+        this.listenToMatTabIndexChange();
+
+        const lines = this.getHiddenCodeLines();
+        const lineNumbers = this.getHiddenCodeLineNumbers();
+
+        this.expandable.set(lines.length > 0 || lineNumbers.length > 0);
+      },
+      {injector: this.injector},
     );
-
-    this.matTabGroup?.realignInkBar();
-
-    this.listenToMatTabIndexChange();
-
-    const lines = this.getHiddenCodeLines();
-    const lineNumbers = this.getHiddenCodeLineNumbers();
-
-    this.expandable.set(lines.length > 0 || lineNumbers.length > 0);
   }
 
   toggleExampleVisibility(): void {