Isotope v2 with Angular cli

Question

I'm exepiencing problems using isotope-layout module with angular cli

I installed the module with
npm install isotope-layout --save

and I added the script in my .angular-cli.json file

"scripts": [ 
    ...
    "../node_modules/isotope-layout/dist/isotope.pkgd.js"
  ],

and also the dependancy in the package.json

 "dependencies": {
    ..
    "zone.js": "^0.8.4",
    "isotope-layout": "^3.0.2"
 }

but if I call in my component

ngOnInit() { $('.grid').isotope(); }

but I have back an error

Property 'isotope' does not exist on type 'jQuery<HTMLElement>'

How can I use this library in my module?
I tried to import it with

import isotope from 'isotope-layout';

but I have the error "cannot find module"

Can anyone explain to me how to use angular module in angular cli? I'm preatty confused..

ps_If via console I type $('.grid').isotope(); it works..

score 7 · Answer 1 · answered Jun 27 '17 at 12:45

The install command and your cli config look correct.

I think first you have to make 'Isotope' visible by adding a type definition.

declare var Isotope: any;

You can do that in the typings.d.ts file or directly in your component.ts file. Then you can use it in the code like that i.e. when clicking a button.

sortButtonClick(){

  let grid = document.querySelector('.grid');
  let iso = new Isotope(grid, {
      sortBy: 'random'
    }
  );
}

Isotope v2 with Angular cli

1 Answers1