Основы работы с Angular Material 2

Angular Material 2 добавляет компоненты Material Design в приложения Angular 2+. Цель данного проекта — предоставить полный набор компонентов, который упростил бы создание интерфейсов Material Design для мобильных устройств и настольных компьютеров.

Примечание: Последняя версия Angular Material зависит от Angular 4+.

В этом материале мы расскажем, как начать работу с Angular Material 2.

1: Установка angular-material и hammerjs

Сначала установим Angular Material и его зависимости – Angular animations и Hammer.js – в проект с помощью следующих команд:

npm install --save @angular/material @angular/animations @angular/cdk
npm install --save hammerjs

Hammer.js — это опциональная зависимость, которая помогает с сенсорной поддержкой некоторых компонентов.

2: Настройка файла angular-cli.json

Читайте также: Запуск Angular с помощью строки Angular CLI

Если вы решили все-таки использовать Hammer.js (и учитывая, что вы запустили свой проект с помощью Angular CLI), вам нужно отредактировать файл angular-cli.json, чтобы добавить библиотеку Hammer.js. Откройте файл, найдите массив “scripts” и добавьте следующий путь для Hammer.js:

"scripts": [
  "../node_modules/hammerjs/hammer.min.js"
],

Возможно, вам придется перезапустить локальный сервер, чтобы изменения в angular-cli.json вступили в силу.

3: Пользовательский MaterialModule

До Angular Material 2 Beta 3 использовался глобальный MaterialModule, который можно было импортировать в модуль приложения, чтобы компоненты стали доступными. Недостатком этого модуля является то, что встряска дерева недостаточно эффективно удаляет весь неиспользуемый код.

Поэтому MaterialModule устарел. Вместо него теперь определяют пользовательские модули под конкретный проект. В этих модулях можно импортировать и экспортировать только необходимые компоненты. Подобный модуль может выглядеть так:

import { NgModule } from '@angular/core';

import {
  MatButtonModule,
  MatMenuModule,
  MatToolbarModule,
  MatIconModule,
  MatCardModule
} from '@angular/material';

@NgModule({
  imports: [
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule
  ],
  exports: [
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule
  ]
})
export class MaterialModule {}

Затем такой модуль импортируется в корневой модуль приложения.

4: Добавление Angular Material в модуль приложения.

Импортируйте MaterialModule и добавьте его в приложение. Вам также нужно будет импортировать в модуль все необходимое для анимации. Модуль приложения (допустим, app.module.ts) будет выглядеть примерно так:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { MaterialModule } from './material.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MaterialModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

5: Импорт темы и иконок

Angular Material автоматически устанавливает несколько готовых тем, которые задают цвета и основные стили. Доступные темы: indigo-pink, deeppurple-amber, purple-green и pink-bluegrey.

Чтобы импортировать тему, вы можете добавить в свой глобальный файл styles.css следующую строку:

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

Кроме того, у вас есть доступ к иконкам Material Design, именованные иконки можно использовать с компонентом <mat-icon>. Чтобы импортировать их в свой проект, вы можете добавить в раздел head корневого файла index.html проекта такой код:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

6: Работа с Angular Material

Теперь вы можете использовать доступные компоненты Angular Material в своих шаблонах. Например, вот так выглядит базовая разметка для шаблона приложения:

<div>
  <mat-toolbar color="primary">
    <span><mat-icon>mood</mat-icon></span>

    <span>Yay, Material in Angular 2!</span>

    <button mat-icon-button [mat-menu-trigger-for]="menu">
      <mat-icon>more_vert</mat-icon>
    </button>
  </mat-toolbar>
  <mat-menu x-position="before" #menu="matMenu">
    <button mat-menu-item>Option 1</button>
    <button mat-menu-item>Option 2</button>
  </mat-menu>

  <mat-card>
    <button mat-button>All</button>
    <button mat-raised-button>Of</button>
    <button mat-raised-button color="primary">The</button>
    <button mat-raised-button color="accent">Buttons</button>
  </mat-card>

  <span class="done">
    <button mat-fab>
      <mat-icon>check circle</mat-icon>
    </button>
  </span>
</div>

Чтобы разметка работала, нужно только добавить в глобальный файл styles.css следующий CSS:

body {
  margin: 0;
  font-family: Roboto, sans-serif;
}

mat-card {
  max-width: 80%;
  margin: 2em auto;
  text-align: center;
}
mat-toolbar-row {
  justify-content: space-between;
}

И мы получим такое приложение:

Итоги

Как видите, все довольно просто.

Более подробную информацию об инструменте Angular Material 2 вы найдете на сайте или в репозитории Github.