Vật liệu góc 7 - SnackBar

Các <MatSnackBar>, Chỉ thị góc cạnh, được sử dụng để hiển thị thanh thông báo hiển thị trên thiết bị di động như một sự thay thế cho hộp thoại / cửa sổ bật lên.

Trong chương này, chúng tôi sẽ giới thiệu cấu hình cần thiết để hiển thị một quán ăn nhanh bằng Angular Material.

Sau đây là nội dung của bộ mô tả mô-đun đã sửa đổi 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 { }

Sau đây là nội dung của tệp máy chủ HTML đã sửa đổi app.component.html.

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

Sau đây là nội dung của tệp ts đã được sửa đổi 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,
      });
   } 
}

Kết quả

Xác minh kết quả.

Chi tiết

• Ở đây, chúng tôi đã tạo một nút bằng cách sử dụng mat-button khi nhấp chuột vào chúng tôi sẽ hiển thị thanh ăn nhanh.