Angular Material: Difference between revisions

← Older edit

Latest revision as of 15:21, 21 August 2020

Angular Material contains components for angular which follow material design.

Getting Started

Install Angular Material
```
ng add @angular/material
```
Create a theme following this guide.

Components

See [1] for a list of components.

To import a component, you use to add it to your app.module.ts file.

Example import

import { MatSliderModule } from '@angular/material/slider';

@NgModule ({....
  imports: [...,
    MatSliderModule,
  ]
})

Themes

Theming Angular material is pretty simple but there is very little documentation on it.

First you need to create a theme scss file and add it to your styles array.

Example theme.scss

@import '~@angular/material/theming';
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);

// The warn palette is optional (defaults to red).
$candy-app-warn:    mat-palette($mat-red);

// Create the theme object. A theme consists of configurations for individual
// theming systems such as `color` or `typography`.
$candy-app-theme: mat-light-theme((
  color: (
    primary: $candy-app-primary,
    accent: $candy-app-accent,
    warn: $candy-app-warn,<br />
  )
));

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($candy-app-theme);

Theming Componenets

See Theming your components

For each component you want to theme, you should create a mixin. This mixin will contain custom CSS rules for your component based on the global theme.

Example Mixin

You can call this my_component.component.scss-theme.scss.
Within Google, they name theme files my_component-theme.scss and the main scss file my_component.scss.
This file should not be included in your @Component's styleUrls.

// Import library functions for theme creation.
@import '~@angular/material/theming';

@mixin candy-carousel-color($config-or-theme) {
  // Extract the color configuration in case a theme has been passed.
  // This allows consumers to either pass a theme object or a color configuration.
  $config: mat-get-color-config($config-or-theme);
  // Extract the palettes you need from the theme definition.
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);

  // Define any styles affected by the theme.
  .candy-carousel {
    // Use mat-color to extract individual colors from a palette.
    background-color: mat-color($config);
    border-color: mat-color($config, A400);
  }
}

@mixin candy-carousel-typography($config-or-theme) {
  // Extract the typography configuration in case a theme has been passed.
  $config: mat-get-typography-config($config-or-theme);

  .candy-carousel {
    font: {
      family: mat-font-family($config, body-1);
      size: mat-font-size($config, body-1);
      weight: mat-font-weight($config, body-1);
    }
  }
}

@mixin candy-carousel-theme($theme) {
  // Extracts the color and typography configurations from the theme.
  $color: mat-get-color-config($theme);
  $typography: mat-get-typography-config($theme);

  // Do not generate styles if configurations for individual theming
  // systems have been explicitly set to `null`.
  @if $color != null {
    @include candy-carousel-color($color); 
  }
  @if $typography != null {
    @include candy-carousel-typography($typography);
  }
}

Next, in your main app theme file, import this mixin and pass in your global app theme:

Example theme.scss

// Import library functions for theme creation. @import './my_component/my_component.component.scss-theme.scss';

//... Build your theme.

// Include theme styles for your custom components. @include candy-carousel-theme($theme);

Color Palettes

Get a color palette like this:

$config: mat-get-color-config($config-or-theme);

// Color Palettes
$primary: map-get($config, primary);
$accent: map-get($config, accent);
$warn: map-get($config, warn);
$foreground: map-get($config, foreground);
$background: map-get($config, background);

To get a specific color from a palette, use mat-color($palette, $key):

a {
    color: mat-color($foreground, text);
}

// mat-color($primary, 50); is the lightest color
// mat-color($primary, 900); is the darkest color
// mat-color($primary, lighter); defaults to 100
// mat-color($primary); defaults to 500
// mat-color($primary, darker); defaults to 700
// mat-color($primary, '500-contrast'); gets contrast colors for text

Some keys for foreground include: base, divider, text.

See _palette.scss for all available keys. See _theming.scss for a more in-depth understanding about theming.