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

[00:00] Here we have a neat little box. What we would like to do is to show our Gravatar image inside that box. Now, obviously, there are different kind of possibilities to do so. For the purpose of this example, we want to dynamically compute our style element here, and use a background image.

[00:18] For that purpose, we create here a getStyle function. Inside here, we simply for the first step copy in that style, and return that. Then let's create here our Gravatar URL, which in a real world example, we would probably fetch from some profile of the user.

[00:48] Then we can use the background image. We use the URL property. Here, we would like to fill in the Gravatar URL. Let's change these to backticks, which allows us to use this syntax here, Gravatar URL. Let's save this.

[01:10] Now, we want to bind this to the style property here on our element, which we do like this. Then obviously, invoke our getStyle function. Apparently, this doesn't work. Let's open the console here.

[01:26] What you can see here is a warning message from Angular which says that there's a sanitizing process that has to be done for basically marking these unsafe values background image as safe. It also links here to a URL where you can look up. This is basically the docs of Angular.

[01:45] This is because linking here a background image URL inside the style sheet, and dynamically binding that to the DOM element is a potential XSS bug, so a cross-site scripting XSS bug.

[01:58] For that purpose, Angular defines different kind of security contexts. In order to mark those properties as safe explicitly, what we need to do is to import the sanitizer, which comes from the Angular platform browser. This is the so-called DomSanitizer.

[02:19] Here, rather than returning the style string directly, we have to get the instance of the sanitizer, which we can get injected in the constructor. Now, down here, we can say this.sanitizer.

[02:38] Then we have different kind of methods here. One is for the trust of the HTML. One is for resource URLs, one for scripts, for styles, and for trusted URLs here. These are basically the security contexts Angular defines.

[02:53] In our case, we are applying a dynamic style, so we use the trust style, and we pass in here the style property. Now, we have to return this sanitized style and save again. Now, you can see the image gets displayed correctly, and there is no more warning anymore in the console.

[03:12] If you take a look at the method name, it says explicitly "bypass security trust style." Notice that the information shown here in the documentation says, "Warning -- calling this method with untrusted user data exposes your application to XSS security risks." You obviously have to apply this only if you're sure what you're doing is trustful.

Course

Understand How to Style Angular Components

Use Angular style sanitization to mark dynamic styles as trusted values

Share this video with your friends