Materializecss 1.0.0 + угловой

Question

Кто-нибудь успешно создавал какие-либо приложения с Angular и последней версией Materializecss 1.0.0 (бета или rc)?https://materializecss.com/

Похоже, что вся существующая документация относится к Materializecss 0.100.2 или с v 1.0.0, но только с примерами javascript.Я ищу решение Angular (предпочтительно v6) с машинописью.Изо всех сил пытаюсь заставить это работать.

Заранее спасибо

Answer 1

Вот что вам нужно сделать, чтобы использовать Materializecss с Angular2 +

1: установка из командной строки в вашем существующем угловом проекте:

npm i materialize-css@next --save

2: включить Materialize в свой angular.json:

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

3: запустить сервер

ng serve 

4: запуститьработающий

Предлагаю скачать пример шаблона с официального сайта и изменить его в соответствии со своими потребностями.

Важно Как только вы закончитеНа предыдущих шагах вы можете использовать компоненты CSS, но если вы хотите использовать возможности javascript, вам нужно объявить переменную M типа any в каждом компоненте, для которого вы хотите их использовать:

import { Component, OnInit } from '@angular/core';

declare var M: any;

@Component({.....

Чтобы инициализировать компоненты, сделайте что-то вроде этого: (пример для модального)

this.myModal= new M.Modal(document.querySelector('#myModalId'), this.modalOptions);

Попробуйте использовать идентификаторы вместо classess на этом шаге, чтобы вы могли лучше контролировать и избегать конфликтов