Angular Material: Difference between revisions
| Line 4: | Line 4: | ||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet"> | <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"> | <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 [https://tburleson-layouts-demos.firebaseapp.com/#/docs|here]"> | |||
<TAG_NAME fxFlex> | |||
</TAG_NAME> | |||
</TAG_NAME> | |||
==Components== | ==Components== | ||
Revision as of 16:47, 6 April 2021
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]"> <TAG_NAME fxFlex> </TAG_NAME>
</TAG_NAME>
Components
- sidenav is for the full app page, drawer for a dedicated area
Open Topics
- late installation of HammerJs see last chapter