Cómo usar materialize-css con angular
He creado unangular4 proyecto conangular-cli. quieromaterialize-css @ next biblioteca. Así que lo instalé usando
npm install materialize-css@next --save
entonces esta instalado
"materialize-css": "^1.0.0-alpha.2",
Luego, en el angular-cli.json, he agregado referencias al archivo css y js
"styles": [
"styles.css",
"../node_modules/materialize-css/dist/css/materialize.css"
],
"scripts": [
"../node_modules/materialize-css/dist/js/materialize.js"
],
Ahora esto está funcionando bien para componentes normales como el botón y la barra de navegación, ya que estos componentes no necesitan ningún js.
¿Cómo puedo crear elementos dinámicos como el carrusel, los elementos plegables y otros componentes en los que existe el requisito de js?
Como busqué en Google, hay bibliotecas de envoltorios comoangualr2-materialize
Entonces he instalado esto
npm install angular2-materialize --save
E importé el módulo en miapp.module.ts
import { MaterializeModule } from 'angular2-materialize';
y luego enimports
gama de@NgModule
imports: [
BrowserModule,
MaterializeModule
],
y cuando uso el siguiente marcado
<a class="waves-effect waves-light btn modal-trigger" (click)="openModal()">Modal</a>
<div id="modal1" class="modal bottom-sheet" materialize="modal" [materializeParams]="[{dismissible: false}]" [materializeActions]="modalActions">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
<a class="waves-effect waves-green btn-flat" (click)="closeModal()">Close</a>
<a class="modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
</div>
</div>
Está mostrando
index.js:4 Uncaught Error: Couldn't find Materialize object on window. It is created by the materialize-css library. Please import materialize-css before importing angular2-materialize.
at Object.../../../../angular2-materialize/dist/index.js (index.js:4)
at __webpack_require__ (bootstrap f20633ecefcae2ee4f21:54)
at Object.../../../../../src/app/app.module.ts (app.component.ts:9)
at __webpack_require__ (bootstrap f20633ecefcae2ee4f21:54)
at Object.../../../../../src/main.ts (environment.ts:8)
at __webpack_require__ (bootstrap f20633ecefcae2ee4f21:54)
at Object.3 (main.ts:11)
at __webpack_require__ (bootstrap f20633ecefcae2ee4f21:54)
at webpackJsonpCallback (bootstrap f20633ecefcae2ee4f21:25)
at main.bundle.js:1
¿Me estoy perdiendo de algo?
¿Hay alguna forma de usar la biblioteca MaterializeCSS sin usar envoltorios?