https://material.angular.io/guide/getting-started
ng new testapp
cd testapp
npm install --save @angular/material @angular/cdk
npm install --save @angular/animations
ng serve
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatFormFieldModule, MatInputModule } from '@angular/material';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatFormFieldModule,
MatInputModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html
<p>Test Angular Material</p>
<form>
<mat-form-field class="example-full-width">
<input matInput placeholder="Favorite food" value="Sushi">
</mat-form-field>
</form>
app.component.css
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
在他们的网站上没有正常链接。
我很确定我忘记了什么,但我在他们的网站上到处都在看,甚至不知道是什么......
感谢您的帮助。
答案 0 :(得分:2)
主题的导入通常在style.css样式表中。
答案 1 :(得分:1)
如果问题是单击输入的材质的动画无法正常工作,则可能您未定义材质的主题: 转到src文件夹中的styles.css,并像这样写行主题
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
要选择其他主题:consider Angular's theme guide。