@angular/material/expansion#MatExpansionModule TypeScript Examples

The following examples show how to use @angular/material/expansion#MatExpansionModule. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: accounts.module.ts From careydevelopmentcrm with MIT License

6 votes

@NgModule({
  declarations: [
    AddAccountComponent,
    AccountFormComponent,
    ViewAccountsComponent,
    EditAccountComponent,
    ViewAccountComponent,
    NoValueDisplayPipe
  ],
  imports: [
    CommonModule,
    FlexLayoutModule,
    DirectivesModule,
    MatIconModule,
    MatInputModule,
    MatButtonModule,
    MatProgressSpinnerModule,
    MatSelectModule,
    MatRadioModule,
    MatExpansionModule,
    MatTableModule,
    MatSortModule,
    MatPaginatorModule,
    MatCardModule,
    MatListModule,
    MatAutocompleteModule,
    ReactiveFormsModule,
    AlertModule,
    NgxFlagPickerModule,
    RouterModule.forChild(routes)
  ]
})

export class AccountsModule { }

Example #2

Source File: dxc-accordionGroup.module.ts From halstack-angular with Apache License 2.0

6 votes

@NgModule({
  declarations: [DxcAccordionGroupComponent],
  imports: [
    CommonModule,
    MatExpansionModule,
    MatIconModule,
    DxcAccordionModule
  ],
  exports: [DxcAccordionGroupComponent],
})
export class DxcAccordionGroupModule {}

Example #3

Source File: dashboard.module.ts From fyle-mobile-app with MIT License

6 votes

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    DashboardPageRoutingModule,
    MatExpansionModule,
    SharedModule,
    MatIconModule,
    MatRippleModule,
    MatTabsModule,
    MatBottomSheetModule,
    MatSnackBarModule,
    SwiperModule,
  ],
  declarations: [DashboardPage, StatsComponent, StatBadgeComponent, TasksComponent, TasksCardComponent],
  providers: [DashboardService],
})
export class DashboardPageModule {}

Example #4

Source File: dxc-accordion.module.ts From halstack-angular with Apache License 2.0

6 votes

@NgModule({
  declarations: [DxcAccordionComponent, DxcAccordionIconComponent],
  imports: [
    CommonModule,
    MatExpansionModule,
    MatIconModule,
    BackgroundProviderInnerModule,
  ],
  exports: [DxcAccordionComponent, DxcAccordionIconComponent],
})
export class DxcAccordionModule {}

Example #5

Source File: app.module.ts From gnosis.1inch.exchange with MIT License

6 votes

