Angular Material

From David's Wiki
\( \newcommand{\P}[]{\unicode{xB6}} \newcommand{\AA}[]{\unicode{x212B}} \newcommand{\empty}[]{\emptyset} \newcommand{\O}[]{\emptyset} \newcommand{\Alpha}[]{Α} \newcommand{\Beta}[]{Β} \newcommand{\Epsilon}[]{Ε} \newcommand{\Iota}[]{Ι} \newcommand{\Kappa}[]{Κ} \newcommand{\Rho}[]{Ρ} \newcommand{\Tau}[]{Τ} \newcommand{\Zeta}[]{Ζ} \newcommand{\Mu}[]{\unicode{x039C}} \newcommand{\Chi}[]{Χ} \newcommand{\Eta}[]{\unicode{x0397}} \newcommand{\Nu}[]{\unicode{x039D}} \newcommand{\Omicron}[]{\unicode{x039F}} \DeclareMathOperator{\sgn}{sgn} \def\oiint{\mathop{\vcenter{\mathchoice{\huge\unicode{x222F}\,}{\unicode{x222F}}{\unicode{x222F}}{\unicode{x222F}}}\,}\nolimits} \def\oiiint{\mathop{\vcenter{\mathchoice{\huge\unicode{x2230}\,}{\unicode{x2230}}{\unicode{x2230}}{\unicode{x2230}}}\,}\nolimits} \)

Angular Material contains components for angular which follow material design.

Getting Started

  1. Install Angular Material
    ng add @angular/material
  2. 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

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

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

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

Example theme.scss

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.

Resources