Angular Material

Installation

ng add @angular/material

eg. will update index.html with

 <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Concepts

Angular material is based on the The Component Dev Kit (CDK). It is a set of behavior primitives for building UI components. Sometimes it is important to understand the 'base' class to understand the material classes.

Modules

Flex Layout

adding to a project by:

<PROJECT_FOLDER> npm i -s @angular/flex-layout @angular/cdk

<TAG_NAME class="flex-container" fxLayout="[column|row|...] fxLayoutAlign="[see here]">
  <SUBTAG_NAME fxFlex> // fxFlex tells the element to take the remainder of the screen in height
  </SUBTAG_NAME>
</TAG_NAME>

• layout could change in sub-tags

Components

Forms

• see https://edupala.com/how-to-implement-angular-material-form-in-angular/
• https://www.youtube.com/watch?v=uEjBcYenAlA
• https://stackblitz.com/edit/example-angular-material-reactive-form?file=app%2Fapp.component.css

x = myFormGroup.value; // all values as object
myFormGroup.valueChanges.subscribe(console.log); // monitor each single change
<ng-container *ngIf="..."> </ng-container>

Context Menu

• example @ stackblitz

Sidenav and Drawer

• sidenav is for the full app page, drawer for a dedicated area

Tooltip

• see header component of UweHeuer
• see Angular Wiki

Tree

Material trees are based on the cdk tree.

CDK Tree

When the tree receives a DataSource it will call its connect() method which returns an observable that emits an array of data. Whenever the data source emits data to this stream, the tree will render an update.

Open Topics

• late installation of HammerJs see last chapter

Resources

• Angular Material Home
• Standard Getting Started
• Full Tutorial
• <mat-icon> list
• Material Design Icons