How can I check with Angular if a DOM element has a class and then add a class to another element?

My Template:

<div class="d-table">
  <ui-switch class="d-table-cell">
    <span class="switch">
      <small></small>
    </span>
  </ui-switch>
  <span class="d-table-cell"> 
    sign in
  </span>
</div>

If the span with the class switch has also the class checked, then the color of the text between the span element with the class d-table-cell should be black, otherwise the color should be gray.

No problem with jQuery, but I want to do it the right Angular way :)

How can I check with Angular if a DOM element has a class and then add a class to another element?

My Template:

<div class="d-table">
  <ui-switch class="d-table-cell">
    <span class="switch">
      <small></small>
    </span>
  </ui-switch>
  <span class="d-table-cell"> 
    sign in
  </span>
</div>

If the span with the class switch has also the class checked, then the color of the text between the span element with the class d-table-cell should be black, otherwise the color should be gray.

No problem with jQuery, but I want to do it the right Angular way :)

• javascript
• jquery
• angular
• typescript
• ng-class

• why you cannot use jquery here, with angular why you are making your dom plicated?? – DHRUV GUPTA Commented Sep 10, 2019 at 9:04

3 Answers 3

.gray {
  color:gray;
}
.black {
  color: black;
}

<div class="d-table">
	<span class="switch" #switch>
      <small></small>
    </span>
  <span class="d-table-cell" [ngClass]="switch.classList.contains('checked')  ? 'gray' : 'black'"> 
    sign in
  </span>
</div>

We can create template reference variables and can directly access them in the template to get attributes, classes and etc. #switch is a template reference variable

stackblitz

The Angular way would be to avoid, if possible, direct, low-level DOM manipulation. Tie the checked class to some model, and tie the d-table-cell's class to the same model. Like that:

<div class="d-table">
  <ui-switch class="d-table-cell" [class.checked]="someVariable">
    <span class="switch">
      <small></small>
    </span>
  </ui-switch>
  <span class="d-table-cell" [class.active]="someVariable"> 
    sign in
  </span>
</div>

and in TS

someVariable: boolean;

Maybe tie someVariable to an ngModel of some input, or whatever logic should dictate whether the switch is checked or not.

1. step: create a template ref for the main element like this: HTML:

in the corresponding ponent:

@ViewChild('switchSpan') switchSpanElement:ElementRef;

After this, you can check the classlist of the said element like this:

 if(switchSpanElement:ElementRef.nativeElement.classList.contains('checked')) {
    ...
  }

2. step: create a boolean variable in the ponent, that you can access in the template as well (==don't make it private).

isSwitchChecked = false;

and you can make it check whether the class was added when change detecion runs (from this answer, syntax here)

   class <yourComponent> implements DoCheck
    ...
    ngDoCheck() {
      this.isSwitchChecked =  witchSpanElement:ElementRef.nativeElement.classList.contains('checked');
    } 

you can then bind that boolean variable in the template to add a class to the said span:

 <span class="d-table-cell" [ngClass]={'some-class':isSwitchChecked}> 
    sign in
  </span>

and you can define a class in css:

.some-class{
   background-color: gray;
}