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
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!