Angular Material: Difference between revisions

Latest revision as of 20:17, 25 October 2022

Installation[edit]

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[edit]

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[edit]

Flex Layout[edit]

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[edit]

Forms[edit]

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

Context Menu[edit]

example @ stackblitz

Sidenav and Drawer[edit]

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

Tooltip[edit]

see header component of UweHeuer
see Angular Wiki

Tree[edit]

Material trees are based on the cdk tree.

CDK Tree[edit]

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[edit]

late installation of HammerJs see last chapter

@@ Line 37: / Line 37: @@
 ===Sidenav and Drawer===
 * sidenav is for the full app page, drawer for a dedicated area
+===Tooltip===
+* see header component of UweHeuer
+* see [https://www.angularjswiki.com/material/tooltip/ Angular Wiki]
 ===Tree===