Flex-layout: Custom breakpoints - Cannot read property 'mediaQuery' of undefined error

[nivram80]

I'm trying to create my own custom breakpoints. Using the doc as a reference, I get a Cannot read property 'mediaQuery' of undefined error.

I'm overriding the default breakpoints in the custom-breakpoints.component.ts file and using it in the custom-breakpoints.module.ts which is then being imported into the app via the test-app.module.ts file.

Here is a plunker that shows what I'm trying to do.

[lvanngo]

Try the latest version: 2.0.0-beta.8. At least the error is gone. I'm trying this out too.

[lvanngo]

Forgot to say, be sure to modify the code to return DEFAULT_BREAKPOINTS after the map function call since map returns nothing.

[lvanngo]

Update: Every time I overwrote the BREAKPOINTS provider successfully, none of the Directives seem to work and the breakpoints are not triggered at all. Not sure why... I think we have to wait until this feature is retested and documents updated.

[alexfung888]

@lvanngo
in your switch statement, add the suffix:

  const they: BreakPoint[] = DEFAULT_BREAKPOINTS
    .map((it: BreakPoint) => {
      switch (it.alias) {
        case 'xs' :
          it.mediaQuery =  `(max-width: ${smMin - 1}px)`;
          it.suffix = 'Xs';
          break;
        case 'gt-xs' :
          it.mediaQuery =  `(min-width: ${smMin}px)`;
          it.suffix = 'GtXs';
          break;

Since beta 7, the DEFAULT_BREAKPOINTS lost all the suffix members. Add them back and all the dynamic API will work properly.

However, I still can't use beta 8 at all. It always get
TypeError: _this._renderer.setStyle is not a function

[ThomasBurleson]

@alexfung888 - Beta.8 requires Angular 4.1 or higher due to AOT requirements.

[ThomasBurleson]

@lvanngo - your map iterator must return the breakpoint:

import { BreakPoint, DEFAULT_BREAKPOINTS } from '@angular/flex-layout';

const CUSTOM = {
  'xs'    : 'screen and (max-width: 599px)',
  'gt-xs' : 'screen and (min-width: 600px)',
  'sm'    : 'screen and (min-width: 600px) and (max-width: 1023px)',
  'gt-sm' : 'screen and (min-width: 1024px)', 
  'md'    : 'screen and (min-width: 1024px) and (max-width: 1440px)',
  'gt-md' : 'screen and (min-width: 1440px)',
  'lg'    : 'screen and (min-width: 1440px) and (max-width: 1919px)',
  'gt-lg' : 'screen and (min-width: 1920px)',
  'xl'    : 'screen and (min-width: 1920px) and (max-width: 5000px)',
}

function updateMediaQuery(it:BreakPoint) {
  if ( CUSTOM[ it.alias ] ) {  it.mediaQuery = CUSTOM[ it.alias ];  }
  return it;
}

export function customBreakPoints() { 
  return DEFAULT_BREAKPOINTS.map((it:BreakPoint) => updateMediaQuery);
}

This appears to be working now. See Plunkr Demo

[ThomasBurleson]

Closing as not-an-issue.

[ThomasBurleson]

@alexfung888
Custom suffices are now calculated/generated based on breakpoint aliases: validateSuffices()

/**
 *  Ensure that only a single global BreakPoint list is instantiated...
 */
export function DEFAULT_BREAKPOINTS_PROVIDER_FACTORY() {
  return validateSuffixes(DEFAULT_BREAKPOINTS);
}

For @lvanngo - who just modified the default breakpoints - this is sufficient.
To add more/extra custom breakpoints - that will merge with the default list - developers should use
the

• CUSTOM_BREAKPOINTS_PROVIDER_FACTORY
• Consult Custom Breakpoints Example for details.

We also updated the WIKI: Customizing Breakpoints with corrected sample code.

---

Thx @lvanngo and @alexfung888 for helping us find the Wiki errors!

[alexfung888]

Thanks @ThomasBurleson
Yes I am still at [email protected] No wonder beta8 failed miserably.
I guess the CUSTOM_BREAKPOINTS_PROVIDER_FACTORY code above only works for beta8.
On beta7, nothing happens. No media change is reported at all.

BTW, I changed your sample code to read as follows, which I think is much easier to modify

const smMin = 600;
const mdMin = 1024;
const lgMin = 1280;
const xlMin = 1920;

const CUSTOM = {
  'xs'    : `screen and (max-width: ${smMin - 1})`,
  'gt-xs' : `screen and (min-width: ${smMin})`,
  'sm'    : `screen and (min-width: ${smMin}) and (max-width: ${mdMin - 1})`,
  'gt-sm' : `screen and (min-width: ${mdMin})`,
  'md'    : `screen and (min-width: ${mdMin}) and (max-width: ${lgMin - 1})`,
  'gt-md' : `screen and (min-width: ${lgMin})`,
  'lg'    : `screen and (min-width: ${lgMin}) and (max-width: ${xlMin - 1})`,
  'gt-lg' : `screen and (min-width: ${xlMin})`,
  'xl'    : `screen and (min-width: ${xlMin}) and (max-width: 5000px)`,
}

[ThomasBurleson]

@alexfung888 - The custom breakpoint features are also available in beta.7.

I updated the WIKI (again) to show the correct defaults and imports.

[alexfung888]

Found my problem. Look at my code above: I have forgotten to include "px" in the media detection!

[alexfung888]

@ThomasBurleson I have updated to angular/core 4.1.0, materal 2.0.0-beta.3
my code works fine on [email protected]
but
TypeError: _this._renderer.setStyle is not a function
on [email protected]
any suggestions on how to troubleshoot it?

[ThomasBurleson]

@alexfung888

• delete your node-modules folder.
• reinstall with npm install.

Make sure you are using Angular 4.1 or higher.

[alexeagle]

@alexfung888 ^

[ThomasBurleson]

@alexeagle - you continue to pop up first in my list!

[alexfung888]

@ThomasBurleson
I copy all the source files to a new directory without the node-modules. Do an npm install.
angular/core etc is 410
material is 200beta3
cli is 101
flex-layout is 200beta8
and the new folder (when ng serve) crashes when started.
the original folder is 200beta7 is running fine.

[ThomasBurleson]

@alexfung888 - open a new issue please. Can you provide a zip that reproduces this? I will debug locally.

[alexfung888]

Thanks. I'll try to cut down to code to see when it starts to work.

[alexfung888]

@ThomasBurleson
created issue #270