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

یکشنبه ۷ شهریور ۱۴۰۰
بازدید ۷۳۰ نفر
AmRo
(5 امتیاز از 1 رای)
Loading...

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

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

یک دستورالعمل انگولار است که به منظور ایجاد منو با استایل متریال دیزاین مورد استفاده قرار می گیرد. در این بخش چگونگی ایجاد و استفاده از این دستورالعمل را با یک مثال ساده بررسی خواهیم کرد.

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

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

محتوای فایل 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 {MatMenuModule, MatButtonModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatMenuModule, MatButtonModule,
      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 {MatMenuModule, MatButtonModule} from '@angular/material'

import {FormsModule, ReactiveFormsModule} from '@angular/forms';

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

BrowserAnimationsModule,

MatMenuModule, MatButtonModule,

FormsModule,

ReactiveFormsModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

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

<button mat-button [matMenuTriggerFor] = "menu">File</button>
<mat-menu #menu = "matMenu">
   <button mat-menu-item>New</button>
   <button mat-menu-item>Open</button>
   <button mat-menu-item [matMenuTriggerFor] = "recent">Recent</button>
</mat-menu>
<mat-menu #recent = "matMenu">
   <button mat-menu-item>File 1</button>
   <button mat-menu-item>File 2</button>
</mat-menu>