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

Angular allows you to add a single CSS class to HTML elements within your component and bind them to a condition. Based on the result of the condition the class gets applied or not. 

[00:01] In this example, we have a component with a div inside here. We apply here a rounded border CSS class, which we define here in the styles property. Now, very often in real world applications, you need to add those classes conditionally based on some application state.

[00:19] In Angular, we can do that by wrapping the whole part here in square brackets. Then we add a point here, and we basically translate our CSS class like this. Then we make the equals sign, and we add the condition. That's a true.

[00:35] If you save, you can see the border still gets applied. If you switch it to false, it doesn't get applied anymore. Also, you can also bind this to some variable, which is defined in your JavaScript part of your component.

[00:52] Let's set it to false to demonstrate this. If you set it to true, it gets activated again. To make this even a bit more dynamic, we could use here a p tag. Let's add a checkbox. Let's throw in a label. We need an input type of type checkbox. Add the border. Add the label here.

[01:18] Now, we basically establish a two-way binding with our isBorder variable. Now, if we toggle this, the border gets toggled, and we can switch it back on and off.

Course

Understand How to Style Angular Components

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

Share this video with your friends