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">

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 [1]]">
  <SUBTAG_NAME fxFlex>
  </SUBTAG_NAME>
</TAG_NAME>

• layout could change in sub-tags

Components

Sidenav and Drawer

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

Open Topics

• late installation of HammerJs see last chapter

Resources

• Angular Material Home
• Standard Getting Started
• Full Tutorial
• Material Design Icons