Angular UI/Material Design Flashcards
Angular Flex-Layout
https://www.npmjs.com/package/@angular/flex-layout
Angular Flex Layout provides a sophisticated layout API using Flexbox CSS + mediaQuery. This module provides Angular developers with component layout features using a custom Layout API, mediaQuery observables, and injected DOM flexbox-2016 CSS stylings.
The Flex Layout engine intelligently automates the process of applying appropriate Flexbox CSS to browser view hierarchies. This automation also addresses many of the complexities and workarounds encountered with the traditional, manual, CSS-only application of box CSS.
The real power of Flex Layout, however, is its responsive engine. The Responsive API enables developers to easily specify different layouts, sizing, visibilities for different viewport sizes and display devices.
Getting Started
Start by installing the Angular Layout library from npm
npm i -s @angular/flex-layout @angular/cdk
Next, you’ll need to import the Layout module in your app’s module.
app.module.ts
import { FlexLayoutModule } from ‘@angular/flex-layout’;
…
@NgModule({
...
imports: [ FlexLayoutModule ],
...
});
After that is configured, you can use the Angular Layout attributes in your HTML tags for flex layout:
<div>
</div>
https://github.com/angular/flex-layout
Angular Flex-Layout static API Overview
The Angular Layout features provide smart, syntactic directives to allow developers to easily and intuitively create responsive and adaptive layouts using Flexbox and CSS Grid.
The API outline here is considered static and provides a UX that will adjust element sizes and positions as the browser window width changes. The static API can be considered the default desktop layout API.
Developers should use the Responsive API to support alternate layout configurations for mobile or tablet devices
The Angular Layout API is an intuitive list of HTML directives (aka attributes) that can be used on HTML containers and elements. Instead of using traditional CSS stylesheets, developers will define their layouts declaratively directly in the HTML.
An important, fundamental concept is understanding which APIs are used on DOM containers versus APIs used on DOM child elements in those containers.
angular flex layout static api for DOM container
HTML API Allowed values
fxLayout [wrap] row | column | row-reverse | column-reverse
fxLayoutAlign main-axis: start | center | end | space-around | space-between | space-evenly; cross-axis: start | center | end | stretch | space-between | space-around | baseline
fxLayoutGap % | px | vw | vh
gdAlignColumns main-axis: start | center | end | space-around | space-between | space-evenly | stretch; cross-axis: start | center | end | stretch
gdAlignRows main-axis: start | center | end | space-around | space-between | space-evenly | stretch; cross-axis: start | center | end | stretch
gdAreas names separated by |, e.g. gdAreas=”area1 | area2 | area3” gdInline for inline-grid
gdAuto row | column | dense | row dense | column dense gdInline for inline-grid
gdColumns any valid input for grid-template-columns gdInline for inline-grid
! at the end means grid-auto-columns
gdRows any valid input grid-template-rows gdInline for inline-grid
! at the end means grid-auto-rows
gdGap % | px | vw | vh gdInline for inline-grid
These directives affect the flow and layout children elements in the container
angular flex layout static api for DOM elements
API for DOM elements: HTML Allowed values fxFlex "" | px | % | vw | vh | , fxFlexOrder int fxFlexOffset % | px | vw | vh fxFlexAlign start | baseline | center | end fxFlexFill, fxFill gdArea string name for the area as defined in gdAreas gdColumn any valid value for grid-column gdRow any valid value for grid-row gdGridAlign These directives affect the layout and size of the host element. Note the API expects their host elements to be inside a DOM container (a 'block' element which is itself using the Layout API for containers).
angular flex layout static api for any element
API for any element: HTML API Allowed values fxHide TRUE | FALSE | 0 | "" fxShow TRUE | FALSE | 0 | "" ngClass @extends ngClass core ngStyle @extends ngStyle core imgSrc @extends src attribute Shown below is sample HTML markup that uses both the container and element Static API:
<div>
<div></div>
<div>
<div></div>
<div></div>
<div></div>
</div>
<div></div>
</div>
Angular Layout directives assign CSS styles directly in-line to the host element. These in-line styles override inherited styles, ShadowDOM styles and even ShadowDOM tree stylings on the element :host
Prgrammatic usage for angular flex layout
Most of the Angular Layout functionality is provided via Directives used declaratively in template HTML. There are two (2) programmatic features, however, that are published for programmatic usages:
MediaObserver:
Injectable service used to subscribe to MediaQuery activation changes. You can access its observable through the media$ property
import {MediaObserver} from ‘@angular/flex-layout’;
constructor(public mediaObserver: MediaObserver ) {
mediaObserver.media$.subscribe(…);
}
BREAKPOINT:
Injection token used to override or extend the default breakpoints with custom MediaQuery breakpoints.
import {BREAKPOINT} from ‘@angular/flex-layout’;
providers: [{provide: BREAKPOINT, useValue: MY_CUSTOM_BREAKPOINTS, multi: true}]
Special Responsive Features
Special Responsive Features
While the following APIs also add or remove DOM element inline styles, they are NOT FlexBox CSS specific.
Instead these are Responsive APIs used to adjust specific, non-flexbox styles when a specific mediaQuery has activated:
fxShow: This markup specifies if its host element should be displayed (or not)
<div></div>
fxHide: This markup specifies if its host element should NOT be displayed
<div></div>
ngClass : Enhances the ngClass directives with class changes based on mediaQuery activations
<div></div>
ngStyle: Enhances the ngStyle directive with style updates based on mediaQuery activations
<div></div>
Static API:
HTML API (Declarative) The features of Angular Layout are best used declaratively in template HTML. This API has two (2) significant feature sets:
Static API: Summary of static API features.
Responsive API: Introducing Responsive API and BreakPoints details.
As each directive (aka API) within the library has its own constraints and options, the links below should be used to navigate to the specific documentation pages for each directive
Containers
This API set applies CSS stylings for DOM container elements with 1 or more nested children:
fxLayout: Defines the flow order of child items within a flexbox container
<div></div>
fxLayoutGap: Defines if child items within a flexbox container should have a gap
<div></div>
fxLayoutAlign: Defines how flexbox items are aligned according to both the main-axis and the cross-axis, within a flexbox container
<div></div>
gdAlignColumns: Aligns the items column-wise
<div></div>
gdAlignRows: Aligns the items row-wise
<div></div>
gdAreas: Describes the areas the grid contains
<div></div>
gdAuto: Controls the auto placement for the grid
<div></div>
gdColumns: Defines the line names and track sizing functions of the grid columns
<div></div>
gdRows: Defines the line names and track sizing functions of the grid rows
<div></div>
gdGap: Defines the gap between grid items
<div></div>
Child Elements within Containers
This API set applies CSS stylings for a DOM element nested within a DOM container:
fxFlex: This markup specifies the resizing of its host element within a flexbox container flow
<div></div>
fxFlexOrder: Defines the order of a flexbox item
<div></div>
fxFlexOffset: Offset a flexbox item in its parent container flow layout
<div></div>
fxFlexAlign: Works like fxLayoutAlign, but applies only to a single flexbox item, instead of all of them
<div></div>
fxFlexFill:
Maximizes width and height of element in a layout container
<div></div>
gdArea: Marks the element as a CSS Grid area
<div></div>
gdColumn: Specifies a grid item’s size and location within the grid column
<div></div>
gdRow: Specifies a grid item’s size and location within the grid row
<div></div>
gdGridAlign: Aligns a grid item within its container element
<div></div>
Responsive API
Responsive layouts in Material Design adapt to any possible screen size. Google’s specifications provide guidance that includes a flexible grid that ensures consistency across layouts, breakpoint details about how content reflows on different screens, and a description of how an app can scale from small to extra-large screens.
Enhancing the Static API
Developers should consult the HTML Declarative API for specific Static API details, then simply extend the HTML markup usages by adding the responsive suffixes (as discussed below)!
Angular Layout will automatically handle all the details around listening for mediaQuery activations and applying the responsive values to the host DOM elements.
Responsive Features
Responsive Features
To extend the static API with responsive features, we will first associate specific breakpoint aliases with mediaQuery values.
MediaQueries and Aliases
We can associate breakpoints with mediaQuery definitions using breakpoint alias(es):
breakpoint mediaQuery
xs ‘screen and (max-width: 599px)’
sm ‘screen and (min-width: 600px) and (max-width: 959px)’
md ‘screen and (min-width: 960px) and (max-width: 1279px)’
lg ‘screen and (min-width: 1280px) and (max-width: 1919px)’
xl ‘screen and (min-width: 1920px) and (max-width: 5000px)’
lt-sm ‘screen and (max-width: 599px)’
lt-md ‘screen and (max-width: 959px)’
lt-lg ‘screen and (max-width: 1279px)’
lt-xl ‘screen and (max-width: 1919px)’
gt-xs ‘screen and (min-width: 600px)’
gt-sm ‘screen and (min-width: 960px)’
gt-md ‘screen and (min-width: 1280px)’
gt-lg ‘screen and (min-width: 1920px)’
Example of applying responsive api on static api for flex layout
If we combine the breakpoint alias with the static API, we can easily support responsive breakpoints using a simple markup convention:
The alias is used as suffix extensions to the static API HTML markup:
.=””
[.]=””
Below is an example usage of the Responsive Layout API:
<div>
<div></div>
<div>
<div></div>
<div></div>
<div></div>
</div>
<div></div>
</div>
In the markup above the HTML API directives use both static values and expression bindings; where the values are expressed as raw, percentage, or pixel values.
Note: numeric values not explicitly annotated as px, vw, or vh default to percentage values.
Breakpoint Activation Fallback Algorithm –Not Clear
When a breakpoint is activated and the hosting element does NOT have a responsive API defined for the newly activated breakpoint, the Flex-Layout responsive engine uses a fallback, descending-scan algorithm to determine the replacement activation value. The algorithm uses breakpoint priorities to sort activate breakpoints by descending-priority.
This algorithm searches:
For non-overlapping breakpoints: the search scans from smallest-to-largest breakpoint range to find the closest, matching activation value.
(xs, sm, md, lg, xl)
For overlapping breakpoints: the search scans from smallest-to-largest breakpoint range to find the closest, matching activation value.
(lt-sm, lt-md, lt-lg, lt-xl); where lt-xl is the largest range
(gt-xs, gt-sm, gt-md, gt-lg); where gt-xs is the largest range.
Developers should consider (highest priority to lowest priority) equates to (smallest range to largest range).
Consider the following responsive markup examples:
Example #1
<div> ... </div>
When the activated breakpoint is:
xl, then fallback to the default fxShow; so the div is shown
lg, then the div is hidden (since the value === ‘true’)
md, then fallback to the default fxShow; so the div is shown
sm, then fallback to the default fxShow; so the div is shown
xs, then the div is shown (since the value === ‘false’)
Example #2
<div> ... </div>
When the activated breakpoint is:
xl, then fallback to ‘gt-sm’ so the div sizing is 100%
lg, then fallback to ‘gt-sm’ so the div sizing is 100%
md, then fallback to ‘gt-sm’ so the div sizing is 100%
sm, then fallback to the default fxFlex=”50%”; so the div sizing is 50%
xs, then fallback to the default fxFlex=”50%”; so the div sizing is 50%
Example #3
screen shot 2019-01-01 at 7 00 56 pm
https://github.com/angular/flex-layout/wiki/Responsive-API
CSS Flex Layout links
https: //github.com/angular/flex-layout
https: //github.com/angular/flex-layout/wiki/Declarative-API-Overview
https: //github.com/angular/flex-layout/wiki/API-Documentation
https: //github.com/angular/flex-layout/wiki/Responsive-API
https: //tburleson-layouts-demos.firebaseapp.com/#/docs
API for DOM containers-fxLayout API
https://github.com/angular/flex-layout/wiki/fxLayout-API
The fxLayout directive should be used on DOM containers whose children should layout or flow as the text direction along the main-axis or the cross-axis.
<div>
<div>1. One</div> <div>2. Two</div> <div>3. Three</div> <div>4. Four</div>
</div>
or
<div> <div>1. One</div> <div>2. Two</div> <div>3. Three</div> <div>4. Four</div> </div>
fxLayout Options
Shown below are the supported fxLayout directive values and their resulting CSS stylings on the hosting element container:
Value Equivalent CSS '' (default) flex-direction: row row flex-direction: row row-reverse flex-direction: row-reverse column flex-direction: column column-reverse flex-direction: column-reverse
fxLayout Side-Effects
Changes to the fxLayout value will cause the following directives to update and modify their element stylings:
fxLayoutGap
fxFlex
fxLayoutAlign
API for DOM containers-fxLayout + wrap
fxLayout + wrap
By default, flex items will not wrap in their container. Formerly published as distinct directive, fxLayoutWrap was deprecated in favor of simply adding the wrap parameter as a secondary option to the fxLayout directive.
<div>
<div>1. One</div> <div>2. Two</div> <div>3. Three</div> <div>4. Four</div>
</div>
Note: when using wrap, developers must first specify the layout direction.
API for DOM containers-fxLayout + inline
fxLayout + inline
There are some instances where developers want to use the inline-flex CSS display property, instead of the default. Angular Layout provides this option by accepting a secondary argument to the fxLayout directive as follows:
<div>
<div>1. One</div> <div>2. Two</div> <div>3. Three</div> <div>4. Four</div>
</div>
Note: when using inline, developers must first specify the layout direction.
API for DOM containers-fxLayoutAlign API
The fxLayoutAlign directive should be used on DOM containers whose children should be aligned on the main and cross-axis (optional)
<div>
<div>1. One</div> <div>2. Two</div> <div>3. Three</div> <div>4. Four</div>
</div>
API for DOM containers-fxLayoutAlign API - Main-axis
horizantal axis like justify-content:center
API for DOM containers-fxLayoutAlign API - Cross -axis
vertical alignement :align-items: center; align-content: center
API for DOM containers-fxLayoutAlign Options
Shown below are the supported fxLayoutAlign directive values and their resulting CSS stylings on the hosting element container
<div>
<div>1. One</div> <div>2. Two</div> <div>3. Three</div> <div>4. Four</div>
</div>
Main Axis
Value Equivalent CSS
(default) justify-content: flex-start
start or flex-start justify-content: flex-start
center justify-content: center
end or flex-end justify-content: flex-end
space-around justify-content: space-around
space-between justify-content: space-between
space-evenly justify-content: space-evenly
Cross Axis (optional)
Value Equivalent CSS
(default) align-items: stretch; align-content: stretch
start or flex-start align-items: flex-start; align-content: flex-start
center align-items: center; align-content: center
end or flex-end align-items: flex-end; align-content: flex-end
space-around align-items: space-around; align-content: space-around
space-between align-items: space-between; align-content: space-between
stretch max-width: 100% if flex-direction: column; else max-height: 100%
baseline align-items: baseline; align-content: stretch
API for DOM containers-fxLayoutGap API
The fxLayoutGap directive should be used on to specify margin gaps on children within a flexbox container (e.g. nested within a fxLayout container). There is a secondary mode to enable a gutter system with a margin applied on the host element.
Default Mode
margin-right used when the parent container flex-direction == “row”
margin-bottom used when the parent container flex-direction == “column”
Note that the last child item will NOT have a margin gap specified; only the inside gaps are specified. Additionally, fxLayoutGap does not respond to reveresed flow directions: column-reverse or row-reverse are used.
Examples: Flex-Direction: Row <div> <div>1. One</div> <div>2. Two</div> <div>3. Three</div> <div>4. Four</div> </div> lg_1
<div> <div>1. One</div> <div>2. Two</div> <div>3. Three</div> <div>4. Four</div> </div> ---- Flex-Direction: Column <div> <div>1. One</div> <div>2. Two</div> <div>3. Three</div> <div>4. Four</div> </div> fxLayout_column
<div>
<div>1. One</div> <div>2. Two</div> <div>3. Three</div> <div>4. Four</div>
</div>
API for DOM containers-Using fxLayoutGap with Wrap
When using wrap with fxLayout to wrap rows or columns, developers should account for the gap sizes when specifying the child item sizes (using fxFlex).
API for DOM containers-Grid Mode - not clear
To use fxLayoutGap with a gutter system, simply append the suffix grid to any fxLayoutGap value. For instance:
<div> <div>Section 1</div> <div>Section 2</div> <div>Section 3</div> </div> This creates a gutter system by applying a margin to the host element and an inverse padding to each child. Other than this change, it works exactly as the default mode. It also takes flex-order and hidden elements into account, and has the same responsive abilities as the default mode.
Please note that unlike the standard gap functionality, fxLayoutGap with the grid keyword applies a padding to each child element to add the gutter, in addition to the margin on the host element.
API for DOM elements: -
HTML Allowed values fxFlex "" | px | % | vw | vh | , fxFlexOrder int fxFlexOffset % | px | vw | vh fxFlexAlign start | baseline | center | end fxFlexFill, fxFill gdArea string name for the area as defined in gdAreas gdColumn any valid value for grid-column gdRow any valid value for grid-row gdGridAlign
API for DOM containers:
HTML API Allowed values
fxLayout [wrap] row | column | row-reverse | column-reverse
fxLayoutAlign main-axis: start | center | end | space-around | space-between | space-evenly; cross-axis: start | center | end | stretch | space-between | space-around | baseline
fxLayoutGap % | px | vw | vh
gdAlignColumns main-axis: start | center | end | space-around | space-between | space-evenly | stretch; cross-axis: start | center | end | stretch
gdAlignRows main-axis: start | center | end | space-around | space-between | space-evenly | stretch; cross-axis: start | center | end | stretch
gdAreas names separated by |, e.g. gdAreas=”area1 | area2 | area3” gdInline for inline-grid
gdAuto row | column | dense | row dense | column dense gdInline for inline-grid
gdColumns any valid input for grid-template-columns gdInline for inline-grid
! at the end means grid-auto-columns
gdRows any valid input grid-template-rows gdInline for inline-grid
! at the end means grid-auto-rows
gdGap % | px | vw | vh gdInline for inline-grid
API for any element:
HTML API Allowed values fxHide TRUE | FALSE | 0 | "" fxShow TRUE | FALSE | 0 | "" ngClass @extends ngClass core ngStyle @extends ngStyle core imgSrc @extends src attribute
API for DOM elements:fxFlex API
https://github.com/angular/flex-layout/wiki/fxFlex-API
The fxFlex directive should be used on elements within a fxLayout container and identifies the resizing of that element within the flexbox container flow.
This directive is the smartest, most powerful directive within the flex-layout API toolbox and is essentially the FlexBox API for resizing elements in horizontal or vertical stacks.
Flexbox element resizing utilizes three (3) parameters:
flex-grow: defines how much a flexbox item should grow (proportional to the others) if there’s space available. The flex-grow value overrides the width.
flex-shrink: defines how much a flexbox item should shrink if there is not enough space available.
flex-basis: controls the default size of an element, before it is manipulated by other Flexbox properties
Note that the resizing occurs along the main-axis of the layout and maybe affected by the fxLayoutAlign options.
<div>
<div></div></div>
means
Resize the div element to fill the available space along the
horizontal, main-axis flow of its parent container!
The notation:
<div> <div></div> <div></div> <div></div></div> means
Resize the div elements to fill 1/3rd each the available space
along horizontal main-axis.
<div>
<div>
<div>This is a blurb.</div>
<div>This is a blurb.</div>
<div>This is a blurb.</div>
</div>
</div>
https://stackblitz.com/edit/flex-layout-angular-material-csc4zz?file=app%2Fapp.component.html
API for DOM elements: fxFlex Attribute Usages
The fxFlex directive supports two usages: short-form and long-form:
<div></div>
or
<div></div>
The long-form enables the developer to specify the grow, shrink, and basis values inline.
fxFlex=”1 1 52%”
fxFlex=”3 3 calc(15em + 20px)”
fxFlex=”1 1 auto”
The short-form enables developers to specify only the flex-basis and uses defaults for the shrink and grow options: (default values == 1).
fxFlex fxFlex="" fxFlex="2 2 calc(10em + 10px)" fxFlex="102px" Note the above examples are using static values. To use runtime expressions, developers should use the box-notation to specify 1-way DataBind (to an expression). E.g. [fxFlex]="twoColumnSpan"
fxFlex Options
The flex-basis values can be pixels, percentages, calcs, em, vw, vh, or known aliases
fxFlex fxFlex="" fxFlex="2 2 calc(10em + 10px)" fxFlex="102px" fxFlex="auto"
API for DOM elements: Flex-basis aliases
Flex-basis aliases are accepted shorthand terms used to quickly specify Flexbox stylings. Here are the industry mappings of the alias to its resulting CSS styling:
alias Equivalent CSS grow flex: 1 1 100% initial flex: 0 1 auto auto flex: 100% none flex: 0 0 auto nogrow flex: 0 1 auto noshrink flex: 1 0 auto
API for DOM elements:fxFlex
fxFlex also auto-assign additional stylings, dependent upon the fxFlex value used and the layout, main-axis direction:
box-sizing : border-box
When a parent fxLayout container changes flow-direction, the fxFlex directive will automatically update the element’s inline-styling with corrected stylings.
API for DOM elements:Default fxFlex Values
When the Angular compiler builds an instance of the FlexDirective, it initializes the
import {Input} from ‘@angular/core’;
@Input(‘fxFlex’)
set(val) {….}
with the static value of “”. fxFlex is the same/equivalent as fxFlex=””. And this empty string value is internally interpreted (by the FlexDirective) as an instruction to assign an inline element-styling of
flex: 1 1 0.000000001px
Where the default values of flew-shrink and flex-grow are 1 and have not been overridden.
Another usage (with distinct grow and shrink values) such as
<div></div>
would result in an inline styling of
flex: 2 0 0.000000001px
What this means to the developer is an intuitive resizing for elements:
The notation
<div>
<div><div>
</div>
means
Resize the div element to fill the available space along the
horizontal, main-axis flow of its parent container!
The notation:
~~~
<div>
<div><div>
<div><div>
<div><div>
</div>
means
~~~
Resize the div elements to fill 1/3rd each the available space
along horizontal main-axis. </div></div></div></div></div></div></div></div>
API for DOM elements:fxFlexOrder API
The fxFlexOrder directive should be used on elements within a sorted fxLayout container and identifies the positional ordering of the element
<div> <div>1. One</div> <div>2. Two</div> <div>3. Three</div> <div>4. Four</div> </div> fxFlexOrder Options fxFlexOrder takes a single integer as argument, and populates its host element with the following inline CSS styling
Value Equivalent CSS
(default) order: 0
order:
API for DOM elements:fxFlexOffset
The fxFlexOffset directive should be used on on elements within a fxLayout container and dictates the margin between elements (RTL support coming soon!)
<div> <div>1. One</div> <div>2. Two</div> <div>3. Three</div> <div>4. Four</div> </div> fxFlexOffset Options fxFlexOffset takes a single parameter as argument, and populates its host element with the following inline CSS styling
Note: fxFlexOffset supports the following suffixes: % (default) | px | vw | vh
Value Equivalent CSS
(default) margin-left: 0%
margin-left:
API for DOM elements:fxFlexAlign API
The fxFlexAlign directive should be used on on elements within a sorted fxLayout container and dictates how the element should be aligned, overriding the container cross-axis alignment setting
<div> <div>1. One</div> <div>2. Two</div> <div>3. Three</div> <div>4. Four</div> </div> fxFlexAlign Options Shown below are the supported fxFlexAlign directive values and their resulting CSS stylings on the hosting element container
Value Equivalent CSS start align-self: flex-start center align-self: center end align-self: flex-end baseline align-self: baseline stretch align-self: stretch Note: All supported values for align-self are supported by this directive
API for DOM elements:fxFlexFill API
The fxFlexFill directive should be used on elements within a fxLayout container and identifies the element whose width and height should be maximized
<div>
<div>1. One</div> <div>2. Two</div> <div>3. Three</div> <div>4. Four</div>
</div>
fxFlexFill Options
fxFlexFill takes no arguments, and populates its host element with the following inline CSS styling:
Key Value margin 0 width 100% height 100% min-width 100% min-height
API for DOM elements Note
These directives affect the layout and size of the host element. Note the API expects their host elements to be inside a DOM container (a ‘block’ element which is itself using the Layout API for containers).
API for any element: fxHide
API for any element: fxHide
The fxHide directive allows developers to dynamically and/or responsively show/hide the hosting element. The fxHide logic defaults to hiding an element.
API
Flex-Layout supports STATIC API for responsive layouts using the API without . alias suffixes: fxShow, fxHide, etc. These values of these directives are used (and styles applied) regardless of the viewport size. These static rules can be specifically overridden by a registered responsive API use (see below).
Flex-Layout provides a RESPONSIVE API for dynamic adaptive layouts. This is simply using the the static API with mediaQuery alias suffixes. e.g.
fxHide.lg, etc.
fxShow.gt-sm,
Using fxShow & fxHide
fxHide (without a value) means “display:none”
fxShow (without a value) means use the origin display style value
fxHide=”false” means use the original display value (should no longer be hidden)
fxShow=”false” means “display:none” and hide it.
fxHide is the inverse of fxShow
using Responsive api for hiding
Using Responsive API
When a mediaQuery range activates, the directive instances will be notified. If the current activate mediaQuery range (and its associated alias) are not used, then the static API value is restored as the fallback value.
The fallback solution uses a largest_range-to-smallest_range search algorithm. Consider the following:
<div></div>
When the lg range is activated (by viewport resizing,etc) the div is hidden since the gt-md is used as the closest descending fallback value.
When the md range is activated, the div is shown since the static API is the closest descending matching condition.
When the sm range is activated the div is hidden.
Please note that there is no left-to-right precedence. This is an incorrect interpretation..
Combine Uses of fxShow + fxHide
We can leverage the default values of these directives select specific conditions when an element is hidden or shown.
Consider:
<div></div>
means the the above element will be hidden by default and ONLY shown on viewport sizes greater than mobile.
<div></div>
means the the above element will be shown by default and ONLY hidden on viewport sizes == md mediaQuery ranges.
API for any element:fxShow API
The fxShow directive allows developers to dynamically and/or responsively show/hide the hosting element. The fxShow logic defaults to showing an element.
API
Flex-Layout supports STATIC API for responsive layouts using the API without . alias suffixes: fxShow, fxHide, etc. These values of these directives are used (and styles applied) regardless of the viewport size. These static rules can be specifically overridden by a registered responsive API use (see below).
Flex-Layout provides a RESPONSIVE API for dynamic adaptive layouts. This is simply using the the static API with mediaQuery alias suffixes. e.g.
fxShow.gt-sm,
fxHide.lg, etc.
Using fxShow & fxHide
fxShow (without a value) means use the origin display style value
fxHide (without a value) means “display:none”
fxShow=”false” means “display:none” and hide it.
fxHide=”false” means use the original display value (should no longer be hidden)
fxHide is the inverse of fxShow
Using Responsive API
When a mediaQuery range activates, the directive instances will be notified. If the current activate mediaQuery range (and its associated alias) are not used, then the static API value is restored as the fallback value.
The fallback solution uses a largest_range-to-smallest_range search algorithm. Consider the following:
<div></div>
When the lg range is activated (by viewport resizing,etc) the div is hidden since the gt-md is used as the closest descending fallback value.
When the md range is activated, the div is shown since the static API is the closest descending matching condition.
When the sm range is activated the div is hidden.
Please note that there is no left-to-right precedence. This is an incorrect interpretation..
Overlapping Responsive API Usages
When multiple overlapping breakpoint aliases are used, the one with the largest range wins.
Consider:
<div></div>
When the media range for md activates, then both gt-md and gt-xs responsive usages ^ will match. But gt-xs matches last so that value will be used and therefore the div element will be shown.
Combine Uses of fxShow + fxHide
We can leverage the default values of these directives select specific conditions when an element is hidden or shown.
Consider:
<div></div>
means the the above element will be hidden by default and ONLY shown on viewport sizes greater than mobile.
<div></div>
means the the above element will be shown by default and ONLY hidden on viewport sizes == md mediaQuery ranges.
ngClass API - flex
The @angular/flex-layout ngClass directive is a subclass of the @angular/common ngClass directive.
Standard class Features Note that the default classes (specified by class="" and ngClass="..." will be preserved (and merged) into other activation class lists UNLESS the breakpoint has specified that a default class should be removed.
For example:
<div></div>
By default the div will have only the class0 classname assigned.
When the xs breakpoint activates, then the div will have class0 class1 class2 assigned.
When the xs breakpoint deactivates, then the div will only have the class0 name assigned.
Standard ngClass Features
Traditionally ngClass adds and removes CSS classes on an HTML element:
The CSS classes are updated as follows, depending on the type of the expression evaluation:
string - the CSS classes listed in the string (space delimited) are added,
Array - the CSS classes declared as Array elements are added,
Object - keys are CSS classes that get added when the expression given in the value evaluates to a truthy value, otherwise they are removed.
…
Responsive Features
The Flex-Layout ngClass adds responsive features to also add/remove CSS classes; but only for activated breakpoints.
ngClass. ; where alias == xs | sm | md | etc.
Example #1:
<div>
TESTING
</div>
class
See Plunkr Demo
Example #2:
<div>
TESTING
</div>
class2
See Plunkr Demo
Merging Classes Note that the default classes (specified by class="" and ngClass="..." will be preserved (and merged) into other activation class lists UNLESS the breakpoint has specified that a default class should be removed:
Below the class first is used for all mediaQuery activations except for ‘xs’ (mobile) where it is explicitly removed;
ngStyle api
The @angular/flex-layout ngStyle directive is a subclass of the @angular/common ngStyle directive.
ngStyle Enhancements
Supports merging style key-values into non-responsive [ngStyle] options
Supports responsive [ngStyle.] usages; see section below
Standard (non-responsive) Features
Traditionally ngStyle updates an HTML element inline styles (highest specificity):
The styles are updated according to the value of the expression evaluation:
keys are style names with an optional . suffix (ie ‘top.px’, ‘font-style.em’),
values are the values assigned to those properties (expressed in the given unit).
…
…
…
Note: using ngStyle with style will cause the initial style key/values to be merged into the ngStyle options.
Responsive Features
The Flex-Layout ngClass adds responsive features to also add/remove CSS styles for activated breakpoints.
…
…
…
screen shot 2017-09-15 at 6 04 16 pm
See Plunkr Demo
Merging Styles Note that the default styles (specified by style="" or ngStyle="...") will be preserved (and merged) into other activation class lists UNLESS the breakpoint has specified that a style should be removed (using a null value)
Below the font size and colors are changed for ‘sm’ and ‘md’ breakpoints. Yet for ‘md’, the text-align style remains the same as the default === ‘left’. Deactivations of ‘sm’ or ‘md’ breakpoints to other breakpoints will result in only the default styles being re-applied.
…
imgSrc API
The imgSrc directive is a responsive extension of the HTML src attribute and can be used on any tag in the markup
<div> <img> </div> imgSrc Options imgSrc takes one string argument, and alters its host's src attribute as necessary when breakpoints are activated. The initial value will be used as the default and fallback when a responsive alias is not defined
sample HTML markup that uses both the container and element Static API
Shown below is sample HTML markup that uses both the container and element Static API:
<div>
<div></div>
<div>
<div></div>
<div></div>
<div></div>
</div>
<div></div>
</div>
Angular Layout directives assign CSS styles directly in-line to the host element. These in-line styles override inherited styles, ShadowDOM styles and even ShadowDOM tree stylings on the element :host
mat-expansion-panel
https://material.angular.io/components/expansion/overview
mat-accordion
Multiple expansion-panels can be combined into an accordion. The multi=”true” input allows the expansions state to be set independently of each other. When multi=”false” (default) just one panel can be expanded at a given time:
https://material.angular.io/components/expansion/overview
mat-table
- Write your mat-table and provide data
Begin by adding the component to your template and passing in data.
The simplest way to provide data to the table is by passing a data array to the table’s dataSource input. The table will take the array and render a row for each object in the data array.
…
Since the table optimizes for performance, it will not automatically check for changes to the data array. Instead, when objects are added, removed, or moved on the data array, you can trigger an update to the table’s rendered rows by calling its renderRows() method.
While an array is the simplest way to bind data into the data source, it is also the most limited. For more complex applications, using a DataSource instance is recommended. See the section “Advanced data sources” below for more information.
- Define the column templates
Next, write your table’s column templates.
Each column definition should be given a unique name and contain the content for its header and row cells.
Here’s a simple column definition with the name ‘score’. The header cell contains the text “Score” and each row cell will render the score property of each row’s data.
Score
{{user.score}}
Note that the cell templates are not restricted to only showing simple string values, but are flexible and allow you to provide any template.
If your column is only responsible for rendering a single string value for the header and cells, you can instead define your column using the mat-text-column. The following column definition is equivalent to the one above.
Check out the API docs and examples of the mat-text-column to see how you can customize the header text, text alignment, and cell data accessor. Note that this is not compatible with the flex-layout table. Also, a data accessor should be provided if your data may have its properties minified since the string name will no longer match after minification.
- Define the row templates
Finally, once you have defined your columns, you need to tell the table which columns will be rendered in the header and data rows.
To start, create a variable in your component that contains the list of the columns you want to render.
columnsToDisplay = [‘userName’, ‘age’];
Then add mat-header-row and mat-row to the content of your mat-table and provide your column list as inputs.
Note that this list of columns provided to the rows can be in any order, not necessarily the order in which you wrote the column definitions. Also, you do not necessarily have to include every column that was defined in your template.
This means that by changing your column list provided to the rows, you can easily re-order and include/exclude columns dynamically.
tha mat-table column defination
the column definitions should match the columnstoDisplay array ; in we array we could specify which ever columns we want to display and the order
export class StaffComponent implements OnInit {
displayedColumns: string[] = [‘id’, ‘firstName’, ‘lastName’, ‘email’, ‘phone1’, ‘positionId’, ‘credentialId’, ‘isRegistry’, ‘responsibilities’];
staff: Staff[];
dataSourceStaff: MatTableDataSource;
constructor(private rest: RestService) {
this.dataSourceStaff = new MatTableDataSource;
}
provides an expandable details-summary view.
Expansion-panel content
Each expansion-panel must include a header and may optionally include an action bar.
Header
The shows a summary of the panel content and acts as the control for expanding and collapsing. This header may optionally contain an and an , which format the content of the header to align with Material Design specifications.
By default, the expansion-panel header includes a toggle icon at the end of the header to indicate the expansion state. This icon can be hidden via the hideToggle property.
This is the expansion title This is a summary of the content
<p>This is the primary content of the panel.</p>
Action bar
Actions may optionally be included at the bottom of the panel, visible only when the expansion is in its expanded state.
This is the expansion title
<p>This is the primary content of the panel.</p>
Click me
Disabling a panel
Expansion panels can be disabled using the disabled attribute. A disabled expansion panel can’t be toggled by the user, but can still be manipulated programmatically.
This is the expansion title This is a summary of the content
Accordion
Multiple expansion-panels can be combined into an accordion. The multi=”true” input allows the expansions state to be set independently of each other. When multi=”false” (default) just one panel can be expanded at a given time:
This is the expansion 1 title This the expansion 1 content This is the expansion 2 title This the expansion 2 content
- Lazy rendering
By default, the expansion panel content will be initialized even when the panel is closed. To instead defer initialization until the panel is open, the content should be provided as an ng-template:
This is the expansion title Some deferred content
-Accessibility
The expansion-panel aims to mimic the experience of the native and elements. The expansion panel header has role=”button” and also the attribute aria-controls with the expansion panel’s id as value.
The expansion panel headers are buttons. Users can use the keyboard to activate the expansion panel header to switch between expanded state and collapsed state. Because the header acts as a button, additional interactive elements should not be put inside of the header.
table like mat-accordion
<span>Name</span>
<span>Vessel Id</span>
<span>Status</span>
<span>IRCS</span>
<span class="mat-cell">{{item.vesselName}}</span>
<span class="mat-cell">{{item.vesselId}}</span>
<span class="mat-cell">{{item.vesselStatus}}</span>
<span class="mat-cell">{{item.ircs}}</span>
<div><pre>{{item | json}}</pre></div>
---
styles:
.mat-table
{
display:block;
}
.mat-cell, .mat-header-cell {
flex: 1;
overflow: hidden;
word-wrap: break-word;
}
CdkTable
https://material.angular.io/cdk/table/overview
The CdkTable is an unopinionated, customizable data-table with a fully-templated API, dynamic columns, and an accessible DOM structure. This component acts as the core upon which anyone can build their own tailored data-table experience.
The table provides a foundation upon which other features, such as sorting and pagination, can be built. Because it enforces no opinions on these matters, developers have full control over the interaction patterns associated with the table.
For a Material Design styled table, see the documentation for MatTable which builds on top of the CDK data-table.
CDK data-table example
first define headers
second define cell headers
then actual data
The first step to writing the data-table template is to define the columns. A column definition is specified via an with the cdkColumnDef directive, giving the column a name. Each column definition can contain a header-cell template (cdkHeaderCellDef), data-cell template (cdkCellDef), and footer-cell template (cdkFooterCellDef).
User name
{{row.a}}
User name
The set of columns defined represent the columns that are available to be rendered. The specific columns rendered in a given row, and their order, are specified on the row (see below).
Note that cdkCellDef exports the row context such that the row data can be referenced in the cell template. The directive also exports the same properties as ngFor (index, even, odd, first, last).
The next step is to define the table’s header-row (cdkHeaderRowDef), data-row (cdkRowDef), and footer-row (cdkFooterRowDef). Note that each of these are optional to include, depending on what type of rows you want rendered (e.g. if you do not need a footer row, simply do not add its definition).
These row templates accept the specific columns to be rendered via the name given to the cdkColumnDef.
The cdkRowDef also exports row context, which can be used for event and property bindings on the row element. Any content placed inside of the header row or data row template will be ignored, as the rendered content of the row comes from the cell templates described above.
Example: table with three columns
User name
{{row.username}}
Age
{{row.age}}
Title
{{row.title}}
The columns given on the row determine which cells are rendered and in which order. Thus, the columns can be set via binding to support dynamically changing the columns shown at run-time.
It is not required to display all the columns that are defined within the template, nor use the same ordering. For example, to display the table with only age and username and in that order, then the row and header definitions would be written as:
Event and property bindings can be added directly to the row element.
CDK data-table -table with event and class binding on each row
= 18”
(click)=”handleRowClick(row)”>
CDK data-table Styling columns
Each header and row cell will be provided a CSS class that includes its column. For example, cells that are displayed in the column name will be given the class cdk-column-name. This allows columns to be given styles that will match across the header and rows.
Since columns can be given any string for its name, its possible that it cannot be directly applied to the CSS class (e.g. *nameColumn!). In these cases, the special characters will be replaced by the - character. For example, cells container in a column named *nameColumn! will be given the class cdk-column–nameColumn-.
CDK data-table Connecting the table to a data source
Data is provided to the table through a DataSource. When the table receives a data source, it calls the DataSource’s connect() method which returns an observable that emits an array of data. Whenever the data source emits data to this stream, the table will render an update.
Because the data source provides this stream, it bears the responsibility of triggering table updates. This can be based on anything: websocket connections, user interaction, model updates, time-based intervals, etc. Most commonly, updates will be triggered by user interactions like sorting and pagination.
CDK data-table trackBy
To improve performance, a trackBy function can be provided to the table similar to Angular’s ngFor trackBy. This informs the table how to uniquely identify rows to track how the data changes with each update.
CDK data-table Alternate HTML to using native table
The CDK table does not require that you use a native HTML table. If you want to have full control over the style of the table, it may be easier to follow an alternative template approach that does not use the native table element tags.
This alternative approach replaces the native table element tags with the CDK table directive selectors. For example, becomes ; becomes . The following shows a previous example using this alternative template:
User name
{{row.username}}
Age
{{row.age}}
Title
{{row.title}}
mat-table
The mat-table provides a Material Design styled data-table that can be used to display rows of data.
This table builds on the foundation of the CDK data-table and uses a similar interface for its data input and template, except that its element and attribute selectors will be prefixed with mat- instead of cdk-. For more information on the interface and a detailed look at how the table is implemented, see the guide covering the CDK data-table.
MatTable extends CdkTable
Angular 6 Animations
Now that the Angular 6 project is ready we’re able to set up Angular Animations for this project. The first step is to add the following import statement in app.module.ts:
import { BrowserAnimationsModule } from ‘@angular/platform-browser/animations’;
Next we need to add BrowserAnimationsModule to the array which is assigned to the import property of the @NgModule decorator:
imports: [
BrowserModule,
BrowserAnimationsModule
],
This is making the content of BrowserAnimationsModule available to our application, so that we’re able to import animations in our components.
Implementing Angular animations
https://medium.com/codingthesmartway-com-blog/angular-6-animations-from-scratch-76e110cba5fb
Implementing AnimateComponent
Having prepared AppComponent we can now continue with the implementation of AnimateComponent. First, we need to include a div element in animate.component.html which is displaying the rectangle which is being animated.
<div></div>
The corresponding CSS code for the myblock class needs to be inserted into animate.component.css:
.myblock {
background-color: green;
width: 300px;
height: 250px;
border-radius: 5px;
margin: 5rem;
}
Finally we’re able to define the animations / transitions in file animate.component.ts:
import { Component, OnInit, Input } from ‘@angular/core’;
import { trigger, state, style, animate, transition } from ‘@angular/animations’;
@Component({
selector: ‘app-animate’,
templateUrl: ‘./animate.component.html’,
styleUrls: [’./animate.component.css’],
animations: [
trigger(‘changeState’, [
state(‘state1’, style({
backgroundColor: ‘green’,
transform: ‘scale(1)’
})),
state(‘state2’, style({
backgroundColor: ‘red’,
transform: ‘scale(1.5)’
})),
transition(‘=>state1’, animate(‘300ms’)),
transition(‘=>state2’, animate(‘2000ms’))
])
]
})
export class AnimateComponent implements OnInit {
@Input() currentState;
constructor() { }
ngOnInit() {
}
}
Note, that we’re first importing trigger, state, style, animate, and transition from the @angular/animations package. Having imported those assets gives us the possibility of defining the animations we’d like to include in that components.
To define animations the animations property of the @Component decorator is used. By using the function trigger inside the array which is assigned to that property we’re defining animations which are used if the changeState trigger is activated (each time the currentState value changes). Therefore the string value changeState is passed into the call of that function.
The second parameter is an array again which is consisting of four element. For the first two items the state function is called and the style is defined which is used for state1 and state2. For each state we’re setting a different background color and a different scale.
As the last two elements we’re defining transitions (by using the transition function). The first transition is defined by the string *=>state1. This simply means that this transition is invoked each time state1 is set regardless of the previous state. By using the animate function and passing in the string value 300ms we’re defining that the transition has a duration of 300 milliseconds.
In a similar way the second transition is defined. This way we’re defining the transition which is taking place if state2 is entered.
Conclusion
Angular Animations are a powerful way to implement sophisticated and compelling animations for your Angular single page web application. Having followed this tutorial you have now a profound understanding of how to setup and apply Angular Animations in your Angular 6 project.
table expandable example
import {Component} from ‘@angular/core’;
import {animate, state, style, transition, trigger} from ‘@angular/animations’;
/**
* @title Table with expandable rows
/
@Component({
selector: ‘table-expandable-rows-example’,
styleUrls: [‘table-expandable-rows-example.css’],
templateUrl: ‘table-expandable-rows-example.html’,
animations: [
trigger(‘detailExpand’, [
state(‘collapsed’, style({height: ‘0px’, minHeight: ‘0’})),
state(‘expanded’, style({height: ‘’})),
transition(‘expanded <=> collapsed’, animate(‘225ms cubic-bezier(0.4, 0.0, 0.2, 1)’)),
]),
],
})
export class TableExpandableRowsExample {
dataSource = ELEMENT_DATA;
columnsToDisplay = [‘name’, ‘weight’, ‘symbol’, ‘position’];
expandedElement: PeriodicElement | null;
}
export interface PeriodicElement {
name: string;
position: number;
weight: number;
symbol: string;
description: string;
}
const ELEMENT_DATA: PeriodicElement[] = [
{
position: 1,
name: ‘Hydrogen’,
weight: 1.0079,
symbol: ‘H’,
description: Hydrogen is a chemical element with symbol H and atomic number 1. With a standard
atomic weight of 1.008, hydrogen is the lightest element on the periodic table.
}, {
position: 2,
name: ‘Helium’,
weight: 4.0026,
symbol: ‘He’,
description: Helium is a chemical element with symbol He and atomic number 2. It is a
colorless, odorless, tasteless, non-toxic, inert, monatomic gas, the first in the noble gas
group in the periodic table. Its boiling point is the lowest among all the elements.
}, {
position: 3,
name: ‘Lithium’,
weight: 6.941,
symbol: ‘Li’,
description: Lithium is a chemical element with symbol Li and atomic number 3. It is a soft,
silvery-white alkali metal. Under standard conditions, it is the lightest metal and the
lightest solid element.
}, {
position: 4,
name: ‘Beryllium’,
weight: 9.0122,
symbol: ‘Be’,
description: Beryllium is a chemical element with symbol Be and atomic number 4. It is a
relatively rare element in the universe, usually occurring as a product of the spallation of
larger atomic nuclei that have collided with cosmic rays.
}, {
position: 5,
name: ‘Boron’,
weight: 10.811,
symbol: ‘B’,
description: Boron is a chemical element with symbol B and atomic number 5. Produced entirely
by cosmic ray spallation and supernovae and not by stellar nucleosynthesis, it is a
low-abundance element in the Solar system and in the Earth's crust.
}, {
position: 6,
name: ‘Carbon’,
weight: 12.0107,
symbol: ‘C’,
description: Carbon is a chemical element with symbol C and atomic number 6. It is nonmetallic
and tetravalent—making four electrons available to form covalent chemical bonds. It belongs
to group 14 of the periodic table.
}, {
position: 7,
name: ‘Nitrogen’,
weight: 14.0067,
symbol: ‘N’,
description: Nitrogen is a chemical element with symbol N and atomic number 7. It was first
discovered and isolated by Scottish physician Daniel Rutherford in 1772.
}, {
position: 8,
name: ‘Oxygen’,
weight: 15.9994,
symbol: ‘O’,
description: Oxygen is a chemical element with symbol O and atomic number 8. It is a member of
the chalcogen group on the periodic table, a highly reactive nonmetal, and an oxidizing
agent that readily forms oxides with most elements as well as with other compounds.
}, {
position: 9,
name: ‘Fluorine’,
weight: 18.9984,
symbol: ‘F’,
description: Fluorine is a chemical element with symbol F and atomic number 9. It is the
lightest halogen and exists as a highly toxic pale yellow diatomic gas at standard
conditions.
}, {
position: 10,
name: ‘Neon’,
weight: 20.1797,
symbol: ‘Ne’,
description: Neon is a chemical element with symbol Ne and atomic number 10. It is a noble gas.
Neon is a colorless, odorless, inert monatomic gas under standard conditions, with about
two-thirds the density of air.
},
];
/** Copyright 2019 Google LLC. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license */
html file:
{{column}}
{{element[column]}}
<div class="example-element-detail">
<div class="example-element-diagram">
<div class="example-element-position"> {{element.position}} </div>
<div class="example-element-symbol"> {{element.symbol}} </div>
<div class="example-element-name"> {{element.name}} </div>
<div class="example-element-weight"> {{element.weight}} </div>
</div>
<div class="example-element-description">
{{element.description}}
<span class="example-element-description-attribution"> -- Wikipedia </span>
</div>
</div>
What’s the difference between [style] and [ngStyle] in Angular
style - for dynamic styling in angular but one property at a time
ngstyle - object with all the styling properties
https://blog.angulartraining.com/whats-the-difference-between-style-and-ngstyle-in-angular-68a3301c2ae6
When you need to apply dynamic styles to a HTML element using Angular, there are different options to consider.
The first and most obvious solution is to use the regular style or class HTML attributes along with Angular data-bindings, which looks like this:
<div>
The phone number you entered does not match the expected format
</div>
The above code would style the div using a color value set on the errorMessageColor property of your component. Thanks to the data binding, whenever that property changes, the div would get a new color.
You can make the above example even more powerful using the ternary operator in your expression to express a conditional styling:
<div>
The phone number you entered does not match the expected format
</div>
The above example assumes that hasError can evaluate to true, which is convenient since in Javascript anything that is not null or undefined would work. As a result, if hasError is something that isn’t null or undefined or false, then the message will show up in red color, otherwise it will be black.
This is great but it can get quite verbose if you want to apply multiple styles to the same element:
<div>
The phone number you entered does not match the expected format
</div>
In that case, using a CSS class is a much better option as you can refactor those CSS properties in one place and possibly reuse them on other HTML elements.
Sometimes, you might need very specific CSS properties based on different conditions though. That’s where ngStyle comes into play. With ngStyle, you can bind to an object that expresses as many conditions and cases as you need:
<div>
The phone number you entered does not match the expected format
</div>
And then in your component code:
this.currentStyles = {
‘font-style’: this.canSave ? ‘italic’ : ‘normal’,
‘color’: this.hasError ? ‘red’ : ‘black’,
‘font-size’: this.hasError ? ‘24px’ : ‘12px’
};
Now you can express as many different styles as needed. ngStyle is an Angular directive that gives you the flexibility to do this, where as style is a regular HTML property to which you can only bind values one by one. That’s the difference between the two of them.
Note that the same distinction of behavior applies between class and ngClass, where the former is meant to be used for single bindings, and the latter can be used to bind to a decision object similar to the one showed above for ngStyle.
Angular Material Icons
https://material.io/resources/icons/?icon=email&style=baseline
example for email:
<i>
email
</i>
<i>
email
</i>
I can not apply style on ng-container
the below will not work:
<div class="responsibility-chip">
{{ responsibility }}
</div>
-------------------
below will work:
<div>
{{ responsibility }}
</div>
adding tooltip to a button
Action
mat-form-field
is a component used to wrap several Angular Material components and apply common Text field styles such as the underline, floating label, and hint messages.
In this document, “form field” refers to the wrapper component and “form field control” refers to the component that the is wrapping (e.g. the input, textarea, select, etc.)
The following Angular Material components are designed to work inside a :
&
mat-form-field example
<div>
Input
<br></br>
Select
Option
<br></br>
Textarea
</div>
Form field appearance variants
The mat-form-field supports 4 different appearance variants which can be set via the appearance input. The legacy appearance is the default style that the mat-form-field has traditionally had. It shows the input box with an underline underneath it. The standard appearance is a slightly updated version of the legacy appearance that has spacing that is more consistent with the fill and outline appearances. The fill appearance displays the form field with a filled background box in addition to the underline. Finally the outline appearance shows the form field with a border all the way around, not just an underline.
There are a couple differences to be aware of between the legacy appearance and the newer standard, fill, and outline appearances. The matPrefix and matSuffix elements are center aligned by default for the newer appearances. The Material Design spec shows this as being the standard way to align prefix and suffix icons in the newer appearance variants. We do not recommend using text prefix and suffixes in the new variants because the label and input do not have the same alignment. It is therefore impossible to align the prefix or suffix in a way that looks good when compared with both the label and input text.
The second important difference is that the standard, fill, and outline appearances do not promote placeholders to labels. For the legacy appearance specifying will result in a floating label being added to the mat-form-field. For the newer variants it will just add a normal placeholder to the input. If you want a floating label, add a to the mat-form-field.
mat-form-field appreance example
<p>
Legacy form field
sentiment_very_satisfied
Hint
</p>
<p>
Standard form field
sentiment_very_satisfied
Hint
</p>
<p>
Fill form field
sentiment_very_satisfied
Hint
</p>
<p>
Outline form field
sentiment_very_satisfied
Hint
</p>
matSuffix/matPrefix
where to display mat icon
Fill form field sentiment_very_satisfied Hint
mat-form-field Floating label
The floating label is a text label displayed on top of the form field control when the control does not contain any text or when does not show any option text. By default, when text is present the floating label floats above the form field control. The label for a form field can be specified by adding a mat-label element.
In the legacy version of the (one that has no appearance attribute or has appearance=”legacy”) if a label is not specified, the placeholder attribute on the form control is promoted to a label. If a label is specified, the placeholder will be displayed as a normal placeholder. The placeholder will never be promoted to a label for standard, fill, and outline form fields. If you want to create a legacy form field with a placeholder but no label, you will need to specify an empty label to prevent the placeholder from being promoted.
If the form field control is marked with a required attribute, an asterisk will be appended to the label to indicate the fact that it is a required field. If unwanted, this can be disabled by setting the hideRequiredMarker property on
The floatLabel property of can be used to change this default floating behavior. It can set to never to hide the label instead of float it when text is present in the form field control. It can be set to always to float the label even when no text is present in the form field control. It can also be set to auto to restore the default behavior.
<div>
Hide required marker
<div>
Float label:
Auto
Always
</div>
Both a label and a placeholder
-- None --
Option
favorite <b> Fancy</b> <i> label</i>
</div>
changing the float label default behavior
The floating label behavior can be adjusted globally by providing a value for MAT_FORM_FIELD_DEFAULT_OPTIONS in your application’s root module. Like the floatLabel input, the option can be either set to always, never, or auto.
@NgModule({
providers: [
{provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {floatLabel: 'always'}}
]
})
Hint labels -mat-hint
Hint labels are additional descriptive text that appears below the form field’s underline. A can have up to two hint labels; one start-aligned (left in an LTR language, right in RTL), and one end-aligned.
Hint labels are specified in one of two ways: either by using the hintLabel property of , or by adding a element inside the form field. When adding a hint via the hintLabel property, it will be treated as the start hint. Hints added via the hint element can be added to either side by setting the align property on to either start or end. Attempting to add multiple hints to the same side will raise an error.
<div>
Enter some input
{{input.value?.length || 0}}/10
Select me
Option
Here's the dropdown arrow ^
</div>
Error messages and mat-form-field
Error messages can be shown under the form field underline by adding mat-error elements inside the form field. Errors are hidden initially and will be displayed on invalid form fields after the user has interacted with the element or the parent form has been submitted. Since the errors occupy the same space as the hints, the hints are hidden when the errors are shown.
If a form field can have more than one error state, it is up to the consumer to toggle which messages should be displayed. This can be done with CSS, ngIf or ngSwitch. Multiple error messages can be shown at the same time if desired, but the only reserves enough space to display one error message at a time. Ensuring that enough space is available to display multiple errors is up to the user.
<div>
Enter your email
{{getErrorMessage()}}
</div>
