Angular Material in Angular 5의 사용 방법

Question

저는 각도 5를 배우기 시작했습니다. 저는 양식의 스타일과 레이아웃에 Angular Material을 사용해야합니다. 지금까지 수행

것들 : 1. NPM은 각도/CDK 2 @ 각도/재료 @ --save을 설치는 app.module.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 { } 

나는 루트 구성 요소 (응용 프로그램 모듈)의 하위 구성 요소의 각도 소재 태그 (레지스터 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>

• 체크 당신은 또한 당신이 게으른로드 모듈을 사용하고