Directives and Pipes in Angular/

...

/

Solution: The Built-in `NgStyle` Directive

Solution: The Built-in `NgStyle` Directive

Let’s compare our results with the expected results.

We'll cover the following...

Solution

Here’s an example of what the solution for this task may look like:

<section>
  <span>Red:</span>
  <input type="range" min="0" max="255" value="0" (change)="updateRed($event)">
  <div [ngStyle]="redStyle">{{red}}</div>
</section>

<section>
  <span>Green:</span>
  <input type="range" min="0" max="255" value="0" (change)="updateGreen($event)">
  <div [ngStyle]="greenStyle">{{green}}</div>
</section>

<section>
  <span>Blue:</span>
  <input type="range" min="0" max="255" value="0" (change)="updateBlue($event)">
  <div [ngStyle]="blueStyle">{{blue}}</div>
</section>

<hr>

<section>
  <span>Result:</span>
  <div [ngStyle]="resultStyle"></div>
</section>
Solution for the task

Explanation

Basically, all the four div styles ...