CODEWITHSUNDEEP
angulartypescriptmaterialize
Debabrata Sahoo
Debabrata Sahoo

Reputation: 143

How to import new matrialized css 1.0 alpha version to angular 4

Need to import new matrialized css 1.0 alpha version to angular 4. I can write below code to make things work

<a onclick="M.toast({html: 'I am a toast'})" class="btn">Toast!</a>

But i want to import the materialized module into the typescript

import {M} from 'materilized-css';

so that i can use in some function

function test() {
  // some condition 
  M.toast({html: 'I am a toast'})
}

I have added the script file path in .angular-cli.json.

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

How can i do so. Need help in this or there is any other way to make this work.

Upvotes: 0

Views: 217

Answers (1)

user4676340
user4676340

Reputation:

That's not how it works.

First, you need to add the JS import, either in your index.html file (and you declare your library as an asset), either in your angular-cli.json file.

You should do the latter one. You must put your script into the scripts property of your angular-cli file.

Once it's done, in your components, you need to declare a global variable as so 

declare var M: any;

Now in your component, you will have access to this variable, as you would in JS.

If you have any question, feel free to ask !

EDIT In details

angular-cli.json

"styles": [
  "You should have some styles in this property",
  "Add your dependency like so"
  "../node_modules/PATH/TO/MATERIALIZE.css"
],
"scripts": [
  "You should have some scripts in this property",
  "Add your dependency like so"
  "../node_modules/PATH/TO/MATERIALIZE.js"
],

In your component

// First, you have your import zone
import { ... } from '...';

// You put your declare here
declare var M: any;

// Then you have the component
@Component({...})
export class MyComponent implements onInit { ... }

Upvotes: 1

Related Questions