Add styles to a component in Angular

Style HTML elements in Angular using the style property

Conditionally add a single CSS class to a DOM element in Angular

Style HTML elements in Angular using ngClass

Style HTML elements in Angular using ngStyle

Use Angular style sanitization to mark dynamic styles as trusted values

Use Angular’s @HostBinding and :host(...) to add styling to the component itself

Use :host-context and the ::ng-deep selector to apply context-based styling

Use the Renderer2 to add styles to an element in Angular

Understand How to Style Angular Components

In this lesson we will take a look at how Angular makes use of the style property. This is a powerful concept that allows us to very easily add CSS styles onto HTML elements. These styles can even be easily made conditional.

[00:00] We can use the style property to add, for instance, some background color to our div here. Let's add some yellow. Great. Then, let's cut this out for a second and create here a getBackgroundColor function. We obviously also have to declare it here on our class.

[00:24] As a first step, let's see if we return our "yellow" string again. Then, let's create some variable, some showStyle toggle, and set it to false. In our getBackgroundColor function, we can then say something like, if this.show style, then let's return our "yellow" string. Otherwise, we return simply an empty string.

[00:50] To see this in action, we can simply add here a click listener, and we toggle our showStyle variable. By then clicking on the div, we can toggle our style.

[01:05] Now, obviously, this works for any kind of style. For instance, let's change the color of our font, and let's set it to red. You can see how this gets applied.

Course

Understand How to Style Angular Components

Style HTML elements in Angular using the style property

Share this video with your friends