使用 Angular CLI 進行安裝或設定

在這個例子中，我們將使用 @angular/cli（最新）和最新版本的 @angular/material。在繼續執行以下步驟之前，你至少應該瞭解 Angular 2/4 的基礎知識。

1. 從 npm 安裝角度材料模組：

   npm install @angular/material --save
   

Version >= 2.0.0 beta.3

這僅適用於 2.0.0-beta.3 及以上版本。

安裝 @angular/animations 模組：

npm install @angular/animations --save

Version >= 2.0.0 beta.8

這僅適用於 2.0.0-beta.8 及以上版本。

安裝 @angular/cdk 模組：

npm install @angular/cdk --save

2. 在你的應用程式模組中匯入你要使用的元件：

   import { NgModule } from '@angular/core';
   import { CommonModule } from '@angular/common';
   import { RouterModule } from '@angular/router';
   import { MdButtonModule, MdSnackBarModule, MdSidenavModule } from '@angular/material';
   
   import { AppComponent } from './app.component';
   
   import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
   
   @NgModule({
        imports: [
            BrowserAnimationsModule,
            MdButtonModule,
            MdSnackBarModule,
            MdSidenavModule,
            CommonModule,
            // This is optional unless you want to have routing in your app
            // RouterModule.forRoot([
            //     { path: '', component: HomeView, pathMatch: 'full'}
            // ])
        ],
        declarations: [ AppComponent ],
        boostrap: [ AppComponent ]
   })
   export class AppModule {}
   

你現在可以在元件中使用 Angular Material 了！

注意：特定元件的文件即將推出