Style HTML object using component function

Question

<table *ngIf="datoer">
        <tr>
          <th>Man</th>
          <th>Tir</th>
          <th>Ons</th>
          <th>Tor</th>
          <th>Fre</th>
          <th>Lør</th>
          <th>Søn</th>
        </tr>
        <tr>
            <td *ngFor="let cell of ukeEn()">
                {{cell.text}}
                <div class="outer" *ngIf="datoerContains(cell) != null">
                  <div class="circle" id="circle" *ngFor="let circle of datoerContains(cell)">
                // <script>
                // document.getElementById("circle").style.background-color = anyFunction();
                // </script>
              </div>
              <div class="details" *ngFor="let circle of datoerContains(cell)"> 
                    {{circle.skole}} <br>
                    {{circle.kommentar}} <br>
                    SFO: {{circle.sfodag}}
                  </div>

                </div>
            </td>            
        </tr>
</table>

This is written in html with Angular 2. What I want to do, is to set the background color of class circle by calling a function from my component.ts file which returns a string like 'red'. Check the comments on how I want it to work. Is this possible? If yes, how?

Günter Zöchbauer · Accepted Answer · 2016-11-14 20:50:36Z

2

You can use style binding or the ngStyle directive:

<div class="circle" id="circle" [style.background-color]="anyFunction()"
<div class="circle" id="circle" [ngStyle]="{'background-color': anyFunction()"

Directly binding to functions is discouraged though, because these functions are called every change detection cycle. It's usually more efficient to assign the result of such a function to a property and bind from the view to that property.

answered Nov 14, 2016 at 20:50

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

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

2 Comments

MariusJ Over a year ago

Excellent, thanks! What do you mean with 'bind from the view to that property'? Like for example anyFunction().color?

Günter Zöchbauer Over a year ago

For example you have an @Input set color(value: String) { this.backgroundColor = anyFunction(value); } and then use [style.background-color]="backgroundColor". This way you don't bind to a function directly.

Collectives™ on Stack Overflow

Style HTML object using component function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related