HTML code for Angular material table of contents

Question

I am in the process of creating a long HTML page. I was interested in adding a table of contents just like in angular material however I cannot find any documentation on it anywhere. This is type of table of contents I'm looking for:

Angular Table of Contents(https://i.sstatic.net/oflKg.jpg)

I have seen some npm alternatives but I'm not interested in those.

The code for the angular table of contents is as follows:

<table-of-contents container=".mat-drawer-content" _nghost-lwx-c20="" class="ng-star-inserted">
          <!---->
          <div _ngcontent-lwx-c20="" class="docs-toc-container ng-star-inserted">
            <div _ngcontent-lwx-c20="" class="docs-toc-heading">Contents</div>
            <nav _ngcontent-lwx-c20="">
              <!----><a _ngcontent-lwx-c20="" href="/components/datepicker/overview#connecting-a-datepicker-to-an-input"
                class="docs-level-h3 docs-link ng-star-inserted"> Connecting a datepicker to an input </a><a
                _ngcontent-lwx-c20="" href="/components/datepicker/overview#setting-the-calendar-starting-view"
                class="docs-level-h3 docs-link ng-star-inserted"> Setting the calendar starting view </a><a
                _ngcontent-lwx-c20=""
                href="/components/datepicker/overview#watching-the-views-for-changes-on-selected-years-and-months"
                class="docs-level-h4 docs-link ng-star-inserted"> Watching the views for changes on selected years and
                months </a><a _ngcontent-lwx-c20="" href="/components/datepicker/overview#setting-the-selected-date"
                class="docs-level-h3 docs-link ng-star-inserted"> Setting the selected date </a><a _ngcontent-lwx-c20=""
                href="/components/datepicker/overview#changing-the-datepicker-colors"
                class="docs-level-h3 docs-link ng-star-inserted"> Changing the datepicker colors </a><a
                _ngcontent-lwx-c20="" href="/components/datepicker/overview#date-validation"
                class="docs-level-h3 docs-link ng-star-inserted"> Date validation </a><a _ngcontent-lwx-c20=""
                href="/components/datepicker/overview#input-and-change-events"
                class="docs-level-h3 docs-link ng-star-inserted"> Input and change events </a><a _ngcontent-lwx-c20=""
                href="/components/datepicker/overview#disabling-parts-of-the-datepicker"
                class="docs-level-h3 docs-link ng-star-inserted"> Disabling parts of the datepicker </a><a
                _ngcontent-lwx-c20="" href="/components/datepicker/overview#touch-ui-mode"
                class="docs-level-h3 docs-link ng-star-inserted"> Touch UI mode </a><a _ngcontent-lwx-c20=""
                href="/components/datepicker/overview#manually-opening-and-closing-the-calendar"
                class="docs-level-h3 docs-link ng-star-inserted"> Manually opening and closing the calendar </a><a
                _ngcontent-lwx-c20="" href="/components/datepicker/overview#internationalization"
                class="docs-level-h3 docs-link ng-star-inserted"> Internationalization </a><a _ngcontent-lwx-c20=""
                href="/components/datepicker/overview#setting-the-locale-code"
                class="docs-level-h4 docs-link ng-star-inserted"> Setting the locale code </a><a _ngcontent-lwx-c20=""
                href="/components/datepicker/overview#choosing-a-date-implementation-and-date-format-settings"
                class="docs-level-h4 docs-link ng-star-inserted"> Choosing a date implementation and date format
                settings </a><a _ngcontent-lwx-c20=""
                href="/components/datepicker/overview#customizing-the-parse-and-display-formats"
                class="docs-level-h4 docs-link ng-star-inserted"> Customizing the parse and display formats </a><a
                _ngcontent-lwx-c20="" href="/components/datepicker/overview#customizing-the-calendar-header"
                class="docs-level-h4 docs-link ng-star-inserted"> Customizing the calendar header </a><a
                _ngcontent-lwx-c20="" href="/components/datepicker/overview#localizing-labels-and-messages"
                class="docs-level-h4 docs-link ng-star-inserted"> Localizing labels and messages </a><a
                _ngcontent-lwx-c20="" href="/components/datepicker/overview#highlighting-specific-dates"
                class="docs-level-h4 docs-link ng-star-inserted"> Highlighting specific dates </a><a
                _ngcontent-lwx-c20="" href="/components/datepicker/overview#accessibility"
                class="docs-level-h3 docs-link ng-star-inserted"> Accessibility </a><a _ngcontent-lwx-c20=""
                href="/components/datepicker/overview#keyboard-interaction"
                class="docs-level-h4 docs-link ng-star-inserted"> Keyboard interaction </a><a _ngcontent-lwx-c20=""
                href="/components/datepicker/overview#troubleshooting" class="docs-level-h3 docs-link ng-star-inserted">
                Troubleshooting </a><a _ngcontent-lwx-c20=""
                href="/components/datepicker/overview#error-matdatepicker-no-provider-found-for-dateadapter-mat_date_formats"
                class="docs-level-h4 docs-link ng-star-inserted"> Error: MatDatepicker: No provider found for
                DateAdapter/MAT_DATE_FORMATS </a><a _ngcontent-lwx-c20=""
                href="/components/datepicker/overview#error-a-matdatepicker-can-only-be-associated-with-a-single-input"
                class="docs-level-h4 docs-link ng-star-inserted"> Error: A MatDatepicker can only be associated with a
                single input </a><a _ngcontent-lwx-c20=""
                href="/components/datepicker/overview#error-attempted-to-open-an-matdatepicker-with-no-associated-input-"
                class="docs-level-h4 docs-link ng-star-inserted"> Error: Attempted to open an MatDatepicker with no
                associated input. </a></nav>
          </div>
        </table-of-contents>

When I try to run this code, the console prints <table-of-contents> is not a known element

Answer 1

So for those who are running into a similar situation, I'm posting the solution below which was to create the component yourself. I inspected angular material and rebuilt it.

Here is the HTML code you will need:

<div class="tableOfContentContainer">
  <div class="tableOfContent docs-toc-container">
    <div class="docs-toc-heading">Contents</div>
    <nav>
      <a href="/components/list/overview#simple-lists" class="docs-level-h3 docs-link ng-star-inserted">Simple lists</a>
      <br>
      <a href="/components/list/overview#navigation-lists" class="docs-level-h3 docs-link ng-star-inserted">Navigation lists</a>
    </nav>
  </div>
</div>

Here is the associated CSS:

.tableOfContentContainer{
    padding-top: 1em;
    padding-left: 2em;
    position: fixed;
}
.docs-toc-container {
    border-left: 4px solid #3f51b5;
    font-weight: 700;
}
a {
    text-decoration: none;
    color: #737373;
    font-weight: 400 !important;
}
a:hover{
    color: #3f51b5;
}
.tableOfContent{
    padding: 5px 0 10px 10px;
    font-size: 13px;
}

And that should be all that you need. There might be some styling missing as my project has a lot of other css styling. So good luck everyone and I hope this helps!