diff --git a/adev/shared-docs/components/viewers/example-viewer/example-viewer.component.html b/adev/shared-docs/components/viewers/example-viewer/example-viewer.component.html
index b95b642f2bc..d165cf6e22b 100644
--- a/adev/shared-docs/components/viewers/example-viewer/example-viewer.component.html
+++ b/adev/shared-docs/components/viewers/example-viewer/example-viewer.component.html
@@ -21,7 +21,7 @@
         [class.docs-example-code-toggle__show]="!showCode()"
         [attr.aria-checked]="showCode()"
         [attr.aria-label]="showCode() ? 'Hide code' : 'Show code'"
-        (click)="showCode.set(!showCode())"
+        (click)="toggleCodeVisibility()"
         [matTooltip]="showCode() ? 'Hide code' : 'Show code'"
         matTooltipPosition="above"
       >
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 54251f2461b..a7cd5cf5d34 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
@@ -116,6 +116,15 @@ export class ExampleViewer {
     this.setCodeLinesVisibility();
   }
 
+  toggleCodeVisibility(): void {
+    const showCode = !this.showCode();
+    this.showCode.set(showCode);
+
+    if (showCode) {
+      afterNextRender(() => this.setCodeLinesVisibility(), {injector: this.injector});
+    }
+  }
+
   copyLink(): void {
     // Reconstruct the URL using `origin + pathname` so we drop any pre-existing hash.
     const fullUrl =