Angular на примерах: интеграция материалов Angular (видео включено)
Монтаж
Для установки поддержки Angular Material требуются две библиотеки:
$ npm install @angular/material @angular/cdk
Интеграция
Чтобы использовать компонент материала, мы должны сначала импортировать модуль:
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {MatButtonModule} from '@angular/material';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatButtonModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
Теперь, когда мы импортировали ЕдаКнопкаМодуль мы можем пойти дальше и использовать его в нашем app.component.html шаблон:
<div class="wrapper">
<button mat-raised-button
color="primary">
Click me! Material works!
</button>
</div>
Наконец, нам нужно @импорт материальную тему от нашего стили.scss файл:
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
Конечный результат:
Конечные результаты!
