@angular/material/menu#MatMenuModule TypeScript Examples

@NgModule({
  declarations: [
    DashboardPageComponent,
    VisitsChartComponent,
    PerformanceChartComponent,
    ServerChartComponent,
    RevenueChartComponent,
    DailyLineChartComponent,
    SupportRequestsComponent,
    ProjectStatChartComponent
  ],
  imports: [
    CommonModule,
    MatTableModule,
    NgxEchartsModule,
    TrendModule,
    MatCardModule,
    MatIconModule,
    MatMenuModule,
    MatButtonModule,
    MatProgressBarModule,
    MatToolbarModule,
    MatGridListModule,
    MatSelectModule,
    MatInputModule,
    NgApexchartsModule,
    FormsModule,
    SharedModule
  ],
  exports: [
    DailyLineChartComponent
  ],
  providers: [
    DashboardService
  ]
})
export class DashboardModule { }

storiesOf(`${COMPONENT_SECTION_NAME}/App Bar`, module)
    .addDecorator(
        moduleMetadata({
            imports: [
                AppBarModule,
                ThreeLinerModule,
                BrowserAnimationsModule,
                ChannelValueModule,
                MatIconModule,
                MatFormFieldModule,
                UtilModule,
                MatButtonModule,
                MatSelectModule,
                MatInputModule,
                MatMenuModule,
                MatListModule,
            ],
        })
    )
    .addDecorator(withKnobs)
    // @accessibility
    .addDecorator(withA11y)
    .addDecorator(appBarWrapper())
    .addDecorator(storyWrapper())
    .addParameters({
        ...STORY_PARAMS,
        notes: { markdown: getReadMe('AppBar.md') },
    })
    .add(README_STORY_NAME, getReadMeStory)
    .add(WITH_MIN_PROPS_STORY_NAME, withBasicConfig)
    .add('with variants', withVariants)
    .add('with dynamic content', withDynamicContent)
    .add('with ng-content', withNgContent)
    .add('with full config', withFullConfig);

