Developers usually have a love-hate relationship with CSS and styling user interfaces. But it is a fundamental part of creating nice-looking, adorable and successful user interfaces. In this course we will take a deep dive into the various possibilities Angular offers for styling components. We learn about the different APIs, how they allow us to conditionally apply one or multiple styles in the form of style attributes and CSS classes. We also explore the concept of style encapsulation and how it helps prevent our styles from leaking into other components.

Angular gives you two possibilities: externally link a stylesheet to your component, which is a great option when you have a lot of CSS code that might make your Component look messy; or embed it inline, which you might want to do when you only have a bit of CSS you want to apply. In this lesson we will take a deeper look at the advantages of both of these methods. 


Add styles to a component in Angular

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.

Style HTML elements in Angular using the style property

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. 

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

When we want to add multiple CSS classes on our HTML elements, and possibly even by using some kind of condition, things might get complicated… Fortunately `ngClass` is here to help! We will learn about the various ways `ngClass` allows us to conditionally add multiple classes to HTML elements using a variety of different data structures. 

Style HTML elements in Angular using ngClass

We will learn how to make use of the `ngStyle` directive to directly add multiple style attributes to a DOM element as a style property. We’ll also learn how we can make these styles more dynamic through user input. 

Style HTML elements in Angular using ngStyle

Angular has a very robust security model. Dynamically inserted html, style or url values into the DOM open up possibilities for attackers to compromise your site. Thus Angular treats all values as untrusted by default. In this lesson we learn how to “sanitize” values where we are sure they are trustful.

Use Angular style sanitization to mark dynamic styles as trusted values

One thing that we can do is to add styles directly to HTML elements that live within our component. However, in this lesson we see that style classes added to your template HTML within your component get applied to an inner `<div>`  and not your component host. We will learn how to use `:host(...)` and `@HostBinding` to add styling directly to the component host itself.

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

Often components need to be styled based on the context they are being placed in. In this lesson we will learn about how to apply styles conditionally to our component, based on our ancestor element styles using `:host-context`. In the very same way, we also explore how to leverage the `/deep/` shadow DOM selector to target styles to child components.

Note that the ::ng-deep is only a temporary solution and is going to be dropped by Angular once there’s an official standard coming out. As such try to avoid using it.

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

In this lesson we will go low-level and learn how you can get hold of the underlying native DOM element to add styling. Moreover we will learn how to make use of the `Render2` to safely add style properties which even work in a server-side environment.

Understand How to Style Angular Components

Instructor

Course Content