Flex-layout: Custom Breakpoints Documentation Examples

[MarcusMorba]

Proposal

Example use cases for improvements of the custom breakpoints documentation.

What is the summary of the proposal?

Improve the custom breakpoints documentation.

What is the proposal?

First the related flex-layout-version should be named somewhere for all or the related examples to ensure with which version it´s working.

I would like to see the following example use cases:

1. Overwrite the default breakpoints with custom values
2. Extend the xl-breakpoint with "gt-xl"-directive
3. Add additional custom breakpoint "xxl" (incl. lt-xxl & gt-xxl) additional to existing breakpoints

Is there anything else we should know?

[MarcusMorba]

An additional question: when using Configuration (https://github.com/angular/flex-layout/blob/master/guides/Configuration.md), is it still necessary to enable these custom, responsive selectors and to extend the ShowHideDirective and the LayoutDirective like explained (https://github.com/angular/flex-layout/wiki/Breakpoints).

To be able to "just" overwrite the default breakpoints and add additional custom breakpoints and done would be amazing.

[MarcusMorba]

Here an example for a current project I have difficulties getting it work:
`const EPO_BREAKPOINTS = [
{ alias: 'xs', suffix: 'Xs', mediaQuery: 'screen and (max-width: 1024px)', overlapping: false },
{ alias: 'sm', suffix: 'Sm', mediaQuery: 'screen and (min-width: 1025px) and (max-width: 1280px)', overlapping: false },
{ alias: 'md', suffix: 'Md', mediaQuery: 'screen and (min-width: 1281px) and (max-width: 1599px)', overlapping: false },
{ alias: 'lg', suffix: 'Lg', mediaQuery: 'screen and (min-width: 1600px) and (max-width: 1919px)', overlapping: false },
{ alias: 'xl', suffix: 'Xl', mediaQuery: 'screen and (min-width: 1920px) and (max-width: 2250px)', overlapping: false },
{ alias: 'xxl', suffix: 'Xxl', mediaQuery: 'screen and (min-width: 2251px) and (max-width: 4096px)', overlapping: false },
{ alias: 'lt-sm', suffix: 'LtSm', mediaQuery: 'screen and (max-width: 1024px)', overlapping: false },
{ alias: 'lt-md', suffix: 'LtMd', mediaQuery: 'screen and (max-width: 1280px)', overlapping: false },
{ alias: 'lt-lg', suffix: 'LtLg', mediaQuery: 'screen and (max-width: 1599px)', overlapping: false },
{ alias: 'lt-xl', suffix: 'LtXl', mediaQuery: 'screen and (max-width: 1919px)', overlapping: false },
{ alias: 'lt-xxl', suffix: 'LtXxl', mediaQuery: 'screen and (max-width: 2250px)', overlapping: false },
{ alias: 'gt-xs', suffix: 'GtXs', mediaQuery: 'screen and (min-width: 1025px)', overlapping: false },
{ alias: 'gt-sm', suffix: 'GtSm', mediaQuery: 'screen and (min-width: 1281px)', overlapping: false },
{ alias: 'gt-md', suffix: 'GtMd', mediaQuery: 'screen and (min-width: 1600px)', overlapping: false },
{ alias: 'gt-lg', suffix: 'GtLg', mediaQuery: 'screen and (min-width: 1920px)', overlapping: false },
{ alias: 'gt-xl', suffix: 'GtXl', mediaQuery: 'screen and (min-width: 2251px)', overlapping: false }
];

export const CUSTOM_BREAKPOINTS = {
provide: BREAKPOINT,
useValue: EPO_BREAKPOINTS,
multi: true
};`

[MarcusMorba]

@CaerusKaru : if you can provide some working app code examples I think I would be able to write some documentation.

[CaerusKaru]

We'll be getting this in just as soon as #900 lands.

[leandro-hl]

Hey there! Any news on it? I've been trying to make my own custom breakpoints following the example and I could not make it work. Directives are being created but for some reason the layout is not applying the media queries defined on the provider. Also, the examples around use the class Monitor and a cache setter:
Eg
set layoutVTab(val) { this._cacheInput('layoutVTab', val); };

But both seems to be deprecated.