کنترل SnackBar در انگولار متریال 7 – آموزش انگولار متریال

یکشنبه ۱۴ شهریور ۱۴۰۰
بازدید ۶۳۷ نفر
یعثوب سیفی زاده
(10 امتیاز از 2 رای)
Loading...

تصویر angular-material-7-snackbar_6422 کنترل SnackBar در انگولار متریال 7 – آموزش انگولار متریال

کنترل SnackBar در انگولار متریال

یک دستورالعمل انگولار است که به منظور ایجاد نوار اعلان (notification bar) استفاده می شود. این کنترل جایگزین dialog و popup در دستگاه های موبایل شده است. در این بخش چگونگی استفاده از این دستورالعمل را با یک مثال ساده بررسی خواهیم کرد.

ایجاد برنامه انگولار

در ادامه برنامه ای که در بخش ایجاد پروژه در انگولار ایجاد کرده بودیم را برای استفاده از کنترل تغییر می دهیم.

محتوای فایل 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 { }

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 { }

محتوای فایل app.component.html:

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

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

محتوای فایل 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,
      });
   }
}