I am trying to create an online book which has sections, subsections, sub-subsections, theorems, figures, tables, etc. There will be numbers associated with each. Basically, what LaTeX offers but using TypeScript and Angular 18.

The purpose of this question is to implement the notion of references. For example, suppose we are in section 3 and wanted to refer to figure 7 from section 1. A sample clickable text might be: please refer to Figure 1.7 for further information.

There are several objectives to achieve:

• The numberings need to be automatically generated.
• It should be simple to label a section, figure, etc. to refer to later in the HTML template. For example, something similar to:

   <subsection ref="sec-variables" title="Introduction to Variables">
   The rest of the subsection content...
   </subsection>

• The references have to work properly along with associating the target’s numbering, automatically. They need to be clickable and should navigate to the appropriate position of the target.

• A table/list of content needs to be generated, which contains the sections, subsections and sub-subsections, again, automatically.

The issue is that I don’t know what is the optimal approach here. What I tried is creating a directive called ref and was able to attach it to a service to keep track of the directives used in a component. However, this would only get the instances of the directive used in the current component and without numbering. Using this approach wouldn’t allow for automatic numbering and referencing.

The following needs to be clarified:

• A typical page will have a table of content as a sidenav and the rest of the content as:
  • The content of the clicked subsection along with its sub-subsections
  • In case a section is clicked, we could just show show the titles of all of the subsections and sub-subsection it contains.
• Each section, subsection, etc. will have an optional reference id and a mandatory title. What should each element be? I am guessing a component?
• In case an element has an optional reference id, it could be referenced later on. Should a directive be used?
• The numberings need to be automatically generated.

I am not an expert in Angular and would appreciate any guidance to achieving all of the above. Thank you for your time!