Angular Material: Difference between revisions
| Line 12: | Line 12: | ||
<TAG_NAME class="flex-container" fxLayout="[column|row|...] fxLayoutAlign="[see [https://tburleson-layouts-demos.firebaseapp.com/#/docs here]]"> | <TAG_NAME class="flex-container" fxLayout="[column|row|...] fxLayoutAlign="[see [https://tburleson-layouts-demos.firebaseapp.com/#/docs here]]"> | ||
<SUBTAG_NAME fxFlex> | <SUBTAG_NAME fxFlex> // fxFlex tells the element to take the remainder of the screen in height | ||
</SUBTAG_NAME> | </SUBTAG_NAME> | ||
</TAG_NAME> | </TAG_NAME> | ||
Revision as of 13:15, 8 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 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
- sidenav is for the full app page, drawer for a dedicated area
Open Topics
- late installation of HammerJs see last chapter