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

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

Sidenav and Drawer

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

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