describe('FullScreenSlickComponent', () => {
    let component: FullScreenSlickComponent;
    let fixture: ComponentFixture<FullScreenSlickComponent>;

    beforeEach(waitForAsync(() => {
        TestBed.configureTestingModule({
            imports: [SlickModule, MatButtonModule, MatCardModule, MatIconModule, MatMenuModule, MatIconModule],
            declarations: [FullScreenSlickComponent]
        }).compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(FullScreenSlickComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

    it('should create', () => {
        expect(component).toBeTruthy();
    });
});

describe('ViewContactMenuComponent', () => {
  let component: ViewContactMenuComponent;
  let fixture: ComponentFixture<ViewContactMenuComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ViewContactMenuComponent],
      imports: [
        RouterTestingModule,
        MatMenuModule
      ],
      providers: [
      ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(ViewContactMenuComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

describe('CenterSlickComponent', () => {
    let component: CenterSlickComponent;
    let fixture: ComponentFixture<CenterSlickComponent>;

    beforeEach(waitForAsync(() => {
        TestBed.configureTestingModule({
            imports: [SlickModule, MatButtonModule, MatCardModule, MatIconModule, MatMenuModule, MatIconModule],
            declarations: [CenterSlickComponent]
        }).compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(CenterSlickComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

    it('should create', () => {
        expect(component).toBeTruthy();
    });
});

@NgModule({
  declarations: [JsonSchemaFormComponent, EditElementDialogComponent, WidgetDirective],
  imports: [
    MatCardModule,
    FlexLayoutModule,
    MatIconModule,
    MatTooltipModule,
    MatTableModule,
    MatTabsModule,
    MatFormFieldModule,
    MatSelectModule,
    MatDatepickerModule,
    MatCheckboxModule,
    MatAutocompleteModule,
    HttpClientModule,
    CommonModule,
    MatInputModule,
    MatNativeDateModule,
    MatButtonModule,
    MatExpansionModule,
    MatMenuModule,
    ReactiveFormsModule,
    MatDialogModule,
    MatChipsModule,
    DragDropModule
  ],
  exports: [JsonSchemaFormComponent],
  providers: [
    // turn off tooltip gestures on mobile: https://github.com/angular/components/issues/4892
    { provide: MAT_TOOLTIP_DEFAULT_OPTIONS, useValue: { touchGestures: 'off' } },
    { provide: EDIT_DIALOG_TOKEN, useValue: EditElementDialogComponent }
  ]

})
export class JsonSchemaFormModule { }

@NgModule({
    imports: [
        CommonModule,
        RouterModule.forChild(MuuriRoutes),
        MuuriModule,
        MatCardModule,
        MatMenuModule,
        MatIconModule,
        MatButtonModule,
        MatProgressBarModule
    ],
    declarations: [DashboardComponent, StarWarsComponent]
})
export class WorkspaceMurriModule {}

myModules = [
  MatToolbarModule,
  MatSidenavModule,
  MatButtonModule,
  MatMenuModule,
  MatListModule,
  MatIconModule,
  MatInputModule,
  MatCardModule,
  MatTableModule,
  MatSortModule,
  MatDialogModule,
  MatOptionModule,
  MatSelectModule,
]

@NgModule({
    declarations: [AppComponent, AppBreadcrumbComponent, FullComponent, AppSidebarComponent, SpinnerComponent],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        MatMenuModule,
        MatIconModule,
        MatButtonModule,
        LayoutModule,
        SharedModule,
        RouterModule.forRoot(AppRoutes, { relativeLinkResolution: 'legacy' }),
        MatSidenavModule,
        FlexLayoutModule,
        MatToolbarModule,
        MatListModule,
        MatProgressBarModule,
        SpinnerModule
    ],
    bootstrap: [AppComponent]
})
export class AppModule {}

@NgModule({
  declarations: [
    DxcDropdownComponent,
    DxcDropdownOptionComponent,
    DxcDropdownIconComponent,
  ],
  imports: [CommonModule, MatMenuModule, MatButtonModule],
  exports: [
    DxcDropdownComponent,
    DxcDropdownOptionComponent,
    DxcDropdownIconComponent,
  ],
})
export class DxcDropdownModule {}

@NgModule({
  declarations: [
    AppComponent,
    BlogListComponent,
    AddBlogComponent,
    NavbarComponent,
    WelcomePageComponent,
    ViewBlogComponent,
    UpdateBlogComponent,
    
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    ReactiveFormsModule,
    MatButtonModule,
    MatCardModule,
    MatInputModule,
    MatListModule,
    MatToolbarModule,
    MatSliderModule,
    MatMenuModule,
    MatFormFieldModule,
    BrowserAnimationsModule,
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

@NgModule({
  declarations: [
    TablesPageComponent,
    MaterialTableComponent,
    EmployeeTableComponent
  ],
  imports: [
    CommonModule,
    TablesRoutingModule,
    MatCardModule,
    MatIconModule,
    MatMenuModule,
    MatTableModule,
    MatButtonModule,
    MatCheckboxModule,
    MatToolbarModule,
    MatPaginatorModule,
    MatFormFieldModule,
    SharedModule
  ],
  providers: [
    TablesService
  ]
})
export class TablesModule { }

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    TeamAdvancePageRoutingModule,
    MatRippleModule,
    SharedModule,
    MatSelectModule,
    MatFormFieldModule,
    MatInputModule,
    FormsModule,
    ReactiveFormsModule,
    MatMenuModule,
    MatButtonModule,
  ],
  declarations: [TeamAdvancePage, TeamAdvCardComponent],
})
export class TeamAdvancePageModule {}

@NgModule({
    declarations: [
        TourAnchorMatMenuDirective,
        TourStepTemplateComponent,
        TourAnchorOpenerComponent
    ],
    exports: [
        TourAnchorMatMenuDirective,
        TourStepTemplateComponent,
        TourModule
    ],
    imports: [
        CommonModule,
        TourModule,
        MatMenuModule,
        MatCardModule,
        MatButtonModule,
        MatIconModule
    ]
})
export class TourMatMenuModule {
    public static forRoot(): ModuleWithProviders<TourMatMenuModule> {
        return {
            ngModule: TourMatMenuModule,
            providers: [
                TourStepTemplateService,
                TourBackdropService,
                TourService,
                NgxmTourService
            ]
        };
    }
}

modules = [
  MatCheckboxModule,
  MatButtonModule,
  MatInputModule,
  MatAutocompleteModule,
  MatDatepickerModule,
  MatFormFieldModule,
  MatRadioModule,
  MatSelectModule,
  MatSliderModule,
  MatSlideToggleModule,
  MatMenuModule,
  MatSidenavModule,
  MatToolbarModule,
  MatListModule,
  MatGridListModule,
  MatCardModule,
  MatStepperModule,
  MatTabsModule,
  MatExpansionModule,
  MatButtonToggleModule,
  MatChipsModule,
  MatIconModule,
  MatProgressSpinnerModule,
  MatProgressBarModule,
  MatDialogModule,
  MatTooltipModule,
  MatSnackBarModule,
  MatTableModule,
  MatSortModule,
  MatPaginatorModule,
  MatBadgeModule,
  MatBottomSheetModule,
]

@NgModule({
    declarations: [
        NgxMatTimepickerAppComponent,
        CodeViewerComponent
    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        CommonModule,
        FormsModule,
        //
        MatButtonModule,
        MatCardModule,
        MatFormFieldModule,
        MatInputModule,
        MatIconModule,
        MatMenuModule,
        MatSelectModule,
        MatToolbarModule,
        MatTooltipModule,
        //
        NgxMatTimepickerModule.setLocale("it-IT"),
    ],
    providers: [],
    bootstrap: [NgxMatTimepickerAppComponent]
})
export class NgxMatTimepickerAppModule {
}

@NgModule({
  declarations: [
    AppComponent,
    ResponsiveToolbarComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatToolbarModule,
    FlexLayoutModule,
    MatMenuModule,
    MatButtonModule,
    MatIconModule,
    MatDividerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

/** An op profile module. */
@NgModule({
  declarations: [TensorflowStats],
  imports: [
    CommonModule,
    MatButtonModule,
    MatDividerModule,
    MatIconModule,
    MatMenuModule,
    ChartModule,
    ExportAsCsvModule,
    FlopRateChartModule,
    ModelPropertiesModule,
    OperationsTableModule,
    StatsTableModule,
  ],
  exports: [TensorflowStats]
})
export class TensorflowStatsModule {
}

materialModules = [
  MatToolbarModule,
  MatButtonModule,
  MatIconModule,
  MatDialogModule,
  MatSnackBarModule,
  MatProgressSpinnerModule,
  MatMenuModule,
  MatTooltipModule,
  MatSidenavModule,
  MatListModule,
  MatFormFieldModule,
  MatCheckboxModule,
  BrowserAnimationsModule
]

modules = [
  MatToolbarModule,
  MatButtonModule,
  MatMenuModule,
  MatProgressSpinnerModule,
  MatSliderModule,
  MatSidenavModule,
  MatIconModule,
  MatDialogModule,
  MatCardModule,
  MatInputModule,
  MatTooltipModule,
  MatTabsModule,
  MatSelectModule,
  MatFormFieldModule,

  ScrollingModule,
]

@NgModule({
    declarations: [DropdownToolbarComponent],
    imports: [
        CommonModule,
        MatToolbarModule,
        MatSelectModule,
        MatFormFieldModule,
        MatIconModule,
        MatMenuModule,
        SpacerModule,
    ],
    exports: [DropdownToolbarComponent],
})
export class DropdownToolbarModule {}

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        HttpClientTestingModule,
        RouterTestingModule,
        MatToolbarModule,
        MatIconModule,
        MatMenuModule,
        MatDividerModule,
        MatButtonModule
      ],
      declarations: [
        AppComponent,
        NavbarComponent
      ],
    }).compileComponents();
  }));

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  });

  it(`should have as title and brand name 'The Hungry Recipes'`, () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const app = fixture.debugElement.componentInstance;
    const compiled = fixture.debugElement.nativeElement;
    expect(app.title).toEqual('The Hungry Recipes');
    expect(compiled.querySelector('a.brand').textContent).toEqual(app.title);
  });
});

describe("FilterMenuComponent", () => {
  let component: FilterMenuComponent;
  let fixture: ComponentFixture<FilterMenuComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [FilterMenuComponent],
      providers: [].concat(mustInjected()),
      imports: [MatMenuModule],
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(FilterMenuComponent);
    component = fixture.componentInstance;
    component.data = [];
    fixture.detectChanges();
  });

  it("should create", () => {
    expect(component).toBeTruthy();
  });
});

