Search⌘ K
AI Features
Home
Courses
Directives and Pipes in Angular

Solution: The Built-in `NgStyle` Directive

Explore how to implement Angular's built-in NgStyle directive to dynamically apply CSS styles using getter functions. This lesson helps you understand using NgStyle with rgb color values for clean, reusable styling of div elements in your Angular projects.

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 ...