angular material 使用步骤
<p>tips：默认你已经安装了必备步骤 如angular npm</p><p> </p>
<p>1、首先在你的电脑上安装angular</p>
<div class="cnblogs_code">
<pre>npm install my-app</pre>
</div>
<p> </p>
<p>2、angular 安装成功之后安装material</p>
<div class="cnblogs_code">
<pre>npm install --save @angular/material @angular/cdk @angular/animations</pre>
</div>
<div class="cnblogs_code">
<pre>npm install --save @angular/flex-layout</pre>
</div>
<p> </p>
<ul>
<li>在app.module.ts中导入BrowserAnimationsModule</li>
</ul>
<div class="cnblogs_code">
<pre>import {BrowserAnimationsModule} from '@angular/platform-browser/animations'<span style="color: rgba(0, 0, 0, 1)">;
@NgModule({
...
imports: ,
...
})
export class PizzaPartyAppModule { }</span></pre>
</div>
<ul>
<li>在style.css中引入material样式</li>
</ul>
<div class="cnblogs_code">
<pre>@import "~@angular/material/prebuilt-themes/indigo-pink.css";</pre>
</div>
<ul>
<li>在index.html中引入material图标库</li>
</ul>
<div class="cnblogs_code">
<pre><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"></pre>
</div>
<p> </p>
<p>3、开始angular项目</p>
<ul>
<li>创建类组件 class</li>
</ul>
<div class="cnblogs_code">
<pre>ng g c name</pre>
</div>
<ul>
<li> 创建指令directive</li>
</ul>
<div class="cnblogs_code">
<pre>ng generate directive <name></pre>
</div>
<ul>
<li>创建管道pipe</li>
</ul>
<div class="cnblogs_code">
<pre>ng generate pipe <name></pre>
</div>
<ul>
<li>创建服务service</li>
</ul>
<div class="cnblogs_code">
<pre>ng generate service <name></pre>
</div>
<ul>
<li>创建新的module模块(可以单独设置一个material.module.ts来导入material的模块)</li>
</ul>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">ng generate module material
创建了material.module.ts之后，再在app.module.ts中导入
import { MaterialModule } from </span>"./material/material.module"<span style="color: rgba(0, 0, 0, 1)">;
imports: [
MaterialModule
]</span></pre>
</div>
<ul>
<li>在material.module.ts中导入所有的material模块，以减少导入模块</li>
</ul>
<div class="cnblogs_code">
<pre>import {MatToolbarModule} from '@angular/material/toolbar'<span style="color: rgba(0, 0, 0, 1)">;
@NgModule({
imports: [
MatToolbarModule
],
exports:[
MatToolbarModule
]
})</span></pre>
</div>
<p> </p>
<p>4、基础formgroup表单</p>
<ul>
<li>html部分</li>
</ul>
<div class="cnblogs_code">
<pre><form action="" ="testForm" #formDirective="ngForm" >
<mat-form-field>
<input matInput placeholder="Input" formControlName="name">
</mat-form-field>
<mat-form-field>
<textarea matInput placeholder="textarea" formControlName="notes"></textarea>
</mat-form-field>
</form></pre>
</div>
<ul>
<li>component.ts部分</li>
</ul>
<div class="cnblogs_code">
<pre>import { FormControl, FormGroup, FormBuilder } from '@angular/forms'<span style="color: rgba(0, 0, 0, 1)">;
export class FormComponent implements OnInit {
constructor(
private fb: FormBuilder
) { }
testForm:FormGroup;
ngOnInit(): </span><span style="color: rgba(0, 0, 255, 1)">void</span><span style="color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.testForm=<span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.fb.group({
name:[</span>''<span style="color: rgba(0, 0, 0, 1)">],
notes:[</span>''<span style="color: rgba(0, 0, 0, 1)">]
})
}
}</span></pre>
</div>
<ul>
<li>material.module.ts引入部分</li>
</ul>
<div class="cnblogs_code">
<pre>import {MatFormFieldModule} from '@angular/material/form-field'<span style="color: rgba(0, 0, 0, 1)">;
import {MatInputModule} from </span>'@angular/material/input'<span style="color: rgba(0, 0, 0, 1)">;
@NgModule({
declarations: [],
imports: [
MatFormFieldModule,
MatInputModule
],
exports:[
MatFormFieldModule,
MatInputModule
]
})
export class MaterialModule { }</span></pre>
</div>
<ul>
<li>app.module.ts引入部分</li>
</ul>
<div class="cnblogs_code">
<pre>import { MaterialModule } from "./material/material.module"<span style="color: rgba(0, 0, 0, 1)">;
import { ReactiveFormsModule } from </span>"@angular/forms"<span style="color: rgba(0, 0, 0, 1)">;
imports: [
MaterialModule,
ReactiveFormsModule
]</span></pre>
</div>
<p> </p><br><br>
来源：https://www.cnblogs.com/jahoon/p/13656237.html
頁:
[1]