Açısal Malzeme 7 - SnackBar

<MatSnackBar>Açısal Yönerge, mobil cihazlarda iletişim kutusu / açılır pencerelere alternatif olarak gösterilecek bir bildirim çubuğu göstermek için kullanılır.

Bu bölümde, Açısal Malzeme kullanan bir atıştırmalık büfesini göstermek için gereken yapılandırmayı göstereceğiz.

Değiştirilmiş modül tanımlayıcısının içeriği aşağıdadır app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatButtonModule,MatSnackBarModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatButtonModule,MatSnackBarModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

Aşağıda, değiştirilmiş HTML ana bilgisayar dosyasının içeriği verilmiştir app.component.html.

<button mat-button (click)="openSnackBar('Party', 'act')">Show snack-bar</button>

Değiştirilen ts dosyasının içeriği aşağıdadır app.component.ts.

import {Component, Injectable} from '@angular/core';
import { MatSnackBar } from "@angular/material";
@Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',
   styleUrls: ['app.component.css']
})
export class AppComponent {
   constructor(public snackBar: MatSnackBar) {}
   openSnackBar(message: string, action: string) {
      this.snackBar.open(message, action, {
         duration: 2000,
      });
   } 
}

Sonuç

Sonucu doğrulayın.

Detaylar

• Burada, üzerinde atıştırmalık büfesini gösterdiğimiz mat düğmeyi kullanarak bir düğme oluşturduk.