Skip to main content

Component Styles

Getting Started with Angular Component Styles​

In Angular, a component is a fundamental piece of the Angular application. Each component has a class, template, and style. In this article, we will dive deeper into Angular component styles. Styles are used to give a unique look and feel to your components, and they play a crucial role in providing a good user experience.

Understanding Component Styles​

In Angular, you can define the styles for your component in three ways:

  1. Inline Styles: You can define CSS styles directly in the Angular component's template using the style attribute.
  2. Component Styles: You can also specify the CSS styles in the component's metadata using the styles or styleUrls property.
  3. Global Styles: These are styles that are applied globally to the entire application.

Inline Styles​

Inline styles are defined within the template of the component using the style attribute. This method is useful when you have a small amount of CSS that is specific to a single component. However, as your application grows, defining styles inline can become messy.

Here's an example of an inline style:

<div style="color: blue;">This is a blue text.</div>

Component Styles​

Component styles are defined in separate CSS files that are linked to the Angular component. You can use the styleUrls property in the @Component decorator to specify the CSS files for the component.

Here's an example of component styles:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // Your component class code goes here
}

In the above example, the app.component.css file contains the CSS styles for the AppComponent.

Global Styles​

Global styles are defined in a central CSS file that is applied to the entire Angular application. This method is useful when you have CSS styles that are common across multiple components.

You can define global styles in the styles.css file in the root of the src folder:

/* You can add global styles to this file, and also import other style files */
body {
  background-color: lightgray;
}

In the above example, the background-color style will be applied to the entire application.

Encapsulation of Component Styles​

Angular provides style encapsulation out of the box. This means that styles defined in a component will not leak out and affect other components. Angular achieves this by adding unique attributes to the HTML generated for each component and using these attributes to scope the CSS.

However, you can control the style encapsulation using the encapsulation property in the @Component decorator. Angular provides three encapsulation strategies:

  1. Emulated (default): Styles defined in a component are scoped to that component only.
  2. None: Styles defined in a component are global and can affect other components.
  3. ShadowDom: Styles are scoped to the component's shadow DOM.

Here's an example:

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  // Your component class code goes here
}

In the above example, the styles defined in AppComponent are global because the encapsulation strategy is set to None.

In conclusion, Angular provides a flexible way to manage styles in your application. You can use inline styles for simple, component-specific styles, component styles for more complex, component-specific styles, and global styles for common styles across multiple components. Furthermore, Angular's style encapsulation ensures that your component styles don't unexpectedly affect other components.