expose = [
  BrowserAnimationsModule,
  MatButtonModule,
  MatButtonToggleModule,
  MatCardModule,
  MatDialogModule,
  MatGridListModule,
  MatIconModule,
  MatListModule,
  MatMenuModule,
  MatSidenavModule,
  MatSnackBarModule,
  MatTabsModule,
  MatToolbarModule,
  MatButtonModule,
  MatCardModule,
  MatGridListModule,
  MatIconModule,
  MatMenuModule,
  MatTreeModule,
  MatFormFieldModule,
  MatInputModule,
  MatSelectModule,
  MatOptionModule,
  MatProgressSpinnerModule,
  MatExpansionModule,
  MatTooltipModule,
]

@NgModule({
  exports: [
    MatSelectModule,
    MatAutocompleteModule,
    MatCardModule,
    MatCheckboxModule,
    MatDatepickerModule,
    MatDialogModule,
    MatGridListModule,
    MatIconModule,
    MatListModule,
    MatMenuModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatRadioModule,
    MatInputModule,
    MatRippleModule,
    MatDividerModule,
    MatExpansionModule,
    MatTableModule,
    MatPaginatorModule,
    MatSortModule,
    MatBadgeModule
  ]
})
export class MaterialComponentsModule {}

modules = [
	MatToolbarModule,
	MatRippleModule,
	MatIconModule,
	MatTooltipModule,
	MatButtonModule,
	MatDividerModule,
	MatFormFieldModule,
	MatInputModule,
	MatCheckboxModule,
	MatProgressSpinnerModule,
	MatProgressBarModule,
	MatPaginatorModule,
	MatDialogModule,
	MatMenuModule,
	MatRadioModule,
	MatDatepickerModule,
	MatNativeDateModule,
	MatExpansionModule,
	MatSelectModule,
	MatBadgeModule,
	MatChipsModule
]