@NgModule({
    declarations: [
        AppComponent,
        SlippageSettingsComponent,
        GasSettingsComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        HttpClientModule,
        BrowserAnimationsModule,
        MatButtonModule,
        MatSelectModule,
        FormsModule,
        ReactiveFormsModule,
        MatInputModule,
        MatFormFieldModule,
        MatTooltipModule,
        MatIconModule,
        MatRadioModule,
        NgxWebstorageModule.forRoot(),
        MatAutocompleteModule,
        NgxMatSelectSearchModule,
        MatExpansionModule,
        FontAwesomeModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {
}

Example #6

Source File: capture_profile_dialog_module.ts From profiler with Apache License 2.0

6 votes

/** A capture profile dialog module. */
@NgModule({
  declarations: [CaptureProfileDialog],
  imports: [
    BrowserModule,
    CommonModule,
    FormsModule,
    MatButtonModule,
    MatDialogModule,
    MatExpansionModule,
    MatFormFieldModule,
    MatInputModule,
    MatRadioModule,
    MatSelectModule,
    MatTooltipModule,
  ],
  exports: [CaptureProfileDialog]
})
export class CaptureProfileDialogModule {
}

Example #7

Source File: app.module.ts From json-schema-form with Apache License 2.0

6 votes

@NgModule({
  declarations: [
    AppComponent,
    MainComponent,
    CustomComponent,
    SchemaEditComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    JsonSchemaFormModule,
    MatExpansionModule,
    MatToolbarModule,
    AppRoutingModule,
    MatCardModule,
    MatTooltipModule,
    MatSlideToggleModule,
    FormsModule,
    MatButtonModule,
    NgxEditorModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Example #8

Source File: json-schema-form.module.ts From json-schema-form with Apache License 2.0

6 votes

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

Example #9

Source File: host_side_analysis_detail_module.ts From profiler with Apache License 2.0

6 votes

@NgModule({
  declarations: [HostSideAnalysisDetail],
  imports: [
    CommonModule,
    MatExpansionModule,
    ChartModule,
  ],
  exports: [HostSideAnalysisDetail]
})
export class HostSideAnalysisDetailModule {
}

Example #10

Source File: user.module.ts From careydevelopmentcrm with MIT License

6 votes

@NgModule({
  declarations: [
    AccountInfoComponent,
    ProfileImageComponent,
    InboxComponent,
    MessageComponent,
    NoSanitizePipe,
    ComposeEmailComponent,
    EmailChoiceComponent,
    EmailRedirectComponent
  ],
  imports: [
    CommonModule,
    FlexLayoutModule,
    MatIconModule,
    MatInputModule,
    MatButtonModule,
    MatProgressSpinnerModule,
    MatCardModule,
    MatSelectModule,
    MatListModule,
    MatTableModule,
    MatSortModule,
    MatCheckboxModule,
    MatPaginatorModule,
    MatStepperModule,
    MatRadioModule,
    MatExpansionModule,
    MatMenuModule,
    MatToolbarModule,
    MatAutocompleteModule,
    ReactiveFormsModule,
    QuillModule.forRoot(),
    AlertModule,
    ImageUploaderModule,
    RouterModule.forChild(routes)
  ]
})
export class UserModule { }

Example #11

Source File: normalized_accelerator_performance_view_module.ts From profiler with Apache License 2.0

6 votes

/** A normalized accelerator performance view module. */
@NgModule({
  declarations: [NormalizedAcceleratorPerformanceView],
  imports: [
    CommonModule,
    MatExpansionModule,
  ],
  exports: [NormalizedAcceleratorPerformanceView]
})
export class NormalizedAcceleratorPerformanceViewModule {
}

Example #12

Source File: docs.module.ts From open-source with MIT License

6 votes

@NgModule({
  imports: [
    CommonModule,
    HttpClientModule,
    FlexLayoutModule,
    RouterModule.forChild(routes),
    MatButtonModule,
    MatIconModule,
    MatTabsModule,
    MatExpansionModule,
    MatListModule,
    MatSnackBarModule,
    MatTooltipModule,
    LayoutModule,
  ],
  declarations: [
    LayoutComponent,
    ContentComponent,
    ExampleComponent,
    ViewerComponent,
    StackblitzComponent,
  ],
  providers: [
    ContentService,
  ],
})
export class DocsModule {}

Example #13

Source File: app.module.ts From angular-dark-mode with MIT License

6 votes

@NgModule({
  declarations: [
    AppComponent,
    SampleDialogComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatToolbarModule,
    MatSlideToggleModule,
    ReactiveFormsModule,
    MatButtonModule,
    MatCardModule,
    MatIconModule,
    MatDialogModule,
    FlexLayoutModule,
    MatFormFieldModule,
    MatInputModule,
    MatCheckboxModule,
    MatExpansionModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Example #14

Source File: _module.stories.ts From angular-component-library with BSD 3-Clause "New" or "Revised" License

6 votes

storiesOf(`${COMPONENT_SECTION_NAME}/Empty State`, module)
    .addDecorator(
        moduleMetadata({
            imports: [
                BrowserAnimationsModule,
                EmptyStateModule,
                MatButtonModule,
                MatIconModule,
                UtilModule,
                MatExpansionModule,
            ],
        })
    )
    .addDecorator(withKnobs)
    // @accessibility
    .addDecorator(withA11y)
    .addDecorator(storyWrapper())
    .addDecorator(useWhiteBackground())
    .addParameters({
        ...STORY_PARAMS,
        notes: { markdown: getReadMe('EmptyState.md') },
    })
    .add(README_STORY_NAME, getReadMeStory)
    .add(WITH_MIN_PROPS_STORY_NAME, withBasicConfig)
    .add('with description', withDescription)
    .add('with actions', withActions)
    .add(WITH_FULL_CONFIG_STORY_NAME, withFullConfig)
    .add('within a card', withinACardConfig);

Example #15

Source File: drawer-nav-item.module.ts From angular-component-library with BSD 3-Clause "New" or "Revised" License

6 votes

@NgModule({
    declarations: [DrawerNavItemComponent],
    imports: [
        MatTooltipModule,
        CommonModule,
        InfoListItemModule,
        MatIconModule,
        MatDividerModule,
        MatRippleModule,
        MatExpansionModule,
    ],
    exports: [DrawerNavItemComponent],
})
export class DrawerNavItemModule {}

Example #16

Source File: material.module.ts From bitcoin-s-ts with MIT License

6 votes

materialModules = [
  MatBadgeModule,
  MatBottomSheetModule,
  MatButtonModule,
  MatButtonToggleModule,
  MatCheckboxModule,
  MatExpansionModule,
  MatDatepickerModule,
  MatDialogModule, // For focus
  MatFormFieldModule,
  MatIconModule,
  MatInputModule,
  MatMenuModule,
  MatNativeDateModule,
  MatOptionModule,
  MatProgressSpinnerModule,
  MatSelectModule,
  MatSidenavModule,
  MatSlideToggleModule,
  MatSnackBarModule,
  MatSortModule,
  MatProgressSpinnerModule,
  MatRadioModule,
  MatTableModule,
  MatToolbarModule,
  MatTooltipModule,
]

Example #17

Source File: app.module.ts From RoboScan with GNU General Public License v3.0

6 votes

@NgModule({
  declarations: [
    AppComponent,
    AlertDialogComponent,
    DockerDialogComponent,
    SambaDialogComponent,
    RsyncDialogComponent,
    CaptureOneDialogComponent
  ],
  imports: [
    HttpClientModule,
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    MatToolbarModule,
    MatStepperModule,
    MatButtonModule,
    MatIconModule,
    MatFormFieldModule,
    MatDialogModule,
    MatMenuModule,
    MatDividerModule,
    MatAutocompleteModule,
    MatInputModule,
    MatSelectModule,
    MatButtonToggleModule,
    MatExpansionModule,
    MatSlideToggleModule,
    SocketIoModule.forRoot(config),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Example #18

Source File: material.module.ts From capture-lite with GNU General Public License v3.0

6 votes

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,
]

Example #19

Source File: consumer-common.module.ts From nghacks with MIT License

6 votes

@NgModule({
  exports: [
    MatExpansionModule,
    MatIconModule,
    MatListModule,
    MatButtonModule
  ]
})
export class ConsumerCommonModule { }

Example #20

Source File: shared-mat.module.ts From ng-application-builder with MIT License

6 votes

@NgModule({
  declarations: [],
  exports: [
    CommonModule,
    MatButtonModule,
    MatFormFieldModule,
    MatDialogModule,
    MatInputModule,
    MatRadioModule,
    MatCardModule,
    MatProgressSpinnerModule,
    MatListModule,
    MatToolbarModule,
    MatExpansionModule,
    MatTooltipModule,
    MatIconModule,
    MatProgressBarModule
]
})
export class SharedMatModule { }

Example #21

Source File: material.module.ts From App with MIT License

6 votes

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

Example #22

Source File: app-material.module.ts From barista with Apache License 2.0

6 votes

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,
]

Example #23

Source File: material.module.ts From WiLearning with GNU Affero General Public License v3.0

6 votes

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

Example #24

Source File: gene.module.ts From open-genes-frontend with Mozilla Public License 2.0

6 votes

@NgModule({
  declarations: [
    GeneComponent,
    ResearchesComponent,
    GeneOntologyComponent,
    HumanProteinAtlasComponent,
    ExpressionComponent,
    DynamicContentAnchorsDirective,
    GeneLocationComponent
  ],
  imports: [
    CommonModule,
    RouterModule.forChild(GENE_ROUTES),
    TranslateModule,
    MatProgressBarModule,
    MatCardModule,
    MatListModule,
    MatExpansionModule,
    PipesModule,
    MaterialModule,
    NgToArrayPipeModule,
    UiComponentsModule,
    SidebarModule,
    DirectivesModule,
    NoContentModule,
    IconModule,
    GeneReferenceModule,
    PublicationInfoModule,
    AssociatedDiseasesModule,
    AssociatedDiseaseCategoriesModule,
    NgSplitPipeModule,
    ResearchTablesModule,
  ],
})
export class GeneModule {}

Example #25

Source File: top_ops_table_module.ts From profiler with Apache License 2.0

5 votes

@NgModule({
  declarations: [TopOpsTable],
  imports: [MatExpansionModule],
  exports: [TopOpsTable]
})
export class TopOpsTableModule {
}

Example #26

Source File: app.module.ts From zorro-fire-log with MIT License

5 votes

@NgModule({
  declarations: [
    AppComponent,
    LineChartComponent,
    AlgoSelectorComponent,
    ToolbarComponent,
    GroupToggleComponent,
    StatsTableComponent,
    PortfolioSettingsComponent,
    OpenTradesComponent,
    DateFilterComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule,
    MatIconModule,
    MatTabsModule,
    MatTreeModule,
    MatCardModule,
    MatExpansionModule,
    MatFormFieldModule,
    MatInputModule,
    MatCheckboxModule,
    MatTableModule,
    MatSortModule,
    MatListModule,
    MatProgressSpinnerModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatSlideToggleModule,
    AngularResizedEventModule,
    ChartModule,
    StoreModule.forRoot(
      { tradeLogs: tradeLogsReducer },
      { metaReducers: [storageSyncMetaReducer] }
    ),
    StoreDevtoolsModule.instrument({
      maxAge: 25,
      logOnly: environment.production,
    }),
    EffectsModule.forRoot([TradeLogEffects]),
  ],
  providers: [
    {
      provide: useMockData,
      useFactory: () => !!environment.useMockData,
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Example #27

Source File: material.module.ts From ngSurvey with MIT License

5 votes

@NgModule({
  exports: [
    A11yModule,
    ClipboardModule,
    CdkStepperModule,
    CdkTableModule,
    CdkTreeModule,
    DragDropModule,
    MatAutocompleteModule,
    MatBadgeModule,
    MatBottomSheetModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatTreeModule,
    PortalModule,
    ScrollingModule,
  ]
})
export class MaterialModule {}

Example #28

Source File: dxc-accordion.component.spec.ts From halstack-angular with Apache License 2.0

5 votes

describe("DxcAccordion tests", () => {
  test("should render dxc-accordion", async () => {
    const { getByText } = await render(DxcAccordionComponent, {
      componentProperties: {
        label: "test-button",
        assistiveText: "assistiveText",
      },
      imports: [MatExpansionModule, BackgroundProviderInnerModule],
    });

    expect(getByText("test-button")).toBeTruthy();
    expect(getByText("assistiveText")).toBeTruthy();
  });

  test("defaultIsExpanded dxc-accordion", async () => {
    const projection = "Content inside the ng-content!";
    const onClickFunction = jest.fn();

    await render(
      `<dxc-accordion label="test-accordion" defaultIsExpanded="true" assistiveText="assistiveText" (onClick)="onClickFunction($event)">${projection}</dxc-accordion>`,
      {
        componentProperties: { onClickFunction },
        imports: [MatExpansionModule, BackgroundProviderInnerModule],
        declarations: [DxcAccordionComponent],
      }
    );

    expect(screen.getByText("test-accordion")).toBeTruthy();
    expect(screen.getByText("assistiveText"));

    expect(screen.getByText(projection).hidden).toBeFalsy();;
    fireEvent.click(screen.getByText("test-accordion"));
    expect(onClickFunction).toHaveBeenCalled();
    expect(screen.getByText(projection).hidden)
    fireEvent.click(screen.getByText("test-accordion"));
    expect(screen.getByText(projection).hidden).toBeFalsy();
  });

  test("controlled dxc-accordion", async () => {
    const projection = "Content inside the ng-content!";
    const onClickFunction = jest.fn();
    // TestBed.overrideComponent(DxcAccordionComponent, {
    //   set: { selector: "accordion" },
    // });
    const { getByText } = await render(
      `<dxc-accordion label="test-accordion" assistiveText="assistiveText" isExpanded="false" (onClick)="onClickFunction($event)">${projection}</dxc-accordion>`,
      {
        componentProperties: { onClickFunction },
        declarations: [DxcAccordionComponent],
        imports: [MatExpansionModule, BackgroundProviderInnerModule],
      }
    );

    expect(getByText("test-accordion")).toBeTruthy();
    expect(getByText("assistiveText"));

    expect(getByText(projection).hidden);
    fireEvent.click(getByText("test-accordion"));
    expect(onClickFunction).toHaveBeenCalled();
    expect(getByText(projection).hidden);
    fireEvent.click(getByText("test-accordion"));
    expect(getByText(projection).hidden);
  });
});

Example #29

Source File: app.module.ts From tuxedo-control-center with GNU General Public License v3.0

5 votes

@NgModule({
  declarations: [
    AppComponent,
    ProfileManagerComponent,
    SupportComponent,
    ProfileOverviewTileComponent,
    ProfileDetailsEditComponent,
    InfoComponent,
    CpuDashboardComponent,
    GlobalSettingsComponent,
    ShutdownTimerComponent,
    ToolsComponent,
    ChangeCryptPasswordComponent,
    FanGraphComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgxElectronModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    ReactiveFormsModule,
    MatSidenavModule,
    MatToolbarModule,
    MatListModule,
    MatIconModule,
    MatTableModule,
    MatFormFieldModule,
    MatSelectModule,
    MatButtonModule,
    MatCardModule,
    MatChipsModule,
    MatExpansionModule,
    MatInputModule,
    MatTooltipModule,
    MatCheckboxModule,
    MatDividerModule,
    MatSliderModule,
    MatGridListModule,
    MatStepperModule,
    MatButtonToggleModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MarkdownModule.forRoot(),
    OverlayModule,
    GaugeModule.forRoot(),
    ChartsModule
  ],
  providers: [
    DecimalPipe,
    ThemeService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }