10

I am learning angular2 and building my own custom components using ng2-bootstrap. I want to use modernizer to detect form input which are natively supported by browser.

I am using webpack for building my project.I have successfully configured that.

What I did till now is:

  1. Install npm install -g modernizr
  2. Downloaded modernizr-custom.js with only form inputs checked.
  3. Downloaded modernizr-config.json
  4. I did modernizr -c modernizr-config.json to get a js file.ow to use

I am not sure how to Modernizr.inputtypes.date in my own custom component?How we can access Modernizr variable in my component?

Any help is much appreciated.

Francesco Borzi
  • 56,083
  • 47
  • 179
  • 252
Som
  • 101
  • 1
  • 1
  • 4

3 Answers3

7

Follow the steps:

  1. Place the type definition of Modernizr into your project folder.

  2. Place the modernizr.js in your project and access it within any component using relative path like:

    import './Lib/modernizr.js';

Done. You should be able to use the Modernizr to detect browser feature support.

BuZZ-dEE
  • 6,075
  • 12
  • 66
  • 96
Ram
  • 71
  • 3
  • 2
    The definition file has moved to https://github.com/DefinitelyTyped/DefinitelyTyped/blob/4869992bc079b88280b9ff91213528904109e8ae/modernizr/index.d.ts – squaleLis Dec 29 '16 at 20:44
  • 1
    Hi, I put modernizr.d.ts in client folder but I don't know how to access to Modernizr because I put console.log(Modernizr) and it is not defined – oihi08 Feb 08 '18 at 15:00
  • 1
    steps are incomplete, expecting a reader to pick up gaps. it should be from start to finish. – Frederick G. Sandalo Nov 07 '18 at 09:18
1

Import modernizr like below in your ts file and use it :)

import * as Modernizr from 'modernizr';

Sreeketh K
  • 21
  • 4
0

You would just need to include the Modenrizr file in your page, above any of your angular code. It will register itself on the page, and you will be able to access the global Modernizr object. No further integration should be nessecary

Patrick
  • 13,872
  • 5
  • 35
  • 53
  • I think I have to write a .d.ts file for modernizr.js?Am I correct? – Som Jul 05 '16 at 18:44
  • modernizr does not ship one, correct. DefinitelyTyped provides one, however - https://github.com/DefinitelyTyped/DefinitelyTyped/blob/cc3d223a946f661eff871787edeb0fcb8f0db156/modernizr/modernizr.d.ts – Patrick Jul 05 '16 at 20:55
  • Ok thanks for the above link.It really helped.I am now able to get Modernizr variable.I got another question... Does modernizr detects partail support?Like number input? [link]http://caniuse.com/#feat=input-number. – Som Jul 06 '16 at 18:06
  • Like number increment and decrement is not shown in IE but in chrome... – Som Jul 06 '16 at 19:42
  • that would be best suited to another SO question, so that folks can find it easier. The answer is "it depends", and in that case specifically, no. Modernizr can't reliably detect UI details of inputs – Patrick Jul 06 '16 at 20:25
  • Why there are two versions of modernizr in npm. 1) https://www.npmjs.com/package/npm-modernizr 2) https://www.npmjs.com/package/modernizr – Som Jul 15 '16 at 19:37
  • because anyone can register a package on npm. modernizr is the offical package, npm-modernizr is not – Patrick Jul 16 '16 at 07:53