Is it possible to parse the templateURL in an Angular component? - html

Question

I wish to generate a Table of Contents ( ToC ) by parsing the HTML that is already present in the templateUrl of my component.
This is my component.ts :
#Component({
selector: 'app-presentation',
templateUrl: './presentation.component.html',
styleUrls: ['./presentation.component.css']
})
export class PresentationComponent implements OnInit {
public toc = '';
constructor() { }
ngOnInit(): void {
// parse tempalteUrl here
// set the this.toc variable
}
}
and this is my component.html :
<div class="container">
<div class="row">
<div class="col-sm-4">
{{toc}}
</div>
<div class="col-sm-8">
<h1>Title</h1>
<h2>Sub Title1</h2>
<p>some text</p>
<h2>Sub Title2</h2>
<p>more text</p>
<h1>Title2</h1>
<h2>Sub Title3</h2>
<p>random text</p>
<h2>Sub Title4</h2>
<p>extra text</p>
</div>
</div>
</div>
What I wish to do is to extract all of the and children and then use them to generate the ToC.
Only <div class="col-sm-8"> has the elements I am interested in
All <h1> are direct children of that div
All <h2> are direct children of a <h1>
The aim of what I am trying to do is have as little HTML as possible to edit at each update when I want to change the content of my website.

Answer 1

Couple ways I can think of are inject ElementRef if just reading whole HTML doc, Renderer2 if going to modify HTML and output in ngOnInit(); add template ref and read ViewChild in ngAfterViewInit()
<div #toc class="col-sm-8">...</div>
import { Component , ElementRef, ViewChild } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
#ViewChild('toc') toc: ElementRef;
constructor(private elRef: ElementRef) {}
ngOnInit() {
console.log(this.elRef.nativeElement.innerHTML);
}
//template ref + viewChild
ngAfterViewInit() {
console.log(this.toc.nativeElement.innerHTML);
}
}