Angular materialのsnackbarをアプリに組み込んで実装したいけどどうやればいいの？
この記事では、上記の悩みを解決します。
今回実装するsnckbarのイメージはこんな感じです。
ボタンを押すと、angular materialのsnckbarが表示されます。※yoteipickerというアプリで挙動が確認できます。
休日で空いた時間の暇つぶしを探せるアプリを公開しています。
snackbarを実装する前の準備
Angular materialのsnackbarを実装する前に、そもそもAngular materialがインストールされていない場合は、公式よりAngular materialのインストールを実施し、Angular materialが使える状態にしてください。
その後、snackbarが使えるように公式にそってsnackbarを使えるようにします。
snackbarのimportとimportsにsnackbarのモジュールを記載すればいいです。
import { MatSnackBarModule } from '@angular/material/snack-bar';
@NgModule({
declarations: [
AppComponent,
],
imports: [
MatSnackBarModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }snackbarの実装①
それではsnackbarの実装をしていきましょう。
まずは、冒頭の画像にもあるようにボタン押したらsnackbarが表示されるようにします。
html側では以下のように適当にクリックイベントを書き、ボタンがクリックされたらonClickの処理が走るようにします。
<button
mat-raised-button color="warn"
(click)="onclick()"
>
クリック</button>ts側にはクリックイベントを書きます。
import { MatSnackBar } from '@angular/material/snack-bar';
@Component({
selector: 'app-sample',
templateUrl: './sample.component.html',
styleUrls: ['./sample.component.css']
})
constructor(
private snackBar: MatSnackBar
) {}
public onClick() {
// スナックバー表示
this.snackBar.open("Pickしました", "OK", {
duration: 3000,
verticalPosition: 'top',
horizontalPosition: 'center',
});
}解説します。
this.snackbar.open(“文言”, “OK”, { とありますが、第一引数で自由に文言を表示(ここではpickしました)でき、第二引数の文言(ここではOK)を表示させることができます。
次に、durationやverticalPositionとか色々とありますが、これはsnackbarの表示位置や表示時間などを表しています。
例えばduration: 3000は、スナックバーを自動的に3000ミリ秒で閉じる、verticalPosition: topの場合はスナックバーを画面上部に表示、horizontalPosition: centerはスナックバーを中央に表示させるといった内容になっています。
以下、スナックバーで使用できる代表的なプロパティです。
| duration | スナックバーを自動的に閉じるまでのミリ秒単位の待機時間 例：3000→3秒 |
| horizontalPosition | スナックバーを配置する水平位置 ‘start’、’center’、’end’、’left’、’right’がある |
| panelClass | スナックバーのCSS クラス |
| verticalPosition | スナックバーを配置する垂直位置 ‘top’、’bottom’ |
snackbar実装②
実装①の内容を踏まえて少しスナックバーをいじった内容になります。
const message = "hoge";
// スナックバー表示
this.snackBar.open(message, "OK", {
duration: 5000,
verticalPosition: 'bottom',
horizontalPosition: 'left',
panelClass: 'snackbar',::ng-deep snack-bar-container.snackbar {
color: red;
}
画面左下にhogeと赤文字で表示され、自動的に5秒で消える仕様になります。
休日で空いた時間の暇つぶしを探せるアプリを公開しています。
コメント