Angular Material: Difference between revisions

Revision as of 12:37, 28 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">

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

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 25: / Line 25: @@
 ===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==