Angular - Component Styling

Styling is the process of designing and formatting the visual presentation of web pages. Since Angular applications are composed of multiple components, styles are applied to them individually. Angular components can be styled using CSS as well as popular pre-processors such as Sass and Less.

Let's see different techniques of applying styles to the Angular components and different ways to allow safe and efficient customization of styles by the component users in this chapter.

How to Add Styles to Angular Components?

You can use the following ways for styling Angular components −

• Using "styles"
• Using "styleUrls"
• Styling through template
• Using global styles
• Using CSS preprocessor
• Customized styles
• Using custom selectors

Using "styles"

The simplest and fastest way to style a component is by usingstyles. It is a property of the@Componentdecorator. It accepts an array of CSS styles and applies it to the component view. The pseudo-code of using styles in a component is as follows:

 @Component({ // selector and template code styles: ['p { font-style: italic; }', 'em { font-style: italic; font-weight: bold }'] // other properties / meta data }) export class MyComponent { // ... } 

The style applied using styles will affect the component view generated through component template only and is not inherited by the view of the nested components in the component template as well as any content projected in the component view.

Using "styleUrls"

The styleUrls is also a property of the @Component decorator and is similar to styles property. It accepts an array of CSS style file paths instead of the style itself and applies it to the component view. The pseudo-code of using styleUrls in a component is as follows:

 @Component({ // selector and template code styleUrls: ['my-component.component.css', 'my-component-another.component.css'] // other properties / meta data }) export class MyComponent { // ... } 

The style applied using styleUrls will affect the component view generated through the component template only and is not inherited by the view of the nested components in the component template as well as any content projected in the component view.

Styling Through Template

Styling through template is old school method of using CSS styles in the HTML itself through template property of @Component decorator. We can style a component using template in two ways, which are:

• Applying styles using HTML style tag
• Linking CSS files through link tag

Styling through template does not restrict the styles to the component view only and applies to the entire HTML generated from the component including nested components and projections.

Applying Style Using "style" Tag

In HTML, style tag is used to define internal CSS styles for a web page. This tag allows you to embed CSS rules directly within the HTML document. The use of this tag in the Angular template is similar to how we use it in HTML. The pseudo-code to apply styles using style tag is as follows:

 @Component({ // selector template: ` <style> h1 { color: red; } </style> <h1>Hello</h1> `, // other properties / meta data }) export class MyComponent { // ... } 

Applying Style Using "link" Tag

The most common use of link tags in HTML documents is to attach external stylesheets. The pseudo code to apply styles to an Angular component using link tag is as follows:

 @Component({ // selector template: ` <link rel="stylesheet" href="../assets/my-component.component.css"> <h1>Hello</h1> `, // other properties / meta data }) export class MyComponent { // ... } 

The CSS file path should be relative to the component file. Otherwise, the CSS path in the generated HTML may be pointing to an incorrect or non-existing file.

@import can be used in CSS files to load more CSS files and the import file should be relative to the host CSS file.

 @import './another-css.css' 

Using Global Styles

Global styles will be configured during the application creation itself. Angular CLI will set src/styles.css file as a global stylesheet. We can use it to set styles targeting anything in the application. We can use the global setting to set one or more style sheets as required. The below snippet shows the initial angular configuration created during application creation through angular CLI.

 { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "tutorial": { // ... "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist/tutorial", "index": "src/index.html", "main": "src/main.ts", "polyfills": [ "zone.js" ], "tsConfig": "tsconfig.app.json", "assets": [ "src/favicon.ico", "src/assets" ], "styles": [ "src/styles.css" ], "scripts": [] }, "configurations": { "production": { // ... }, "development": { // ... } }, "defaultConfiguration": "production" }, } } } } 

Using CSS Preprocessor

Angular allow not only the plain CSS to style the component. It allows the popular CSS preprocessors such as Sass and Less. Using Sass and Less is as simple as including the Sass and Less files instead of CSS files.

Component styleUrls can be used to include Sass and Less as specified below.

 @Component({ // selector and template code styleUrls: ['my-component.component.scss'] // other properties / meta data }) export class MyComponent { // ... } 

CSS preprocessor can be configured at project level or component level through angular settings. Angular CLI command "ng new" will ask the preprocessor to set during initial project creation.

 $ ng new myapp ? Would you like to add Angular routing? No ? Which stylesheet format would you like to use? (Use arrow keys) CSS SCSS [ https://sass-lang.com/documentation/syntax#scss ] Sass [ https://sass-lang.com/documentation/syntax#the-indented-syntax ] Less [ http://lesscss.org 

Angular CLI will configure the project with proper CSS preprocessor.

Customize Styles of Angular Component

Generally, every angular component will have a default style associated with it. As components can be used in various scenarios, there is a necessity to customize the style of the component to match a given scenario. A good component should have a clear approach to changing the style to suit the environment where the component is used. Angular provides four ways to customize the style of a component.

• CSS custom properties
• Global CSS along with @mixins
• Using pseudo selectors of shadow DOM
• Using component properties / API

CSS Custom Properties

CSS provides CSS variables to hold styles. Once the CSS variables are defined, they can be used in any CSS properties and allow certain styles to be changed across the application by changing the value of the CSS variable.

Let us see how to define and use CSS variables. CSS variables can be created using :root pseudo selector as shown below −

 :root { --myColor: red; } 

Here, myColor variable is defined and its initial value is red. myColor variable can be used in other CSS properties as shown below −

 p { color: var(--myColor, grey); } 

Here, color will be set with the value of myColor (red in this case). If myColor does not have any value or undefined, then grey will be set as color.

The same concept can be applied in a component by using component property and CSS Variable as shown below.

• Declare a property for the CSS variable, myColorVar in the component as shown below −

 @Component({ // setting }) export class MyComponent { myColorVar: string = null; } 

• Use CSS variable, myColor and Component property, myColorVar in the style (template) as shown below −

 <p [style.--myColor]="myColorVar">Hello</p> 

• Now, the component can be customized by changing the CSS variable in the :root pseudo selector as shown below −

 :root { --myColor: green; } 

Global CSS with @mixins

CSS preprocessor provides a great option to mix different style as and when needed in the CSS using mixin concept. Mixin is simply grouping of one or more CSS styles with a name and using it afterwards wherever necessary using the defined name. Let us define two mixin, one for color and another for font style:

 @mixin color($c) { color: $c; } @mixin fontstyle($fs) { font-style: $fs; } 

Next, we can use the mixin to define a global style using the @include option as shown below −

 .mystyle { @include color('red'); @include fontstyle('italic'); } 

Finally, the user can customize the color and font style in the global style without interfering with the component.

Pseudo Selector of Shadow DOM

Components using shadow DOM can be set with part attributes to allow the users to customize the style using ::part pseudo selector in the CSS styles as shown below −

 <template id="my-web-component"> <h1 part="hello">Hello</h1> </tempalte> 

Here, my-web-component web component sets the part attribute for the h1 tag.

 my-web-component::part(hello) { // custom css styles } 

Here, h1 tag is targeted through ::part selector and can be customized.

Component Properties

The final and least preferred way to customize the style of the component is through custom component property as shown below −

 @Component({ // ... }) export class MyComponent() { color: string; } 

Here, component will use the properties to get the color information from the user and set it in the template.

Using Custom Selectors

Angular provides two custom selectors similar to the shadow DOM concept.

• :host
• :host-context

:host selector is used to style the host element of the component. It comes in two forms. First one is a simple form as shown below −

Here, :host selector applies to the host element and all its descendant elements.

The second one is the function form, which will target the host element only if the host element has the included selector (as arguments) as shown below −

 :host(.active) { font-weight: bold; } 

Here, :host(.active) targets the host element only if it has an active class.

Finally, :host-context selector is similar to host function form :host() except it checks whether any of the ancestor of the host element has the specified selector (in the argument).

 :host(.active) { font-weight: bold; } 

Here, the style applies to the host only when any of the ancestors of the host element has .active class assigned to it.

Multiple Choice Questions on Angular Component Styles

Based on the Angular Component styles concept, there are three MCQs given below. Answer them to test your knowledge about the topics −