Angular Material: Difference between revisions

Revision as of 07:50, 1 October 2022

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

Concepts

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

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

Forms

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

Context Menu

example @ stackblitz

Sidenav and Drawer

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

Tree

Material trees are based on the cdk tree.

CDK Tree

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

late installation of HammerJs see last chapter

@@ Line 31: / Line 31: @@
   myFormGroup.valueChanges.subscribe(console.log); // monitor each single change
   <ng-container *ngIf="..."> </ng-container>
+===Context Menu===
+* [https://stackblitz.com/edit/angular-material-context-menu?file=app%2Fcontext-menu-example.html example @ stackblitz]
 ===Sidenav and Drawer===