Angular Material Button（基本を10分で作成）

基本ボタンの表示方法

ボタンには様々なタイプがありますが、
今回は最も基本的なボタンの表示方法です。
難しい 箇所はありません。
コードを追加するファイルは、
cmaterial.module.ts
app.component.html
app.component.css
になります。
app.component.tsファイルの変更はありません。

cmaterial.module.tsでは、
MatButtonModule を追加します。
この一つだけになります。

  
 import { NgModule } from "@angular/core";
//追加コード
import { MatButtonModule } from '@angular/material/button';

//変更コード
@NgModule({
 imports:[ MatButtonModule ],
 exports:[ MatButtonModule ]
})
export class CmaterialModule{} 
  

app.component.htmlファイルでは、
mat-buttonとして、
buttonとaを使用していることに注意してください。
colorにprimary、accent、warnを使用します。
決められた色が指定されます。
Link先はrouterLink="."　します。

  
  <h3>Basic Buttons</h3>
<div class="button-row">
  <button mat-button>Basic</button>
  <button mat-button color="primary">Primary</button>
  <button mat-button color="accent">Accent</button>
  <button mat-button color="warn">Warn</button>
  <button mat-button disabled>Disabled</button>
  <a mat-button routerLink=".">Link</a>
</div>  
  

app.component.cssでは、
class名の .button-rowとして、
buttonとaを定義しています。
この右側のマージンを
8pxに設定しています。

  
  .button-row button,.button-row a 
{
  margin-right: 8px;
}
  

参考のため、
app.component.tsのコードを、 下記に示します。

  
 import {Component} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{
  title = 'exe-app';
}  
  

以上です。