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

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

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

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

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

"dependencies": {
...
	"@angular/cli": "1.0.0-beta.28.3",
    "@angular/material": "2.0.0-beta.2",
    "hammerjs": "2.0.6",
...
}

"dependencies": {

...

"@angular/cli": "1.0.0-beta.28.3",

"@angular/material": "2.0.0-beta.2",

"hammerjs": "2.0.6",

...

}

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

import { MaterialModule } from '@angular/material';
import 'hammerjs';
...

@NgModule({
    imports: [ BrowserModule, MaterialModule.forRoot() ],
	...

import { MaterialModule } from '@angular/material';

import 'hammerjs';

...

@NgModule({

imports: [ BrowserModule, MaterialModule.forRoot() ],

...

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

System.config({
...
	map: {
		app: 'app',
		...
		'@angular/material': 'npm:@angular/material/bundles/material.umd.js',
		'hammerjs': 'npm:hammerjs/hammer.js',
		...

System.config({

...

map: {

app: 'app',

...

'@angular/material': 'npm:@angular/material/bundles/material.umd.js',

'hammerjs': 'npm:hammerjs/hammer.js',

...

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

<!DOCTYPE html>
<html style="font-family: 'Catamaran', sans-serif; background: whitesmoke;">
    <head>
        <title>Start app</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
		...
		
		<link rel="stylesheet" href="node_modules/@angular/material/core/theming/prebuilt/indigo-pink.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Catamaran">
        <link rel="stylesheet" href="assets/css/style.css">
		
		...
	</head>
	...

<!DOCTYPE html>

<head>

<title>Start app</title>

...

...

</head>

...

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

md-card {
    margin: 20px;
}

.header-caption {
    text-align: center;
    font-size: 40px;
}

.footer-caption {
    text-align: center;
}

md-card {

margin: 20px;

}

.header-caption {

text-align: center;

font-size: 40px;

}

.footer-caption {

text-align: center;

}

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

<h1 class="header-caption">Material components</h1>
<md-card>
    <button md-raised-button>Button</button>
    <button md-mini-fab><md-icon>check</md-icon></button>
    <button md-fab><md-icon>check</md-icon></button>
    <a md-raised-button routerLink=".">Link button</a>
</md-card>
<md-card>
    <md-radio-button>Radio button</md-radio-button>
</md-card>
<md-card>
    <md-select placeholder="Favourite mobile os">
        <md-option>iOS</md-option>
        <md-option>Android</md-option>
    </md-select>
</md-card>
<md-card>
    <md-slider></md-slider>
    <md-slide-toggle>On/Off</md-slide-toggle>
</md-card>
<md-card>
    <md-progress-bar value="35"></md-progress-bar>
</md-card>
<md-card>
    <h3>See other components <a href="https://material.angular.io/components">there</a></h3>
</md-card>
<md-card>
    <h5 class="footer-caption">Blog - <a href="https://progtask.ru">progtask.ru</a></h5>
</md-card>

<h1 class="header-caption">Material components</h1>

<md-card>

<button md-raised-button>Button</button>

<button md-mini-fab><md-icon>check</md-icon></button>

<button md-fab><md-icon>check</md-icon></button>

<a md-raised-button routerLink=".">Link button</a>

</md-card>

<md-card>

<md-radio-button>Radio button</md-radio-button>

</md-card>

<md-card>

<md-select placeholder="Favourite mobile os">

<md-option>iOS</md-option>

<md-option>Android</md-option>

</md-select>

</md-card>

<md-card>

<md-slider></md-slider>

<md-slide-toggle>On/Off</md-slide-toggle>

</md-card>

<md-card>

<md-progress-bar value="35"></md-progress-bar>

</md-card>

<md-card>

<h3>See other components <a href="https://material.angular.io/components">there</a></h3>

</md-card>

<md-card>

<h5 class="footer-caption">Blog - <a href="https://progtask.ru">progtask.ru</a></h5>

</md-card>

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

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

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