Trying to implement a tab component using Renderer2 to manipulate the selected tab element and apply CSS classes for styling, I encountered an issue where the HTML element disappears entirely from the DOM:
Below is the template for the tab structure:
<div class="detail-nav">
<div class="nav-item-1">
<a routerLink="main-config" routerLinkActive="active" (click)=actionItem1()>
<span>Main config</span>
</a>
</div>
<div class="nav-item-2">
<a routerLink="sub-config" routerLinkActive="active" (click)=actionItem2()>
<span>Handling data</span>
</a>
</div>
<div class="nav-item-3">
<a routerLink="editing" routerLinkActive="active" (click)=actionItem3()>
<span>Editing</span>
</a>
</div>
<div>
I tried ensuring the anchor tag had the same height as its parent div by adding some custom CSS,
and then using Renderer2 like this:
...
constructor(private route: ActivatedRoute, private renderer: Renderer2) {}
...
let elm = this.renderer.selectRootElement(".nav-item a");
this.renderer.addClass(elm, 'nav-item');
Applied CSS:
.nav-item {
background-color: LightBlue;
}
However, the anchor tag disappeared from the DOM after executing:
this.renderer.addClass(elm, 'nav-item');
What could be causing this issue?
Is there something wrong with how selectRootElement functions?
If anyone has any insights or ideas, they would be greatly appreciated.
I did verify in devtools that the correct element was being referenced by the elm variable during debugging.