Using materialize in aurelia

Question

I have been trying to get the materialize-css framework to work with Aurelia. I am using Typescript with the framework, and running the server on Windows 8 through the cmd with 'gulp watch'. So far I have attempted to use the aurelia-materialize bridge, following the instructions provided. However, after I have followed the steps, I get the following console output using chrome: console error

The cmd is clean of errors. These are the contents of the main.ts and index files which are the skeleton-typescript with the materialize bridge on top, without further modification: The image on the left is main.ts, the image on the right is index.html

There is the option of adding the materialize css and js imports to the index.html file, but I do not know how to then call the initializing functions on components that require them, such as sliders. Any help at all or alternatives would be appreciated.

http://stackoverflow.com/questions/33574208/trouble-importing-materialize-into-an-aurelia-project explains how to import it without a plugin. A plugin for this would be overkill imo. — Randy, Jul 14 '16 at 10:47
@randy I have tried what the user in that question suggests, but this line: import {materialize} from 'materialize-css'; fails with error: TS2307: Cannot find module 'materialize-css' However, in the jspm_packages folder, materialize is installed properly (or so it seems), and in the package json I have the materialize dependency. — fpluis, Jul 15 '16 at 06:57
You can use materialize the exact same way bootstrap is working. Scrutinize the skeleton, you will find that if you install materialize, it is in your `config.js` just like bootstrap. Replace everything bootstrap is providing with the materialize stuff. In reality that is only the import of the css and javascript library. Config will probably say `'dogfalo/materialize '`, so import that package. — Randy, Jul 15 '16 at 07:21
@randy Thank you for the help, I can so far see the materialize styles globally. However, I am still unable to initialize such elements as sliders or dropdowns, which is my main concern. — fpluis, Jul 15 '16 at 08:12
Are you sure the js file is imported correctly? And maybe you need a [.d.ts file?](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/materialize-css/materialize-css.d.ts) — Randy, Jul 15 '16 at 08:13
@randy I tried using the solution Matthew James Davis provided, but when if I use the plain javascript file he described, the app fails to load content on the router-view, and only when I change the view through the skeleton router do I get a warning: Cannot read property 'nextSibling' of null Perhaps I should import the materialize javascript functions into the component's ts file? — fpluis, Jul 15 '16 at 10:00
Nope. (Unless you know exactly what you are doing you should) Never Touch Libraries. This may work for now, but you wouldn't be able to update your materialize library. It's in alpha, you don't want that for production. I'm sorry though, I don't know how to help you from here today as I don't have a PC, just my phone. — Randy, Jul 15 '16 at 10:12
I've written a blog about integrating third party libraries into Aurelia here: http://davismj.me/blog/aurelia-drag-and-drop/ — Matthew James Davis, Jul 25 '16 at 15:47

Matthew James Davis · Accepted Answer · 2016-07-15T18:48:23.867

4

The best strategy for integrating a CSS framework with Aurelia is to create, where necessary, custom attributes. Here's an example of how to create a custom attribute for a collapsible:

collapsibleCustomAttribute.js

import 'materialize-css'; // the loads the materialize library

@inject(Element)
export class CollapsibleCustomAttribute {

    constructor(element) {
        this.element = $(element);
    }

    attached() {
        this.element.collapsible({
          accordion: false
        });
    }
}

app.html

<require from="./collapsibleCustomAttribute">
<ul class="collapsible" collapsible>
    <li>
        <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
        <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
    </li>
    <li>
        <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
        <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
    </li>
    <li>
        <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
        <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
    </li>
</ul>

edited Jul 15 '16 at 18:48

answered Jul 14 '16 at 17:54

Matthew James Davis

12,134
7
61
90

I have tried to use this, adding the line 'private element;' to the collapsibleCustomAttribute, but it did not work. Also, I am using Typescript as mentioned in the question, but thanks for the answer anyway. – fpluis Jul 15 '16 at 08:10
can you create a gist example? – Matthew James Davis Jul 15 '16 at 14:44
The gist example is here: https://gist.github.com/anonymous/de137e71859787b0c3fe826b77ac073a I did the following: used the typescript skeleton from aurelia's website, did a 'jspm install npm:materialize-css' on console after installing the packages of the skeleton, and then added your code. – fpluis Jul 15 '16 at 16:40
made an edit here: https://gist.github.com/davismj/ba702bc84955ae8f4a256d4b743a9adc and I will update the answer. – Matthew James Davis Jul 15 '16 at 18:48
I tried it, but had to change the jQuery line. It is still not working. You can find the updated gist here: https://gist.github.com/CharleeSin/21b74990d17211cdbdad197dfff910fd – fpluis Jul 15 '16 at 19:20
yea, I think you need to install it with jspm, but this is a separate issue. – Matthew James Davis Jul 15 '16 at 20:36
The aurelia skeleton currently includes jquery. I imported it from there – fpluis Jul 16 '16 at 05:08
If this answer helped you, please upvote. If it answered your question--the question asked, not solved all your problems--then please accept for future readers. – Matthew James Davis Jul 27 '16 at 17:52

Using materialize in aurelia

1 Answers1

Linked