web-dev-qa-db-fra.com

Comment utiliser materialize-css avec angular

J'ai créé un projet angular4 avec angular-cli. Je veux matérialiser-css @ suivant bibliothèque. Donc je l'ai installé en utilisant 

npm install materialize-css@next --save

donc cela installé 

"materialize-css": "^1.0.0-alpha.2",

Ensuite, dans le fichier angular-cli.json, j'ai ajouté une référence aux fichiers css et js

"styles": [
   "styles.css",
   "../node_modules/materialize-css/dist/css/materialize.css"
],
"scripts": [
   "../node_modules/materialize-css/dist/js/materialize.js"
],

Maintenant, cela fonctionne très bien pour les composants normaux tels que les boutons et la barre de navigation car ces composants n’ont pas besoin de js. 

Comment puis-je créer des éléments dynamiques comme le carrousel, les composants réductibles et d'autres composants dans lesquels il existe une exigence pour js?

Comme j'ai googlé il y a des bibliothèques de wrapper comme angualr2-materialize

J'ai donc installé cette 

npm install angular2-materialize --save

Et importé le module dans mon app.module.ts

import { MaterializeModule } from 'angular2-materialize';

puis dans imports tableau de @NgModule

imports: [
  BrowserModule,
  MaterializeModule
],

et quand j'utilise le balisage suivant 

<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>

Il montre 

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

Est-ce que je manque quelque chose?

Est-il possible d'utiliser la bibliothèque MaterializeCSS sans utiliser de wrappers?

javascriptcssangularmaterialize
6
Sunil Garg

angular2-materialize est basé sur materialize-css 0.X. Comme materialize-css 1.X n'a pas de dépendance sur jQuery. Même si je n’ai trouvé aucun emballage à ce sujet et que je ne souhaite pas utiliser les modules d’emballage. J'ai donc résolu ce problème en suivant ces étapes.

1) Référence JS et CSS dans angular-cli.json 

"styles": [
   "styles.css",
   "../node_modules/materialize-css/dist/css/materialize.css"
],
"scripts": [
  "../node_modules/hammerjs/hammer.js",
  "../node_modules/materialize-css/dist/js/materialize.js"
]

hammerjs est requis pour certains composants pour écouter les événements glissants.

2) Importer en ts 

import * as M from "materialize-css/dist/js/materialize";

3) Obtenir la référence de l'élément

@ViewChild('collapsible') elCollapsible: ElementRef;

4) Envelopper l'élément 

ngAfterViewInit() {
    let instanceCollapsible = new M.Collapsible(this.elCollapsible.nativeElement, {});
}

Et fait. 

8
Sunil Garg

angular2-materialize utilise probablement Materialize 0.x, qui utilise l'espace de noms Materialize. materialize-next a basculé vers l’espace de noms M.

angular2-materialize devrait déjà inclure Materialise (0.x).

0
Daniel Ruf