A Guide To Theme Angular Material To Be More Compact

In Angular Material, the density of components can be adjusted using Angular Material’s theming system. Starting with Angular Material version 11, you can use the mat-density attribute to control the density of most components. However, in Angular version 7, this feature might not be available, as the density configuration was introduced in later versions.

In Angular Material 7, you might not have direct control over density. However, you can adjust some aspects of density using custom CSS in your Angular styles. You can modify padding, font sizes, line heights, and other properties to achieve a similar effect to adjusting density.

For instance, you can create a custom CSS class and apply it to the components where you want to adjust the density:

/* styles.css or your custom style file */
.custom-density {
  /* Adjust padding */
  padding: 8px;

  /* Modify font sizes */
  font-size: 14px;

  /* Adjust line height */
  line-height: 1.5;
}

Then, apply the custom-density class to your Angular Material components:
<!-- Example: Applying custom density to a mat-card -->
<mat-card class="custom-density">
  <!-- Card content -->
</mat-card>

Remember, this method involves manually tweaking CSS properties, and it might not provide the same level of control and consistency as the native density feature available in later versions of Angular Material.

If possible, consider upgrading to a newer version of Angular Material (Version 11 or later) to leverage the built-in mat-density feature for more precise control over component density.

From version 15 and above(Default Way):

1. Define Theme:

Angular Material represents a theme as a Sass map that contains your color, typography, and density choices. Customizing density below for details on adjusting component density.

Constructing the theme first requires defining your primary and accent palettes, with an optional warn palette. The define-palette Sass function accepts a color palette, described in the Palettes section above, as well as four optional hue numbers. These four hues represent, in order: the “default” hue, a “lighter” hue, a “darker” hue, and a “text” hue. Components use these hues to choose the most appropriate color for different parts of themselves.

@use '@angular/material' as mat;

$my-primary: mat.define-palette(mat.$indigo-palette, 500);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

// The "warn" palette is optional and defaults to red if not specified.
$my-warn: mat.define-palette(mat.$red-palette);

You can construct a theme by calling either define-light-theme or define-dark-theme with the result from define-palette. The choice of a light versus a dark theme determines the background and foreground colors used throughout the components.

@use '@angular/material' as mat;

$my-primary: mat.define-palette(mat.$indigo-palette, 500);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

// The "warn" palette is optional and defaults to red if not specified.
$my-warn: mat.define-palette(mat.$red-palette);

$my-theme: mat.define-light-theme((
 color: (
   primary: $my-primary,
   accent: $my-accent,
   warn: $my-warn,
 ),
 typography: mat.define-typography-config(),
 density: 0,
));

2. Applying a theme to components:

The core-theme Sass mixin emits prerequisite styles for common features used by multiple components, such as ripples. This mixin must be included once per theme.

Each Angular Material component has a mixin for each color , typography, and density. For example, MatButton declares button-color, button-typography, and button-density. Each mixin emits only the styles corresponding to that area of customization.

Additionally, each component has a “theme” mixin that emits all styles that depend on the theme config. This theme mixin only emits color, typography, or density styles if you provided a corresponding configuration to define-light-theme or define-dark-theme.

Apply the styles for each of the components used in your application by including each of their theme Sass mixins.

@use '@angular/material' as mat;

@include mat.core();

$my-primary: mat.define-palette(mat.$indigo-palette, 500);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

$my-theme: mat.define-light-theme((
 color: (
   primary: $my-primary,
   accent: $my-accent,
 ),
 density: 0,
));

// Emit theme-dependent styles for common features used across multiple components.
@include mat.core-theme($my-theme);

// Emit styles for MatButton based on `$my-theme`. Because the configuration
// passed to `define-light-theme` omits typography, `button-theme` will not
// emit any typography styles.
@include mat.button-theme($my-theme);

// Include the theme mixins for other components you use here.

As an alternative to listing every component that your application uses, Angular Material offers Sass mixins that includes styles for all components in the library: all-component-colors, all-component-typographies, all-component-densities, and all-component-themes. These mixins behave the same as individual component mixins, except they emit styles for core-theme and all 35+ components in Angular Material. Unless your application uses every single component, this will produce unnecessary CSS.

@use '@angular/material' as mat;

@include mat.core();

$my-primary: mat.define-palette(mat.$indigo-palette, 500);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

$my-theme: mat.define-light-theme((
 color: (
   primary: $my-primary,
   accent: $my-accent,
 ),
 typography: mat.define-typography-config(),
 density: 0,
));

@include mat.all-component-themes($my-theme);

To include the emitted styles in your application, add your theme file to the styles array of your project’s angular.json file.

From version 15 and above(Custom Way):

You can customize the theme to set various properties, including density. Density refers to the spacing and size of elements in the UI. Angular Material provides three density options: cozy, comfortable, and compact.

To set the density in a custom Angular Material theme, follow these steps:

1. Create a Custom Theme:

Open your styles.scss file or create a new one if you don’t have it.
Import the Angular Material pre-built themes and typography.

@import '~@angular/material/theming';
@import '~@angular/material/prebuilt-themes';
@import '~@angular/material/theming';
@import '~@angular/material/prebuilt-themes';

2. Define the Theme:

Create a custom theme using the mat.defineTheme function.

	
$custom-theme: mat.defineTheme(
  (
    color: (
      primary: $mat-indigo,
      accent: $mat-pink,
      warn: $mat-deep-orange,
    ),
    density: mat.custom-density( // Specify the density here
      cozy: mat.custom-density-values( // Customize cozy density
        factor: 0.9,
      ),
      comfortable: mat.custom-density-values( // Customize comfortable density
        factor: 1,
      ),
      compact: mat.custom-density-values( // Customize compact density
        factor: 0.8,
      ),
    ),
  ),
);

Adjust the factor values based on your preferences for each density level.

3. Apply the Theme:

Apply the custom theme using the mat.theme mixin.
@include mat.theme($custom-theme);

4. Use the Theme in Your Angular Application:

In your Angular component, import the custom theme file.
@import ‘path-to-your-custom-theme-file’;

Add the theme class to the desired component or the root of your application.

With these steps, you’ve created a custom Angular Material theme with a specified density. Adjust the density values according to your design preferences. Keep in mind that these instructions may need to be adjusted based on the version of Angular and Angular Material you are using. Always refer to the official documentation for the most up-to-date information.

From version 15 and above(Using available options):

Angular Material’s density customization is based on the Material Design density guidelines. This system defines a scale where zero represents the default density. You can decrement the number for more density and increment the number for less density.

The density system is based on a density scale. The scale starts with the default density of 0. Each whole number step down (-1, -2, etc.) reduces the affected sizes by 4px, down to the minimum size necessary for a component to render coherently.

Components that appear in task-based or pop-up contexts, such as MatDatepicker, don’t change their size via the density system. The Material Design density guidance explicitly discourages increasing density for such interactions because they don’t compete for space in the application’s layout.

You can apply custom density setting to the entire library or to individual components using their density Sass mixins.

// You can set a density setting in your theme to apply to all components.
$dark-theme: mat.define-dark-theme((
  color: ...,
  typography: ...,
  density: -2,
));

// Or you can selectively apply the Sass mixin to affect only specific parts of your application.
.the-dense-zone {
  @include mat.button-density(-1);
}