Angular Material на русском

Шаг 1. Установка Angular Material и Angular CDK

Можно использовать один из двух пакетных менеджеров npm или yarn.

NPM

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

Yarn

yarn add @angular/material @angular/cdk

Шаг 2. Анимация.

Некоторые компоненты Material зависят от модуля Angular animations. Если вы хотите, чтобы эти анимации работали в вашем приложении, вам необходимо установить модуль @angular/animations и включить в приложение модуль BrowserAnimationsModule.

npm install --save @angular/animations

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})
export class PizzaPartyAppModule { }

Примечание.

@Angular/animations использует API WebAnimation, который пока не поддерживается всеми браузерами. Если вы хотите поддерживать анимацию Material компонентов в этих браузерах, вам придется включить polyfill.

Если вы не хотите добавлять другую зависимость в свой проект, вы можете использовать NoopAnimationsModule.

import {NoopAnimationsModule} from '@angular/platform-browser/animations';
@NgModule({
  ...
  imports: [NoopAnimationsModule],
  ...
})
export class PizzaPartyAppModule { }

Шаг 3. Импортируем модули компонентов.

Импортируйте NgModule для каждого компонента, который вы хотите использовать:

import {MatButtonModule, MatCheckboxModule} from '@angular/material';
@NgModule({
  ...
  imports: [MatButtonModule, MatCheckboxModule],
  ...
})
export class PizzaPartyAppModule { }

Кроме того, вы можете создать отдельный NgModule, который импортирует все компоненты Angular Material, которые вы будете использовать в своем приложении. Затем вы можете включить этот модуль там, где хотите использовать компоненты.

import {MatButtonModule, MatCheckboxModule} from '@angular/material';
@NgModule({
  imports: [MatButtonModule, MatCheckboxModule],
  exports: [MatButtonModule, MatCheckboxModule],
})
export class MyOwnCustomMaterialModule { }

Какой бы подход вы ни использовали, обязательно импортируйте модули Angular Material после модуля BrowserModule, поскольку порядок импорта имеет значение для NgModules.

Шаг 4. Включаем тему.

Включение темы требует применения всех основных и тематических стилей к вашему приложению.

Чтобы начать работу с предварительно созданной темой, включите одну из предварительно созданных тем Angular Material в ваше приложение. Если вы используете Angular CLI, вы можете добавить это в свои styles.css:

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

Если вы не используете Angular CLI, вы можете включить тему в вашем index.html.

Дополнительные сведения о темах и инструкции по созданию настраиваемой темы см. В руководстве по темам. 

Шаг 5. Поддержка жестов.

Некоторые компоненты (mat-slide-toggle, mat-slider, matTooltip) используют HammerJS для поддержки жестов. Чтобы получить полный набор этих компонентов, HammerJS должен быть загружен в приложение.

Вы можете добавить HammerJS в свое приложение через npm, CDN (например, CDN Google) или напрямую работать с вашим приложением.

Для установки через npm используйте следующую команду:

NPM

npm install --save hammerjs

Yarn

yarn add hammerjs

После установки импортируйте его в основную точку входа вашего приложения (например src/main.ts)

import 'hammerjs';

Шаг 6. (Опционально) Добавление иконок Material

Если вы хотите использовать компонент mat-icon с официальными значками Material Design Icons, загрузите шрифт значка в свой index.html.

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

Для большей информации по использованию Material Icons, см. Material Icons Guide.

Заметим, что mat-icon поддерживает любой иконочный шрифт svg; Использование Material Icons это однин из возможных вариантов.