@NgModule({
  declarations: [AlertListComponent],
  imports: [
    CommonModule,
    MatTreeModule,
    MatIconModule,
    MatButtonModule,
    MatDialogModule,
    ItemDetailsModule,
    ItemModule,
    MatTooltipModule,
    MatInputModule,
    MatSlideToggleModule,
    MatDividerModule,
    FormsModule,
    DragDropModule,
    ScrollingModule,
    MatButtonToggleModule,
    QuotaRuleModule,
    QuotaRuleDetailsModule,
    MatMenuModule,
  ],
  exports: [
    AlertListComponent,
  ],
})
export class AlertListModule {
}

@NgModule({
    imports: [
        CommonModule,
        RouterModule.forChild(SlickRoutes),
        MatCardModule,
        MatMenuModule,
        MatIconModule,
        SlickModule,
        MatButtonModule
    ],
    declarations: [
        FixedWidthComponent,
        CenterSlickComponent,
        FullScreenSlickComponent,
        ShowThreeSlickComponent,
        VariableWidthSlickComponent,
        InfiniteCenterSlickComponent,
        RowsSlickComponent,
        SyncSlickComponent
    ]
})
export class WorkspaceSlickModule {}

@NgModule({
  declarations: [InfoDialogConsumerComponent],
  imports: [
    CommonModule,
    InfoDialogRoutingModule,
    ConsumerCommonModule,
    MatTooltipModule,
    MatSlideToggleModule,
    MatMenuModule,
    InfoDialogModule
  ]
})
export class InfoDialogConsumerModule { }