Angular: Check if element has a class and add a class to another element

Question

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 :)

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

Siddharth Pal · Accepted Answer · 2019-09-10 09:00:48Z

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

answered Sep 10, 2019 at 9:00

Siddharth Pal

1,45811 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mbojko · Accepted Answer · 2019-09-10 08:57:22Z

2

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.

answered Sep 10, 2019 at 8:57

mbojko

14.8k2 gold badges20 silver badges28 bronze badges

Comments

ForestG · Accepted Answer · 2019-09-10 09:49:55Z

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

in the corresponding component:

@ViewChild('switchSpan') switchSpanElement:ElementRef;

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

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

step: create a boolean variable in the component, 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;
}

Collectives™ on Stack Overflow

Angular: Check if element has a class and add a class to another element

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related