Renderer2 selecting element by selectRootElement make it's content disappear

Question

When trying to create a tab component using Renderer2 to select a tab element, and try to add some css class to change color for example for selected tab that is currently not selected, the HTML element disappear completely from DOM:

Here is the tab html template:

<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've added some css to make the anchor tag have the same height as the parent div,

so when using Renderer2 as:

...

constructor(private route: ActivatedRoute, private renderer: Renderer2) {}

...

let elm = this.renderer.selectRootElement(".nav-item a");

this.renderer.addClass(elm, 'nav-item');

CSS:

.nav-item {
  background-color: LightBlue;
}

Then the achor tag disapears completly from the DOM when executing:

this.renderer.addClass(elm, 'nav-item');

is there any reason for this ?

may be the way selectRootElement works is the issue ?

any one has an idea on this ?

I've already verified in devtools that elm refers to the right element in debug mode by hovering the printed elm variable.

Answer 1

This is the default behavior of selectRootElement(). See Documentation

To preserve content pass a second (boolean) parameter like this:

let elm = this.renderer.selectRootElement(".nav-item a", true);

Answer 2

The thing which you want to achieve can be done using @viewChild

import { Component, ElementRef, ViewChild, Renderer2 } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  @ViewChild('test') test: ElementRef;

  constructor(private renderer: Renderer2) {}

  addActiveClass() {
    this.renderer.addClass(this.test.nativeElement, 'active');
  }

  removeActiveClass() {
    this.renderer.removeClass(this.test.nativeElement, 'active');
  }
}

<button class="btn btn-primary" (click)="addActiveClass()">Aggiungi classe</button>
<button class="btn btn-danger" (click)="removeActiveClass()">Rimuovi classe</button>
<p #test>Here it is </p>

Here is the link to codesandbox