Angular Material: Difference between revisions
| Line 30: | Line 30: | ||
* [https://material.angular.io/guide/getting-started Standard Getting Started] | * [https://material.angular.io/guide/getting-started Standard Getting Started] | ||
* [https://www.youtube.com/watch?v=jUfEn032IL8 Full Tutorial] | * [https://www.youtube.com/watch?v=jUfEn032IL8 Full Tutorial] | ||
* [https://www.angularjswiki.com/de/angular/angular-material-icons-list-mat-icon-list/ <mat-icon> list] | |||
* [https://material.io/resources/icons/?style=baseline Material Design Icons] | * [https://material.io/resources/icons/?style=baseline Material Design Icons] | ||
Revision as of 22:16, 15 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