Angular <div> color change from script

Question

im working on a angular 6. im changing the colors of a div tag from a script after a click function i need to change it back to transparent

Here is my View when i click the inheritance first line gets background color gets changed

after clicking inheritance when i click the Method Overriding the second lines get highlighted But i need to remove the background color from first line

Html code for side bar

  <div *ngFor="let classes of classesObject ">
    <input id='{{classes}}' name='radio' type='radio'>
    <label (click)="clickClass(classes)" for='{{classes}}'>
      {{classes}}
      <div class='lil_arrow'></div>
      <div class='bar'></div>
      <div class='swanky_wrapper__content'>
        <ul *ngFor="let conceptName of concepts">
          <li (click)="getConcepts(conceptName['conceptName'],[classes])">{{conceptName["conceptName"]}}</li>
        </ul>
      </div>
    </label>
  </div>

Html code for line display

 <div *ngFor="let lines of lineList; let i= index">
    <div id="line_{{i}}" class="code" >&nbsp;&nbsp;{{lines}}</div>
 </div>

Typescript code for getConcept method

  for (var no in this.relatedLineNo) {
    var lines = this.relatedLineNo[no] - 1;
    document.getElementById(`line_` + lines).style.backgroundColor = "black";
    document.getElementById(`line_` + lines).style.color = "white";
    document.getElementById(`line_` + lines).style.cursor = "pointer";
    document.getElementById(`line_` + lines).setAttribute("tooltip", this.messageTip);
  }

robert · Accepted Answer · 2019-06-02 17:38:16Z

2

Instead of manually looking up lines in a for loop with this:

document.getElementById(

Try a bit more Angular-ish approach:

[ngClass]="{ hilite: i === relatedLineNo }"

What happens is that inside your *ngFor loop Angular will evaluate current line index "i" with relatedLineNo and will "automatically" highlight the line.

UPDATE

If "relatedLineNo" is an array then you can use this:

[ngClass]="{ hilite: relatedLineNo.indexOf(i) !== -1 }"

Working and updated stackblitz.

edited Jun 2, 2019 at 17:38

answered Jun 1, 2019 at 21:32

robert

6,1907 gold badges31 silver badges41 bronze badges

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

Collectives™ on Stack Overflow

Angular <div> color change from script

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related