Angular Material

John

Angular Material is a UI component framework that follows Google’s Material Design specification. It was created and supported by the Angular development team.

More information about Material Design:

Material Design

 

Setting up Material Project

Create a new ng project as normal. Then run commands to add ng material

ng new material
ng add @angular/material@11.0.0 
Package has unmet peer dependencies. Adding the package may not succeed.
Installing packages for tooling via npm.
Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink        [ Preview: https://material.angular.io?theme=indigo-pink ]
Set up global Angular Material typography styles? Yes
Set up browser animations for Angular Material? Yes
UPDATE package.json (1317 bytes)
Packages installed successfully.
UPDATE src/app/app.module.ts (423 bytes)
UPDATE angular.json (3834 bytes)
UPDATE src/index.html (511 bytes)
UPDATE src/styles.scss (181 bytes)
...
ng add @angular/flex-layout
Unable to find compatible package.  Using 'latest'.
Package has unmet peer dependencies. Adding the package may not succeed.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
The package that you are trying to add does not support schematics. You can try using a different version of the package or contact the package author to add ng-add support.
...
ng g m shared/material  --dry-run --flat
CREATE src/app/shared/material.module.ts (194 bytes)
...
npm i
ng build
ng s -o

 

Angular CDK (Component Dev Kit)

The Component Dev Kit (CDK) is a set of behavior primitives for building UI components. These components include:

    • Accessibility – Utilities for screen readers, focus and more.
    • Bidirectionality – Utilities to respond to changes in LTR/RTL layout direction.
    • Clipboard – Helpers for working with the system clipboard.
    • Drag and Drop – Directives enabling drag-and-drop interactions
    • Layout – Utilities to respond to changes in viewport size.
    • Observers – Utilities to respond to changes to element properties.
    • Overlay – Utilities for dynamically displaying floating content.
    • Platform – Provides information about the user’s platform.
    • Portal – Utilities for dynamically displaying content into a target.
    • Scrolling – Directives for managing scroll events.
    • Stepper – Presents content as steps through which to progress.
    • Table – A configurable component for displaying tabular data.
    • Component Harnesses – Foundation for component test harnesses.
    • Text field – Utilities for working with text input fields.
    • Tree – Presents hierarchical content as an expandable tree.

 

Angular Material Typography

Typography is a way of arranging type to make text legible, readable, and appealing when displayed. Angular Material’s typography is based on the guidelines from the Material Design spec and is arranged into typography levels. Each level has a font-size, line-height and font-weight. The available levels are:

Name CSS classes Description
display-4 .mat-display-4 Large, one-off header, usually at the top of the page (e.g. a hero header).
display-3 .mat-display-3 Large, one-off header, usually at the top of the page (e.g. a hero header).
display-2 .mat-display-2 Large, one-off header, usually at the top of the page (e.g. a hero header).
display-1 .mat-display-1 Large, one-off header, usually at the top of the page (e.g. a hero header).
headline .mat-h1, .mat-headline Section heading corresponding to the <h1> tag.
title .mat-h2, .mat-title Section heading corresponding to the <h2> tag.
subheading-2 .mat-h3, .mat-subheading-2 Section heading corresponding to the <h3> tag.
subheading-1 .mat-h4, .mat-subheading-1 Section heading corresponding to the <h4> tag.
body-1 .mat-body, .mat-body-1 Base body text.
body-2 .mat-body-strong, .mat-body-2 Bolder body text.
caption .mat-small, .mat-caption Smaller body and hint text.
button None. Used only in components. Buttons and anchors.
input None. Used only in components. Form input fields.

The typography levels are collected into a typography config which is used to generate the CSS.

By enabling the global Angular Material typography styles we are able to use the css classes above and customize them as desired.

 

Layout Components

Flex Layout Box Model

The Flexbox Layout (Flexible Box) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”).

The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space or shrinks them to prevent overflow.

Most importantly, the flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based). While those work well for pages, they lack flexibility (no pun intended) to support large or complex applications (especially when it comes to orientation changing, resizing, stretching, shrinking, etc.).

Note: Flexbox layout is most appropriate to the components of an application, and small-scale layouts, while the Grid layout is intended for larger scale layouts.

 

 

 

 

 

 

 

 

 

 

References

Material Design Specification
https://material.io/

Angular Material
https://material.angular.io
https://github.com/angular/components

Styling Applications with Angular Material
https://app.pluralsight.com/library/courses/angular-material/

Flexbox and Grid
https://www.youtube.com/watch?v=rmFINtH5PNE

Github
https://github.com/ajtowf/styling-applications-with-angular-material

 

 

eof