Angular Material in Angularの使い方5

Question

私はちょうどAngle 5の学習を始めました。自分のフォームのスタイルとレイアウトにAngular Materialを使用する必要があります。

これまでに行われたこと： 1. npm install --save @ angular/material @ angular/cdk 2.モジュールをappModule.tsの@NgModuleにインポートしてエクスポートしました。

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms' 
import { AppComponent } from './app.component'; 
import { RegisterComponent } from './register/register.component'; 
import { LoginComponent } from './login/login.component'; 
import { AppRoutingModule } from './/app-routing.module'; 
import { DashboardComponent } from './dashboard/dashboard.component'; 
import { UserService } from './user.service'; 
import { 
    MatAutocompleteModule, 
    MatButtonModule, 
    MatButtonToggleModule, 
    MatCardModule, 
    MatCheckboxModule, 
    MatChipsModule, 
    MatDatepickerModule, 
    MatDialogModule, 
    MatExpansionModule, 
    MatGridListModule, 
    MatIconModule, 
    MatInputModule, 
    MatListModule, 
    MatMenuModule, 
    MatNativeDateModule, 
    MatPaginatorModule, 
    MatProgressBarModule, 
    MatProgressSpinnerModule, 
    MatRadioModule, 
    MatRippleModule, 
    MatSelectModule, 
    MatSidenavModule, 
    MatSliderModule, 
    MatSlideToggleModule, 
    MatSnackBarModule, 
    MatSortModule, 
    MatTableModule, 
    MatTabsModule, 
    MatToolbarModule, 
    MatTooltipModule, 
    MatStepperModule, 
} from '@angular/material'; 
import {HttpModule} from '@angular/http'; 
import {CdkTableModule} from '@angular/cdk/table'; 
@NgModule({ 
    declarations: [ 
    AppComponent, 
    RegisterComponent, 
    LoginComponent, 
    DashboardComponent 
    ], 
    imports: [ 
    BrowserModule, 
    MatAutocompleteModule, 
    MatButtonModule, 
    MatButtonToggleModule, 
    MatCardModule, 
    MatCheckboxModule, 
    MatChipsModule, 
    MatDatepickerModule, 
    MatDialogModule, 
    MatExpansionModule, 
    MatGridListModule, 
    MatIconModule, 
    MatInputModule, 
    MatListModule, 
    MatMenuModule, 
    MatNativeDateModule, 
    MatPaginatorModule, 
    MatProgressBarModule, 
    MatProgressSpinnerModule, 
    MatRadioModule, 
    MatRippleModule, 
    MatSelectModule, 
    MatSidenavModule, 
    MatSliderModule, 
    MatSlideToggleModule, 
    MatSnackBarModule, 
    MatSortModule, 
    MatTableModule, 
    MatTabsModule, 
    MatToolbarModule, 
    MatTooltipModule, 
    MatStepperModule, 
    FormsModule, 
    AppRoutingModule, 
    ], 
    exports: [ 
    CdkTableModule, 
    MatAutocompleteModule, 
    MatButtonModule, 
    MatButtonToggleModule, 
    MatCardModule, 
    MatCheckboxModule, 
    MatChipsModule, 
    MatStepperModule, 
    MatDatepickerModule, 
    MatDialogModule, 
    MatExpansionModule, 
    MatGridListModule, 
    MatIconModule, 
    MatInputModule, 
    MatListModule, 
    MatMenuModule, 
    MatNativeDateModule, 
    MatPaginatorModule, 
    MatProgressBarModule, 
    MatProgressSpinnerModule, 
    MatRadioModule, 
    MatRippleModule, 
    MatSelectModule, 
    MatSidenavModule, 
    MatSliderModule, 
    MatSlideToggleModule, 
    MatSnackBarModule, 
    MatSortModule, 
    MatTableModule, 
    MatTabsModule, 
    MatToolbarModule, 
    MatTooltipModule, 
    ], 
    providers: [UserService], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

ルートコンポーネント（app-module）の子コンポーネント（register-component.html）に角材料タグを使用したいと考えています。どうやってするか？

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

はあなたが持っていることを確認してください：

Answer 1

はAngular Material Docsによると、また、あなたはapp.module.tsの入力配列に追加する必要があります「角度/材料@」からすべてのモジュールをインポートした後、あなたのhtmlで今

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

：あなたの<project_folder>/src/app/styles.cssプットに角度材料のテーマを追加しました

<button mat-button color="primary">Hello</button>

• あなたは、これが