title: How to use materialize-css with angular
body: <p>I have created an <strong>angular4</strong> project with <strong>angular-cli</strong>. I want to <a href="http://next.materializecss.com/" rel="noreferrer">materialize-css@next</a> library. So I have installed it using</p>
  <pre><code>npm install materialize-css@next --save
  </code></pre>
  <p>so this installed</p>
  <pre><code>&quot;materialize-css&quot;: &quot;^1.0.0-alpha.2&quot;,
  </code></pre>
  <p>Then in the angular-cli.json I have added reference to css and js file</p>
  <pre><code>&quot;styles&quot;: [
     &quot;styles.css&quot;,
     &quot;../node_modules/materialize-css/dist/css/materialize.css&quot;
  ],
  &quot;scripts&quot;: [
     &quot;../node_modules/materialize-css/dist/js/materialize.js&quot;
  ],
  </code></pre>
  <p>Now this is working fine for normal components like button and navigation bar as these components do not need any js.</p>
  <p>How can I create dynamic elements like the carousel, collapsible and other components in which there is the requirement for js?</p>
  <p>As I have googled there are wrapper libraries like <strong>angualr2-materialize</strong></p>
  <p>So I have installed this</p>
  <pre><code>npm install angular2-materialize --save
  </code></pre>
  <p>And imported the module in my <strong>app.module.ts</strong></p>
  <pre><code>import { MaterializeModule } from 'angular2-materialize';
  </code></pre>
  <p>and then in <code>imports</code> array of <code>@NgModule</code></p>
  <pre><code>imports: [
    BrowserModule,
    MaterializeModule
  ],
  </code></pre>
  <p>and when I use the following markup</p>
  
  <pre><code>&lt;a class=&quot;waves-effect waves-light btn modal-trigger&quot; (click)=&quot;openModal()&quot;&gt;Modal&lt;/a&gt;
  
  &lt;div id=&quot;modal1&quot; class=&quot;modal bottom-sheet&quot; materialize=&quot;modal&quot; [materializeParams]=&quot;[{dismissible: false}]&quot; [materializeActions]=&quot;modalActions&quot;&gt;
      &lt;div class=&quot;modal-content&quot;&gt;
          &lt;h4&gt;Modal Header&lt;/h4&gt;
          &lt;p&gt;A bunch of text&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class=&quot;modal-footer&quot;&gt;
          &lt;a class=&quot;waves-effect waves-green btn-flat&quot; (click)=&quot;closeModal()&quot;&gt;Close&lt;/a&gt;
          &lt;a class=&quot;modal-action modal-close waves-effect waves-green btn-flat&quot;&gt;Agree&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>It is showing</p>
  <pre><code>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
  </code></pre>
  <p>Am I missing something?</p>
  <p>Is there any way to use MaterializeCSS library without using wrappers?</p>