My experience with Angular 2 and jQuery has been quite positive. I am eager to incorporate external libraries such as masonry-layout, but I have encountered a frustrating issue:
When trying to use jQuery(...).masonry(), I receive an error stating that it is not a function.
To make JQuery work, I utilize webpack.
new ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery',
})
In my test.component.ts, I have the following code:
import { Component } from '@angular/core';
import 'masonry-layout';
@Component({
selector: 'test',
template: `
<div class="container-fluid grid">
<div class="grid-item">...</div>
<div class="grid-item">...</div>
<div class="grid-item">...</div>
<div class="grid-item">...</div>
</div>
`
})
export class TestComponent {
ngOnInit() {
jQuery('.grid').masonry();
}
}
If anyone has any suggestions on how to resolve this issue, I would greatly appreciate it. Thank you in advance!