Angular 2 16.02.2017 admin No comments

Material components в Angular 2 приложении

В данной статье я покажу как можно использовать Material компоненты в Angular 2 приложении.

Для начала скачайте стартовое шаблонное приложение Angular 2 отсюда.

Теперь давайте делать необходимые изменения:

package.json
Необходимо добавить следующие модули: @angular/cli, @angular/material и hammerjs.

app/app.module.ts
Импортируем MaterialModule и hammerjs.

systemjs.config.json
Добавляем информацию о нахождении material и hammerjs.

index.html
Сюда подключим тему, иконки и шрифт. Также добавьте в тег html стили из примера (2 строчка).

app/app.component.css
Замените содержимое файла на следующее.

app/app.component.html
Замените содержимое на данные, представленные ниже:

Теперь запускайте приложение. Для этого воспользуйтесь командами npm install и npm start.

В приложении представлены не все компоненты. Полный список смотрите тут.

Если у вас возникли какие-либо сложности, то можете сравнить свой код с кодом, который я выложил на Github.


1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (4 оценок, среднее: 5,00 из 5)
Загрузка...