diff --git a/aio/src/app/layout/doc-viewer/doc-viewer.component.ts b/aio/src/app/layout/doc-viewer/doc-viewer.component.ts
index a6555dc0b0..0aafede7a6 100644
--- a/aio/src/app/layout/doc-viewer/doc-viewer.component.ts
+++ b/aio/src/app/layout/doc-viewer/doc-viewer.component.ts
@@ -103,13 +103,13 @@ export class DocViewerComponent implements DoCheck, OnDestroy {
   private addTitleAndToc(docId: string) {
     this.tocService.reset();
     let title = '';
-    const translatedTitleEl = this.hostElement.querySelector('h1[translation-result]');
-    const originalTitleEl = this.hostElement.querySelector('h1[translation-origin]');
+    const translatedTitleEl = this.hostElement.querySelector('h1[translation-result]') as HTMLElement;
+    const originalTitleEl = this.hostElement.querySelector('h1[translation-origin]') as HTMLElement;
     const titleEl = translatedTitleEl || originalTitleEl;
     // Only create TOC for docs with an <h1> title
     // If you don't want a TOC, add "no-toc" class to <h1>
     if (titleEl) {
-      title = (titleEl.textContent).trim();
+      title = (titleEl.innerText || titleEl.textContent).trim();
       if (!/(no-toc|notoc)/i.test(titleEl.className)) {
         this.tocService.genToc(this.hostElement, docId);
         (originalTitleEl || translatedTitleEl).insertAdjacentHTML('afterend', '<aio-toc class="embedded"></aio-toc>');