Angular Material: Difference between revisions

Revision as of 12:35, 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

Open Topics

late installation of HammerJs see last chapter

@@ Line 6: / Line 6: @@
 ==Concepts==
-Angular material is based on the The Component Dev Kit (CDK). It is a set of behavior primitives for building UI components.
+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==